Skip to content

Instantly share code, notes, and snippets.

@fengmk2
Last active November 25, 2018 16:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save fengmk2/2b887d122f0f40a98360f7afc46a7cf4 to your computer and use it in GitHub Desktop.
Save fengmk2/2b887d122f0f40a98360f7afc46a7cf4 to your computer and use it in GitHub Desktop.
lake to markdown

Mastering Markdown

Markdown is a lightweight and easy-to-use syntax for styling all forms of writing on the GitHub platform.
What you will learn:

  • How the Markdown format makes styled collaborative editing easy
  • How Markdown differs from traditional formatting approaches
  • How to use Markdown to format text
  • How to leverage GitHub’s automatic Markdown rendering
  • How to apply GitHub’s unique Markdown extensions

What is Markdown?

Markdown is a way to style text on the web. You control the display of the document; formatting words as bold or italic, adding images, and creating lists are just a few of the things we can do with Markdown. Mostly, Markdown is just regular text with a few non-alphabetic characters thrown in, like # or *.
You can use Markdown most places around GitHub:

  • Gists
  • Comments in Issues and Pull Requests
  • Files with the .md or .markdown extension

For more information, see “Writing on GitHub” in the GitHub Help.

Examples

It's very easy to make some words bold and other words italic with Markdown. You can even link to Google!It's very easy to make some words bold and other words italic with Markdown. You can even link to Google!

Syntax guide

Here’s an overview of Markdown syntax that you can use anywhere on GitHub.com or in your own text files.

Headers

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

Emphasis

*This text will be italic*
_This will also be italic_
**This text will be bold**
__This will also be bold__
_You **can** combine them_

Lists

Unordered

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

Ordered

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

Images

![GitHub Logo](/images/logo.png)
Format: ![Alt Text](url)

Links

http://github.com - automatic!
[GitHub](http://github.com)

Blockquotes

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.

GitHub Flavored Markdown

GitHub.com uses its own version of the Markdown syntax that provides an additional set of useful features, many of which make it easier to work with content on GitHub.com.
Note that some features of GitHub Flavored Markdown are only available in the descriptions and comments of Issues and Pull Requests. These include @mentions as well as references to SHA-1 hashes, Issues, and Pull Requests. Task Lists are also available in Gist comments and in Gist Markdown files.

Syntax highlighting

Here’s an example of how you can use syntax highlighting with GitHub Flavored Markdown:

```javascript
function fancyAlert(arg) {
  if(arg) {
    $.facebox({div:'#foo'})
  }
}
```ma

You can also simply indent your code by four spaces:

function fancyAlert(arg) {
      if(arg) {
        $.facebox({div:'#foo'})
      }
    }

Here’s an example of Python code without syntax highlighting:

def foo():
    if not bar:
        return True

Task Lists

- [x] @mentions, #refs, [links](), **formatting**, and <del>tags</del> supported
- [x] list syntax required (any unordered or ordered list supported)
- [x] this is a complete item
- [ ] this is an incomplete item

If you include a task list in the first comment of an Issue, you will get a handy progress indicator in your issue list. It also works in Pull Requests!

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

Would become:

First Header Second Header
Content from cell 1 Content from cell 2
Content in the first column Content in the second column

SHA references

Any reference to a commit’s SHA-1 hash will be automatically converted into a link to that commit on GitHub.

16c999e8c71134401a78d4d46435517b2271d6ac
mojombo@16c999e8c71134401a78d4d46435517b2271d6ac
mojombo/github-flavored-markdown@16c999e8c71134401a78d4d46435517b2271d6ac

Issue references within a repository

Any number that refers to an Issue or Pull Request will be automatically converted into a link.

#1
mojombo#1
mojombo/github-flavored-markdown#1

Username @mentions

Typing an @ symbol, followed by a username, will notify that person to come and view the comment. This is called an “@mention”, because you’re _mentioning_the individual. You can also @mention teams within an organization.

Automatic linking for URLs

Any URL (like http://www.github.com/) will be automatically converted into a clickable link.

Strikethrough

Any word wrapped with two tildes (like ~~this~~) will appear crossed out.

Emoji

GitHub supports emoji!
To see a list of every image we support, check out the Emoji Cheat Sheet.

"<!doctype lake><h1>Mastering Markdown</h1><p><br /></p><p>Markdown is a lightweight and easy-to-use syntax for styling all forms of writing on the GitHub platform.</p><p><strong>What you will learn:</strong></p><ul><li>How the Markdown format makes styled collaborative editing easy</li><li>How Markdown differs from traditional formatting approaches</li><li>How to use Markdown to format text</li><li>How to leverage GitHub’s automatic Markdown rendering</li><li>How to apply GitHub’s unique Markdown extensions</li></ul><p><br /></p><h2>What is Markdown?</h2><p><br /></p><p><a href=\"http://daringfireball.net/projects/markdown/\" target=\"_blank\">Markdown</a> is a way to style text on the web. You control the display of the document; formatting words as bold or italic, adding images, and creating lists are just a few of the things we can do with Markdown. Mostly, Markdown is just regular text with a few non-alphabetic characters thrown in, like <code>#</code> or <code>*</code>.</p><p>You can use Markdown most places around GitHub:</p><ul><li><cursor /><a href=\"https://gist.github.com/\" target=\"_blank\">Gists</a></li><li>Comments in Issues and Pull Requests</li><li>Files with the <code>.md</code> or <code>.markdown</code> extension</li></ul><p>For more information, see “<a href=\"https://help.github.com/categories/writing-on-github/\" target=\"_blank\">Writing on GitHub</a>” in the <em>GitHub Help</em>.</p><p><br /></p><h2>Examples</h2><p><br /></p><pre>It's very easy to make some words **bold** and other words *italic* with Markdown. You can even [link to Google!](http://google.com)</pre><p>It's very easy to make some words <strong>bold</strong> and other words <em>italic</em> with Markdown. You can even <a href=\"http://google.com/\" target=\"_blank\">link to Google!</a></p><p><br /></p><h2>Syntax guide</h2><p><br /></p><p>Here’s an overview of Markdown syntax that you can use anywhere on GitHub.com or in your own text files.</p><p><br /></p><h3>Headers</h3><p><br /></p><card type=\"block\" name=\"codeblock\" value=\"{&quot;mode&quot;:&quot;plain&quot;,&quot;code&quot;:&quot;# This is an &lt;h1&gt; tag\\n## This is an &lt;h2&gt; tag\\n###### This is an &lt;h6&gt; tag&quot;}\"></card><p><br /></p><h3>Emphasis</h3><p><br /></p><card type=\"block\" name=\"codeblock\" value=\"{&quot;mode&quot;:&quot;plain&quot;,&quot;code&quot;:&quot;*This text will be italic*\\n_This will also be italic_\\n**This text will be bold**\\n__This will also be bold__\\n_You **can** combine them_&quot;}\"></card><p><br /></p><h3>Lists</h3><p><br /></p><h4>Unordered</h4><p><br /></p><card type=\"block\" name=\"codeblock\" value=\"{&quot;mode&quot;:&quot;plain&quot;,&quot;code&quot;:&quot;* Item 1\\n* Item 2\\n * Item 2a\\n * Item 2b&quot;}\"></card><p><br /></p><h4>Ordered</h4><p><br /></p><card type=\"block\" name=\"codeblock\" value=\"{&quot;mode&quot;:&quot;plain&quot;,&quot;code&quot;:&quot;1. Item 1\\n1. Item 2\\n1. Item 3\\n 1. Item 3a\\n 1. Item 3b&quot;}\"></card><p><br /></p><h3>Images</h3><p><br /></p><card type=\"block\" name=\"codeblock\" value=\"{&quot;mode&quot;:&quot;plain&quot;,&quot;code&quot;:&quot;![GitHub Logo](/images/logo.png)\\nFormat: ![Alt Text](url)&quot;}\"></card><p><br /></p><h3>Links</h3><p><br /></p><card type=\"block\" name=\"codeblock\" value=\"{&quot;mode&quot;:&quot;plain&quot;,&quot;code&quot;:&quot;http://github.com - automatic!\\n[GitHub](http://github.com)&quot;}\"></card><p><br /></p><h3>Blockquotes</h3><p><br /></p><card type=\"block\" name=\"codeblock\" value=\"{&quot;mode&quot;:&quot;plain&quot;,&quot;code&quot;:&quot;As Kanye West said:\\n&gt; We're living the future so\\n&gt; the present is our past.&quot;}\"></card><p><br /></p><h3>Inline code</h3><p><br /></p><card type=\"block\" name=\"codeblock\" value=\"{&quot;mode&quot;:&quot;plain&quot;,&quot;code&quot;:&quot;I think you should use an\\n`&lt;addr&gt;` element here instead.&quot;}\"></card><p><br /></p><h2>GitHub Flavored Markdown</h2><p><br /></p><p>GitHub.com uses its own version of the Markdown syntax that provides an additional set of useful features, many of which make it easier to work with content on GitHub.com.</p><p>Note that some features of GitHub Flavored Markdown are only available in the descriptions and comments of Issues and Pull Requests. These include @mentions as well as references to SHA-1 hashes, Issues, and Pull Requests. Task Lists are also available in Gist comments and in Gist Markdown files.</p><p><br /></p><h3>Syntax highlighting</h3><p><br /></p><p>Here’s an example of how you can use syntax highlighting with <a href=\"https://help.github.com/articles/basic-writing-and-formatting-syntax/\" target=\"_blank\">GitHub Flavored Markdown</a>:</p><p><br /></p><card type=\"block\" name=\"codeblock\" value=\"{&quot;mode&quot;:&quot;markdown&quot;,&quot;code&quot;:&quot;```javascript\\nfunction fancyAlert(arg) {\\n if(arg) {\\n $.facebox({div:'#foo'})\\n }\\n}\\n```ma&quot;}\"></card><p><br /></p><p>You can also simply indent your code by four spaces:</p><p><br /></p><card type=\"block\" name=\"codeblock\" value=\"{&quot;mode&quot;:&quot;javascript&quot;,&quot;code&quot;:&quot;function fancyAlert(arg) {\\n if(arg) {\\n $.facebox({div:'#foo'})\\n }\\n }&quot;}\"></card><p><br /></p><p>Here’s an example of Python code without syntax highlighting:</p><p><br /></p><card type=\"block\" name=\"codeblock\" value=\"{&quot;mode&quot;:&quot;python&quot;,&quot;code&quot;:&quot;def foo():\\n if not bar:\\n return True&quot;}\"></card><p><br /></p><h3>Task Lists</h3><p><br /></p><card type=\"block\" name=\"codeblock\" value=\"{&quot;mode&quot;:&quot;markdown&quot;,&quot;code&quot;:&quot;- [x] @mentions, #refs, [links](), **formatting**, and &lt;del&gt;tags&lt;/del&gt; supported\\n- [x] list syntax required (any unordered or ordered list supported)\\n- [x] this is a complete item\\n- [ ] this is an incomplete item&quot;}\"></card><p><br /></p><p>If you include a task list in the first comment of an Issue, you will get a handy progress indicator in your issue list. It also works in Pull Requests!</p><p><br /></p><h3>Tables</h3><p><br /></p><p>You can create tables by assembling a list of words and dividing them with hyphens <code>-</code> (for the first row), and then separating each column with a pipe <code>|</code>:</p><p><br /></p><card type=\"block\" name=\"codeblock\" value=\"{&quot;mode&quot;:&quot;markdown&quot;,&quot;code&quot;:&quot;First Header | Second Header\\n------------ | -------------\\nContent from cell 1 | Content from cell 2\\nContent in the first column | Content in the second column&quot;}\"></card><p><br /></p><p>Would become:</p><p><br /></p><table class=\"lake-table\"><tr><th>First Header</th><th>Second Header</th></tr><tr><td>Content from cell 1</td><td>Content from cell 2</td></tr><tr><td>Content in the first column</td><td><p>Content in the second column</p></td></tr></table><p><br /></p><h3>SHA references</h3><p><br /></p><p>Any reference to a commit’s <a href=\"http://en.wikipedia.org/wiki/SHA-1\" target=\"_blank\">SHA-1 hash</a> will be automatically converted into a link to that commit on GitHub.</p><p><br /></p><card type=\"block\" name=\"codeblock\" value=\"{&quot;mode&quot;:&quot;plain&quot;,&quot;code&quot;:&quot;16c999e8c71134401a78d4d46435517b2271d6ac\\nmojombo@16c999e8c71134401a78d4d46435517b2271d6ac\\nmojombo/github-flavored-markdown@16c999e8c71134401a78d4d46435517b2271d6ac&quot;}\"></card><p><br /></p><h3>Issue references within a repository</h3><p><br /></p><p>Any number that refers to an Issue or Pull Request will be automatically converted into a link.</p><p><br /></p><card type=\"block\" name=\"codeblock\" value=\"{&quot;mode&quot;:&quot;plain&quot;,&quot;code&quot;:&quot;#1\\nmojombo#1\\nmojombo/github-flavored-markdown#1&quot;}\"></card><p><br /></p><h3>Username @mentions</h3><p><br /></p><p>Typing an <code>@</code> symbol, followed by a username, will notify that person to come and view the comment. This is called an “@mention”, because you’re <em>mentioning</em>the individual. You can also @mention teams within an organization.</p><p><br /></p><h3>Automatic linking for URLs</h3><p><br /></p><p>Any URL (like <code>http://www.github.com/</code>) will be automatically converted into a clickable link.</p><p><br /></p><h3>Strikethrough</h3><p><br /></p><p>Any word wrapped with two tildes (like <code>~~this~~</code>) will appear crossed out.</p><p><br /></p><h3>Emoji</h3><p><br /></p><p>GitHub supports <a href=\"https://help.github.com/articles/basic-writing-and-formatting-syntax/#using-emoji\" target=\"_blank\">emoji</a>!<card type=\"inline\" name=\"image\" value=\"{&quot;src&quot;:&quot;https://assets-cdn.github.com/images/icons/emoji/unicode/2728.png&quot;,&quot;display&quot;:&quot;inline&quot;,&quot;align&quot;:&quot;left&quot;,&quot;width&quot;:20,&quot;height&quot;:20}\"></card><card type=\"inline\" name=\"image\" value=\"{&quot;src&quot;:&quot;https://assets-cdn.github.com/images/icons/emoji/unicode/1f42b.png&quot;,&quot;display&quot;:&quot;inline&quot;,&quot;align&quot;:&quot;left&quot;,&quot;width&quot;:20,&quot;height&quot;:20}\"></card><card type=\"inline\" name=\"image\" value=\"{&quot;src&quot;:&quot;https://assets-cdn.github.com/images/icons/emoji/unicode/1f4a5.png&quot;,&quot;display&quot;:&quot;inline&quot;,&quot;align&quot;:&quot;left&quot;,&quot;width&quot;:20,&quot;height&quot;:20}\"></card></p><p>To see a list of every image we support, check out the <a href=\"https://github.com/ikatyang/emoji-cheat-sheet/blob/master/README.md\" target=\"_blank\">Emoji Cheat Sheet</a>.</p>"
@fengmk2
Copy link
Author

fengmk2 commented Nov 14, 2018

@fengmk2
Copy link
Author

fengmk2 commented Nov 20, 2018

@fengmk2
Copy link
Author

fengmk2 commented Nov 20, 2018

p1 line1
line2

p2 line1

@fengmk2
Copy link
Author

fengmk2 commented Nov 20, 2018

Mastering Markdown

Markdown is a lightweight.
What you will learn:

  • 1
  • 2

What?

@fengmk2
Copy link
Author

fengmk2 commented Nov 20, 2018

Mastering Markdown

Markdown is a lightweight and easy-to-use syntax for styling all forms of writing on the GitHub platform.
What you will learn:

  • How the Markdown format makes styled collaborative editing easy
  • How Markdown differs from traditional formatting approaches
  • How to use Markdown to format text
  • How to leverage GitHub’s automatic Markdown rendering
  • How to apply GitHub’s unique Markdown extensions

What is Markdown?

Markdown is a way to style text on the web.

@fengmk2
Copy link
Author

fengmk2 commented Nov 22, 2018

@fengmk2
Copy link
Author

fengmk2 commented Nov 22, 2018

@fengmk2
Copy link
Author

fengmk2 commented Nov 22, 2018

Blockquotes

line 1
dd
2
3

ddd

awdd

bcd

ddd

end

@fengmk2
Copy link
Author

fengmk2 commented Nov 22, 2018

  • 1
  • 2

aaa

@fengmk2
Copy link
Author

fengmk2 commented Nov 22, 2018

As Kanye West said:

We're living the future so
the present is our past.

@fengmk2
Copy link
Author

fengmk2 commented Nov 22, 2018

As Kanye West said:

We're living the future so
the present is our past.

@fengmk2
Copy link
Author

fengmk2 commented Nov 25, 2018

First Header Second Header
th line 2
Content from cell 1222 Content from cell 2
line 2
Content in the first column Content in the second column

image

@fengmk2
Copy link
Author

fengmk2 commented Nov 25, 2018

First Header Second Header
th line 2
Content from cell 1222 Content from cell 2
line 2
Content in the first column Content in the second column
* 111
* 222
* 233
* 3333
* 444

@fengmk2
Copy link
Author

fengmk2 commented Nov 25, 2018

First Header Second Header
th line 2
Content from cell 1222 Content from cell 2
line 2
Content in the first column Content in the second column
* 111
* 222
* 233
* 333
* 444

@fengmk2
Copy link
Author

fengmk2 commented Nov 25, 2018

First Header Second Header
th line 2
Content from cell 1222 Content from cell 2
line 2
Content in the first column Content in the second column
First Header Second Header
th line 2
Content from cell 1222 Content from cell 2
line 2
Content in the first column Content in the second column
* 111
* 222
* 233
* 333
* 444

@fengmk2
Copy link
Author

fengmk2 commented Nov 25, 2018

image 1 image 2

@fengmk2
Copy link
Author

fengmk2 commented Nov 25, 2018

GitHub supports many extras in Markdown that help you reference and link to people. If you ever want to direct a comment at someone, you can prefix their name with an @ symbol: Hey @kneath — love your sweater!

But I have to admit, tasks lists are my favorite:

  • This is a complete item
  • This is an incomplete item

When you include a task list in the first comment of an Issue, you will see a helpful progress bar in your list of issues. It works in Pull Requests, too!

And, of course emoji!

@fengmk2
Copy link
Author

fengmk2 commented Nov 25, 2018

There are many different ways to style code with GitHub’s markdown. If you have inline code blocks, wrap them in backticks: var example = true. If you’ve got a longer block of code, you can indent with four spaces:

if (isAwesome){
  return true
}

GitHub also supports something called code fencing, which allows for multiple lines without indentation:

if (isAwesome){
  return true
}

And if you’d like to use syntax highlighting, include the language:

if (isAwesome){
  return true
}

@fengmk2
Copy link
Author

fengmk2 commented Nov 25, 2018

Structured documents

Sometimes it’s useful to have different levels of headings to structure your documents. Start lines with a # to create headings. Multiple ## in a row denote smaller heading sizes.

This is a third-tier heading

You can use one # all the way up to ###### six for different heading sizes.
If you’d like to quote someone, use the > character before the line:

Coffee. The finest organic suspension ever devised… I beat the Borg with it. - Captain Janeway

@fengmk2
Copy link
Author

fengmk2 commented Nov 25, 2018

Sometimes you want numbered lists:

  1. One
  2. Two
  3. Three

Sometimes you want bullet points:

  • Start a line with a star
  • Profit!

Alternatively,

  • Dashes work just as well
  • And if you have sub points, put two spaces before the dash or star:
    • Like this
    • And this

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment