Markdown syntax guide

June 2, 2023

Header 1

This is header 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Header 2

This is header 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Header 3

This is header 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lists

Unordered List

the quick brown fox jumps over the lazy dog
- the quick brown fox jumps over the lazy dog
  - the quick brown fox jumps over the lazy dog

Ordered List

the quick brown fox jumps over the lazy dog
1. the quick brown fox jumps over the lazy dog
  1. the quick brown fox jumps over the lazy dog

Text Decoration

Bold

The quick brown fox jumps over the lazy dog.

Italic

The quick brown fox jumps over the lazy dog.

Bold and Italic

The quick brown fox jumps over the lazy dog.

Blockquote

The quick brown fox jumps over the lazy dog.

Strikethrough

~~The quick brown fox jumps over the lazy dog.~~

Code

Inline Code Block

This is an inline code block: The quick brown fox jumps over the lazy dog. It is very useful.

Fenced Code Block

{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}

hello.tsx

const rehypePrettyCode = require('rehype-pretty-code');
const fs = require('fs');
 
const options = {
  // Use one of Shiki's packaged themes
  theme: 'one-dark-pro',
  // Or your own JSON theme
  theme: JSON.parse(
    fs.readFileSync(require.resolve('./themes/dark.json'), 'utf-8')
  ),
 
  // Keep the background or use a custom background color?
  keepBackground: true,
 
  // Callback hooks to add custom logic to nodes when visiting
  // them.
  onVisitLine(node) {
    // Prevent lines from collapsing in `display: grid` mode, and
    // allow empty lines to be copy/pasted
    if (node.children.length === 0) {
      node.children = [{type: 'text', value: ' '}];
    }
  },
  onVisitHighlightedLine(node) {
    // Each line node by default has `class="line"`.
    node.properties.className.push('highlighted');
  },
  onVisitHighlightedWord(node) {
    // Each word node has no className by default.
    node.properties.className = ['word'];
  },
};
 
const withMDX = require('@next/mdx')({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [],
    rehypePlugins: [[rehypePrettyCode, options]],
  },
});