Learn to Code via Tutorials on Repl.it!

← Back to all posts
Adding MARKDOWN To Websites
Codemen (4)

DISCLAIMER: Markdown isn't a coding language, it also can not be added. HTML is the way Markdown runs.

Markdown Editors

When you're working with Markdown for the web, it's important to understand the basic syntax and limitations you may face. Before you begin, you need some type of editor and an interpreter for your site. Alternately, you can convert the Markdown before publishing.

You'll need some kind of editor to get started
There are several editors from which you may choose. Byword is awesome because it offers a wide range of export options, including HTML and PDF. Another great alternative is StackEdit – a free, online Markdown editor. Of course, any plain text editor will work.

Set-UP Headings

In HTML, there are six heading styles: h1, h2, h3, h4, h5 and h6. To recreate these in Markdown, use a series of hashtag symbols (#) – corresponding to the heading number – followed by the heading text. For example, to create an <h1> tag, use one hashtag #; for an <h2> tag, use two hashtags ##; and so on and so forth.

Markdown Input:

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

HTML Output:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Mark-UP paragraphs

Paragraphs are represented by the <p> tag in HTML. In Markdown, they're separated by one or more blank lines. Like HTML, whitespace is ignored. So if you add 20 blank lines, you're still only going to have one paragraph.

Markdown Input:

The quick brown fox jumps over the lazy dog.
The lazy dog doesn't care, because he's a lazy dog.

HTML Output

<p>The quick brown fox jumps over the lazy dog.</p>
<p>The lazy dog doesn't care, because he's a lazy dog.</p>
AloegelhiPlaysR (104)

Some CSS can also make it markdown without using markdown code!

body {
// code hereree