Example Markdown

01.09.2019 — Novel, Highlight — 1 min read

Here will a React component go:

Here will a live code example go:

Here will a normal code block go:

1(function() {
2
3var cache = {};
4var form = $('form');
5var minified = true;
6
7var dependencies = {};
8
9var treeURL = 'https://api.github.com/repos/PrismJS/prism/git/trees/gh-pages?recursive=1';
10var treePromise = new Promise(function(resolve) {
11    $u.xhr({
12        url: treeURL,
13        callback: function(xhr) {
14            if (xhr.status < 400) {
15                resolve(JSON.parse(xhr.responseText).tree);
16            }
17        }
18    });
19});

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

1/**
2 * Get value out of string (e.g. rem => px)
3 * If value is px strip the px part
4 * If the input is already a number only return that value
5 * @param {string | number} input
6 * @param {number} [rootFontSize]
7 * @return {number} Number without last three characters
8 * @example removeLastThree('6rem') => 6
9 */
10const getValue = (input, rootFontSize = 16) => {
11  if (typeof input === `number`) {
12    return input / rootFontSize;
13  }
14
15  const isPxValue = input.slice(-2) === `px`;
16
17  if (isPxValue) {
18    return parseFloat(input.slice(0, -2));
19  }
20
21  return parseFloat(input.slice(0, -3));
22};
23
24// This is a little helper function
25const helper = (a, b) => a + b;
26
27// This is also a little helper function but this time with a really long one-line comment that should show some more details
28const morehelper = (a, b) => a * b;
29
30export { getValue, helper, morehelper };

Normal block without language:

1import Test from "../components/test"
2
3const Layout = ({ children }) => (
4  <Test>
5    {children}
6  </Test>
7)
8
9export default Layout

Code block with code highlighting:

src/components/post.jsx

1import React from "react";
2
3const Post = ({ data: { post } }) => (
4  <Layout>
5    <Heading variant="h2" as="h2">
6      {post.title}
7    </Heading>
8    <p
9      sx={{
10        color: `secondary`,
11        mt: 3,
12        a: { color: `secondary` },
13        fontSize: [1, 1, 2],
14      }}
15    >
16      <span>{post.date}</span>
17      {post.tags && (
18        <React.Fragment>
19          {` — `}
20          <ItemTags tags={post.tags} />
21        </React.Fragment>
22      )}
23    </p>
24    <section
25      sx={{
26        ...CodeStyles,
27        my: 5,
28        ".gatsby-resp-image-wrapper": { my: 5, boxShadow: `lg` },
29      }}
30    >
31      <MDXRenderer>{post.body}</MDXRenderer>
32    </section>
33  </Layout>
34);
35
36export default Post;

Code block without title:

1Harry 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:

src/utils/scream.js

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

Code block with only the title but without lineNumbers:

src/utils/scream.js

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

Line highlighting without code title:

1const test = 3;
2const foo = "bar";
3const harry = "potter";
4const hermione = "granger";
5const ron = "weasley";

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

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

src/components/blog.tsx

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;

Number	Title	Year
1	Harry Potter and the Philosopher’s Stone	2001
2	Harry Potter and the Chamber of Secrets	2002
3	Harry Potter and the Prisoner of Azkaban	2004

View raw (TEST.md)

This is a paragraph.

1This is a paragraph.

Header 1

Header 2

1Header 1
2========
3
4Header 2
5--------

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

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

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

1# Header 1 #
2## Header 2 ##
3### Header 3 ###
4#### Header 4 ####
5##### Header 5 #####
6###### 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.

1> 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.
This is the first list item.
This is the second list item.
Here's some example code:
1Markdown.generate();

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

Red
Green
Blue

Red
Green
Blue

Red
Green
Blue

1- Red
2- Green
3- Blue
4
5* Red
6* Green
7* Blue
8
9- Red
10- Green
11- Blue

code goes here in this line
bold goes here

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

Buy flour and salt
Mix together with water
Bake

11. Buy flour and salt
21. Mix together with water
31. Bake

code goes here in this line
bold goes here

11. `code goes` here in this line
21. **bold** goes here

react-live

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

react-live

Paragraph:

1Code

1Paragraph:
2
3    Code

1* * *
2
3***
4
5*****
6
7- - -
8
9---------------------------------------

This is an example link.

This link has no title attr.

This is an example reference-style link.

1This is [an example](https://example.com "Example") link.
2
3[This link](https://example.com) has no title attr.
4
5This is [an example] [id] reference-style link.
6
7[id]: https://example.com "Optional Title"

single asterisks

single underscores

double asterisks

double underscores

1*single asterisks*
2
3_single underscores_
4
5**double asterisks**
6
7__double underscores__

This paragraph has some code in it.

1This paragraph has some `code` in it.

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