To begin writing my first blog, I have to choose if I wish to write it in HTML or markdown. I choose markdown. The catch is, I’ll need to learn markdown. There are different types of markdown. There are the popular ones like Github-flavoured Markdown (GFM), CommonMark. There are also the enhanced ones like Markdown Extra. I got them from this list.

Gatsby’s transformer remark plugin claims to be able to transform markdown but I just couldn’t find what type of markdown it can transform on the documentation. Perhaps all of them? Just to kick start writing my first blog post, this first blog post will be dedicated to testing which markdown is transpiled.

Warning: If you are allergic to bad layouts and styling, do not proceed!

So here are some basic markdown syntax from both CommonMark and Github-flavoured Markdown (GFM):

Adding linked images

Adding an Iframe

For Headers

# This is an `<h1>` tag
## This is an `<h2>` tag
###### This is an `<h6>` tag

Heading level 1
===============

Heading level 2
---------------

Results in

This is an <h1> tag

This is an <h2> tag

This is an <h6> tag

Heading level 1

Heading level 2

For Emphasis

*This text will be italic*
_This will also be italic_

**This text will be bold**
__This will also be bold__

**This is on a separate line**

_You **can** combine them_
# _You **can** combine them_ but # needs to start at the first position to make it a h1 tag

This text will be italic This will also be italic

This text will be bold This will also be bold

This is on a separate line

You can combine them

You can combine them but # needs to start at the first position to make it a h1 tag

Ordered list

1. Item 1
1. Item 2
1. Item 3
   1. Item 3a
   1. Item 3b

1. Item 1
2. Item 2

3. Item 3

   1. Item 3a
   2. Item 3b

Unordered list

- Item 1
* Item 2
  + Item 2a
  * Item 2b

• Item 1

• Item 2

  • Item 2a
  • Item 2b

Ordered list followed by unordered list

1. Item 1
1. Item 2
1. Item 3
   1. Item 3a
   1. Item 3b

* Item 1
* Item 2
  * Item 2a
  * Item 2b

1. Item 1
2. Item 2

3. Item 3

   1. Item 3a
   2. Item 3b
4. Item 1

5. Item 2

   • Item 2a
   • Item 2b

Okay so this doesn’t work. At this point of time, I’m starting to get irritated by the page layout.

Ordered list mixed with unordered list

1. Item 1
  * bullet point 1
1. Item 2
1. Item 3

1. Item 1
2. bullet point 1
3. Item 2
4. Item 3

This doesn’t work too.

Identing your code by 4 spaces

function () {
/*
1234 spaces here
*/
    return `Hello World`;
}

function () { return Hello World; }

/*
1234 spaces here
*/
    function () {
        return `Hello World`;
    }

function () {
    return `Hello World`;
}

Task Lists

- [x] @heyjiawei, #refs, [links](), **formatting**, and <del>tags</del> and ~~strikethrough~~ supported
- [x] this is a complete item
- [ ] this is an incomplete item

• @heyjiawei, #refs, links, formatting, and tags and strikethrough supported
• this is a complete item
• this is an incomplete item

Tables

With table header

First Header | Second Header
------------ | -------------
Content from cell 1 | Content from cell 2

Content in the first column | Content in the second column

Content in the first column | Content in the second column

Without table header

Content from cell 1 | Content from cell 2
Content in the first column | Content in the second column

Content from cell 1 | Content from cell 2 Content in the first column | Content in the second column

Table alignment

| Syntax      | Description | Test Text     |
| :---        |    :----:   |          ---: |
| Header      | Title       | Here's this   |
| Paragraph   | Text        | And more      |

This actually works but the typograph cancelled out this effect. You can inspect the HTML of this section too see the effect.

Automatic linking for URLS

http://www.github.com/

http://www.github.com/

Adding titles (that display on hover) to links

My favorite search engine is [Duck Duck Go](https://duckduckgo.com "The best search engine for privacy").

My favorite search engine is Duck Duck Go.

Conclusion

In the midst of testing which Markdown gets transpiled, I stumble upon this code:

// In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-transformer-remark`, 
    options: {
      // CommonMark mode (default: true)
      commonmark: true,
      // Footnotes mode (default: true)
      footnotes: true,
      // Pedantic mode (default: true)
      pedantic: true,
      // GitHub Flavored Markdown mode (default: true)
      gfm: true,
      // Plugins configs
      plugins: [],
    },
  },
],

Turns out remark is able to transpile the above markdowns. The documentation was in the README usage code. 🤦‍♀️

I’m sure I’ll write a lot more interesting things in the future.