GitHub Flavored Markdown Syntax Cheatsheet
- Published on
- Authors
- Name
- Terence Tian
- @hyperse_net
Introduction
Markdown and Mdx parsing is supported via unified
, and other remark and rehype packages. next-mdx-remote
allows us to parse .mdx
and .md
files in a more flexible manner without touching webpack.
GitHub flavored markdown is used. mdx-prism
provides syntax highlighting capabilities for code blocks. Here's a demo of how everything looks.
The following markdown cheatsheet is adapted from: https://guides.github.com/features/mastering-markdown/
What is Markdown?
Markdown is a lightweight markup language that allows you to style text on the web. It provides an easy way to control the appearance of your document, enabling you to format text as bold or italic, add images, create lists, and more. Essentially, Markdown is plain text enhanced with simple symbols like #
or *
to achieve various formatting effects.
Overview of Markdown Syntax
Markdown is a simple and versatile way to format text. You can use it on GitHub or in your own text files to create headers, lists, links, and more. Below is a quick guide to some of the most commonly used Markdown syntax:
Headers:
Use # to ###### for headers, from largest to smallest.
# This is a h1 tag
## This is a h2 tag
#### This is a h4 tag
This is a h1 tag
This is a h2 tag
This is a h4 tag
Emphasis
Use italic or italic for italic, and bold or bold for bold.
_This text will be italic_
**This text will be bold**
_You **can** combine them_
This text will be italic
This text will be bold
You can combine them
Lists
- Unordered: Start with -, *, or + for bullet points.
- Ordered: Start with 1., 2., 3. for numbered lists.
Unordered
- Item 1
- Item 2
- Item 2a
- Item 2b
- Item 1
- Item 2
- Item 2a
- Item 2b
Ordered
1. Item 1
2. Item 2
3. Item 3
1. Item 3a
2. Item 3b
- Item 1
- Item 2
- Item 3
- Item 3a
- Item 3b
Images
![Alt text](Image URL)
![GitHub Logo](https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png)
Links
http://github.com - automatic!
[GitHub](http://github.com)
http://github.com - automatic! GitHub
Blockquotes
As Kanye West said:
> We're living the future so
> the present is our past.
As Kanye West said:
We're living the future so the present is our past.
Inline code
I think you should use an
`<addr>` element here instead.
I think you should use an <addr>
element here instead.
Syntax highlighting
Here’s an example of how you can use syntax highlighting with GitHub Flavored Markdown:
```js:fancyAlert.js
function fancyAlert(arg) {
if (arg) {
$.facebox({ div: '#foo' })
}
}
```
And here's how it looks - nicely colored with styled code titles!
function fancyAlert(arg) {
if (arg) {
$.facebox({ div: '#foo' })
}
}
Footnotes
Here is a simple footnote[^1]. With some additional text after it.
[^1]: My reference.
Here is a simple footnote1. With some additional text after it.
Task Lists
- [x] list syntax required (any unordered or ordered list supported)
- [x] this is a complete item
- [ ] this is an incomplete item
- list syntax required (any unordered or ordered list supported)
- this is a complete item
- this is an incomplete item
Tables
You can create tables by assembling a list of words and dividing them with hyphens -
(for the first row), and then separating each column with a pipe |
:
| First Header | Second Header |
| --------------------------- | ---------------------------- |
| Content from cell 1 | Content from cell 2 |
| Content in the first column | Content in the second column |
First Header | Second Header |
---|---|
Content from cell 1 | Content from cell 2 |
Content in the first column | Content in the second column |
Strikethrough
Any word wrapped with two tildes (like ~~this~~
) will appear crossed out.
Footnotes
My reference. ↩