Some tests again, Pelican also supports markdown.

Here's cheatsheat:

View raw (TEST.md)

This is a paragraph.

This is a paragraph.

Header 1

Header 2

Header 1
========

Header 2
--------

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

# Header 1
## Header 2
### Header 3
#### Header 4
##### Header 5
###### Header 6

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

# Header 1 #
## Header 2 ##
### Header 3 ###
#### Header 4 ####
##### Header 5 #####
###### Header 6 ######

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

This is a header.

1. This is the first list item.
2. This is the second list item.

Here's some example code:

Markdown.generate();

> ## This is a header.
> 1. This is the first list item.
> 2. This is the second list item.
>
> Here's some example code:
>
>     Markdown.generate();

• Red
• Green
• Blue

• Red
• Green
• Blue

• Red
• Green
• Blue

- Red
- Green
- Blue

* Red
* Green
* Blue

- Red
- Green
- Blue

• code goes here in this line
• bold goes here

- `code goes` here in this line
- **bold** goes here

1. Buy flour and salt
2. Mix together with water
3. Bake

1. Buy flour and salt
1. Mix together with water
1. Bake

1. code goes here in this line
2. bold goes here

1. `code goes` here in this line
1. **bold** goes here

Paragraph:

Code

Paragraph:

    Code

* * *

***

*****

- - -

---------------------------------------

This is an example link.

This link has no title attr.

This is an example reference-style link.

This is [an example](http://example.com "Example") link.

[This link](http://example.com) has no title attr.

This is [an example] [id] reference-style link.

[id]: http://example.com "Optional Title"

single asterisks

single underscores

double asterisks

double underscores

*single asterisks*

_single underscores_

**double asterisks**

__double underscores__

This paragraph has some code in it.

This paragraph has some `code` in it.

![Alt Text](https://placehold.it/200x50 "Image Title")

Here will a live code example go:

const onClick = () => {
  alert("You opened me");
};
render(<button onClick={onClick}>Alohomora!</button>);

Here will a normal code block go:

(function() {

var cache = {};
var form = $('form');
var minified = true;

var dependencies = {};

var treeURL = 'https://api.github.com/repos/PrismJS/prism/git/trees/gh-pages?recursive=1';
var treePromise = new Promise(function(resolve) {
    $u.xhr({
        url: treeURL,
        callback: function(xhr) {
            if (xhr.status < 400) {
                resolve(JSON.parse(xhr.responseText).tree);
            }
        }
    });
});

A code block with a JSDoc comment, short, and long comment:

/**
 * Get value out of string (e.g. rem => px)
 * If value is px strip the px part
 * If the input is already a number only return that value
 * @param {string | number} input
 * @param {number} [rootFontSize]
 * @return {number} Number without last three characters
 * @example removeLastThree('6rem') => 6
 */
const getValue = (input, rootFontSize = 16) => {
  if (typeof input === `number`) {
    return input / rootFontSize;
  }

  const isPxValue = input.slice(-2) === `px`;

  if (isPxValue) {
    return parseFloat(input.slice(0, -2));
  }

  return parseFloat(input.slice(0, -3));
};

// This is a little helper function
const helper = (a, b) => a + b;

// This is also a little helper function but this time with a really long one-line comment that should show some more details
const morehelper = (a, b) => a * b;

export { getValue, helper, morehelper };

Normal block without language:

import Test from "../components/test"

const Layout = ({ children }) => (
  <Test>
    {children}
  </Test>
)

export default Layout

Code block with code highlighting:

import React from "react";

const Post = ({ data: { post } }) => (
  <Layout>
    <Heading variant="h2" as="h2">
      {post.title}
    </Heading>
    <p
      sx={{
        color: `secondary`,
        mt: 3,
        a: { color: `secondary` },
        fontSize: [1, 1, 2],
      }}
    >
      <span>{post.date}</span>
      {post.tags && (
        <React.Fragment>
          {` — `}
          <ItemTags tags={post.tags} />
        </React.Fragment>
      )}
    </p>
    <section
      sx={{
        ...CodeStyles,
        my: 5,
        ".gatsby-resp-image-wrapper": { my: 5, boxShadow: `lg` },
      }}
    >
      <MDXRenderer>{post.body}</MDXRenderer>
    </section>
  </Layout>
);

export default Post;

Code block without title:

Harry Potter and the Philosopher's Stone

Code block without lineNumbers (but lang):

Harry Potter and the Chamber of Secrets

Code block without lineNumbers (and without lang):

Harry Potter and the Chamber of Secrets

Code block with only the title:

const scream = (input) => window.alert(input)

Code block with only the title but without lineNumbers:

const scream = (input) => window.alert(input)

Line highlighting without code title:

const test = 3;
const foo = "bar";
const harry = "potter";
const hermione = "granger";
const ron = "weasley";

Here will inline code go, just inside the text. Wow!

Code block without line numbers but with highlighting, language, and title:

import React from "react";

const Blog = ({ posts }: PostsProps) => {
  const { tagsPath, basePath } = useSiteMetadata();

  return (
    <Layout>
      <Flex sx={{ alignItems: `center`, justifyContent: `space-between` }}>
        <Heading variant="h2" as="h2">
          Blog
        </Heading>
        <Styled.a
          as={Link}
          sx={{ variant: `links.secondary` }}
          to={`/${basePath}/${tagsPath}`.replace(/\/\/+/g, `/`)}
        >
          View all tags
        </Styled.a>
      </Flex>
      <Listing posts={posts} sx={{ mt: [4, 5] }} />
    </Layout>
  );
};

export default Blog;