A Basic Guide to Markdown

A Basic Guide to Markdown

I prefer to draft my articles using a Markdown editor. Markdown has a simple syntax for formatting documents. It is easy to convert to other formats, which allows my stories to be published on different platforms.

As this is a brief introduction to Markdown, I won't show alternative syntaxes for achieving the same result or cover all possible Markdown syntaxes.

In this guide, Markdown syntax is followed by the HTML equivalent and the result.

Headings


 # Header 1     <h1>Header 1</h1>
 ## Header 2    <h2>Header 2</h2>
 ### Header 3   <h3>Header 3</h3>
 #### Header 4  <h4>Header 4</h4>

The more hashes, the smaller the heading. To give you an idea of how they work, I would use:

Header 1 for a book title,
Header 2 for a chapter title,
Header 3 for a section heading and
Header 4 for a sub-section heading.

Medium only has two headings - T1 and T2 - for the body of a story. When I paste the preview text from a Markdown editor to Medium, Header 3 and Header 4 are converted to T1 and T2.

Line Breaks

Some Markdown editors won't show a line break if you only put a Newline (Return) at the end of the line. So, to ensure your text displays properly, I recommend putting two spaces followed by a Return at the end of the line.

New Paragraph

Markdown follows the standard practice of using two Returns to create a new paragraph.

Bold and Italic


 **Bold**  <b>Bold</b>
 *Italic*  <i>Italic</i>

Bold
Italic

Links


 [Learning Pages](https://learningpages.org)

 <a href="https://learningpages.org">Learning Pages</a>

Learning Pages

In some Markdown editors, all you need to do is include the link:


 https://LearningPages.org

Lists

Unordered Lists


 - Red
 - Yellow
 - Blue
 - Green

 <ul>
   <li>Red</li>
   <li>Yellow</li>
   <li>Blue</li>
   <li>Green</li>
 </ul>

Red
Yellow
Blue
Green

Ordered Lists


 1. Item 1
 2. Item 2
 3. Item 3
 4. Item 4

 <ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
 </ol>

Item 1
Item 2
Item 3
Item 4

Quotes


 >"Anger will never disappear so long as thoughts of resentment are cherished in the mind. Anger will disappear just as soon as thoughts of resentment are forgotten."  
 >- Gautama Buddha (c. 563-483 B.C.)

 <blockquote>
 <p>"Anger will never disappear so long as thoughts of resentment are cherished in the mind. Anger will disappear just as soon as thoughts of resentment are forgotten."<br> 
 - Gautama Buddha (c. 563-483 B.C.)</p>
 </blockquote>

"Anger will never disappear so long as thoughts of resentment are cherished in the mind. Anger will disappear just as soon as thoughts of resentment are forgotten."
- Gautama Buddha (c. 563-483 B.C.)

Email


 <markdown@learning.addy.io>

 <a href= "mailto:markdown@learning.addy.io">markdown@learning.addy.io</a>

markdown@learning.addy.io

In some Markdown editors, all you need to do is include the link:

markdown@learning.addy.io

Images


 ![Learning Pages logo](https://mwls.com/images/logos/lp200.jpg "Learning Pages")

 <img src="https://mwls.com/images/logos/lp200.jpg" alt="Learning Pages logo" title="Learning Pages">

Learning Pages logo

It isn't possible to set the horizontal alignment of images and tables in Markdown, but they can be overcome, like other Medium limitations, by using HTML within the Markdown script.

If you are using Medium or Substack, images are automatically centred.

Tables

| |Left|Centre|Right| |:----|:---|:----:|----:| |Row 1|L |C |R | |Row 2|L |C |R |

Horizontal alignment of the columns depends on the number and position of colons in the second row.

The HTML version of this table is:

<table border=1 cellspacing=0 cellpadding=5> <tr align=top> <th><th>Left<th align=center>Centre<th align=right>Right</tr> <tr align=top> <td>Row 1<td>L<td align=center>C<td align=right>R</tr> <tr align=top> <td>Row 2<td>L<td align=center>C<td align=right>R</tr> </table>

	Left	Centre	Right
Row 1	L	C	R
Row 2	L	C	R

Code Blocks

I have used code blocks to show the Markdown and HTML syntaxes in this article. A code block starts and ends with ```

``` if (x > y) { print "x is greater than y"; } ```

In HTML, I use <code style='display:block; white-space:pre-wrap'> to create a codeblock, ensure the code includes new lines and is preformatted in a fixed-width font.


 <code style='display:block; white-space:pre-wrap'>
  if (x > y) {
     print "x is greater than y";
  }

 </code>

Result:

if (x > y) { print "x is greater than y"; }

Learning Markdown has been part of my personal learning journey. A journey that I share with my readers.