<body>
<nav id="navbar">
<header>
<h1 class="articlename">Mastering</h1>
<h1 class="articlename">Markdown</h1>
</header>
<div class="navcont">
<a class="nav-link" href="#introduction">Introduction</a>
<a class="nav-link" href="#what_is_markdown">What is Markdown</a>
<a class="nav-link" href="#examples">Examples</a>
<a class="nav-link" href="#basic_syntax">Basic Syntax</a>
<a class="nav-link" href="#github_flavored_markdown">GitHub Flavored Markdown</a>
</div>
</nav>
<main id="main-doc">
<section id="introduction" class="main-section">
<header>
<h2>Introduction</h2>
</header>
<hr>
<p>Markdown is a lightweight and easy-to-use syntax for styling all forms of writing on the GitHub platform.</p>
<h3>What you will learn:</h3>
<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>
</section>
<section id="what_is_markdown" class="main-section">
<header>
<h2>What is Markdown</h2>
</header>
<hr>
<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 class="pcode">#</code> or <code class="pcode">*</code>.</p>
<p>You can use Markdown most places around GitHub:</p>
<ul>
<li><a href="https://gist.github.com/" target="_blank">Gists</a></li>
<li>Comments in Issues and Pull Requests</li>
<li>Files with the <code class="pcode">.md</code> or <code class="pcode">/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 <span>GitHub Help.</span></p>
</section>
<section id="examples" class="main-section">
<header>
<h2>Examples</h2>
</header>
<hr>
<div class="tabs">
<input type="radio" name="tabs" id="text" checked="checked">
<label for="text">Text</label>
<div class="tab">
<div class="stdStyle">
<code>It's very easy to make some words **bold** and other words *italic* with Markdown. You can even [link to Google!](http://google.com)</code>
</div>
<div class="lowerStyle">
<p>It's very easy to make some words <b>bold</b> and other words <i>italic</i> with Markdown. You can even <a href="https://google.com" target="_blank">link to Google!</a></p>
</div>
</div>
<input type="radio" name="tabs" id="lists">
<label for="lists">Lists</label>
<div class="tab">
<div class="stdStyle">
<code>Sometimes you want numbered lists:</code>
<p><code>1. One
2. Two
3. Three</code></p>
<p><code>Sometimes you want bullet points:</code></p>
<p><code>* Start a line with a star
* Profit!</code></p>
<p><code>Alternatively,</code></p>
<p><code>- Dashes work just as well
- And if you have sub points, put two spaces before the dash or star:</code></p>
<code><span class="twoSpaces">- Like this</span></code>
<code><span class="twoSpaces">- And this</span></code>
</div>
<div class="lowerStyle">
<p>Sometimes you want numbered lists:</p>
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ol>
<p>Sometimes you want bullet points:</p>
<ul>
<li> Start a line with a star</li>
<li> Profit!</li>
</ul>
<p>Alternatively,</p>
<ul>
<li>Dashes work just as well</li>
<li>And if you have sub points, put spaces before the dash or star:
<ul>
<li>Like this</li>
<li>And this</li>
</ul>
</li>
</ul>
</div>
</div>
<input type="radio" name="tabs" id="images">
<label for="images">Images</label>
<div class="tab">
<div class="stdStyle">
<code>If you want to embed images, this is how you do it: </code>
<code></code>
</div>
<div class="lowerStyle">
<p>If you want to embed images, this is how you do it:</p>
<img src="https://octodex.github.com/images/yaktocat.png" alt="yaktocat">
</div>
</div>
<input type="radio" name="tabs" id="headers_quotes">
<label for="headers_quotes">Headers & Quotes</label>
<div class="tab">
<div class="stdStyle">
<p><code># Structured documents</code></p>
<p><code>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.</code></p>
<p><code>### This is a third-tier heading</code></p>
<p><code>You can use one `#` all the way up to `######` six for different heading sizes.</code></p>
<p><code>If you'd like to quote someone, use the > character before the line:</code></p>
<code>> Coffee. The finest organic suspension ever devised... I beat the Borg with it.
> - Captain Janeway</code>
</div>
<div class="lowerStyle">
<h1>Structured documents</h1>
<hr>
<p>Sometimes it’s useful to have different levels of headings to structure your documents. Start lines with a <code class="pcode">#</code> to create headings. Multiple <code class="pcode">##</code> in a row denote smaller heading sizes.</p>
<h3>This is a third-tier heading</h3>
<p>You can use one <code class="pcode">#</code> all the way up to <code class="pcode">######</code> six for different heading sizes.</p>
<p>If you’d like to quote someone, use the > character before the line:</p>
<p class="quote"> Coffee. The finest organic suspension ever devised... I beat the Borg with it.</p>
<p class="quote"> - Captain Janeway</p>
</div>
</div>
<input type="radio" name="tabs" id="code">
<label for="code">Code</label>
<div class="tab">
<div class="stdStyle">
<code>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:</code>
<p>
<code><span class="fourSpaces">if (isAwesome){</span>
<span class="fourSpaces"><span class="twoSpaces">return true</span></span>
<span class="fourSpaces">}</span>
</code>
</p>
<code>GitHub also supports something called code fencing, which allows for multiple lines without indentation:</code>
<p><code>
```
if (isAwesome){
<span class="twoSpaces">return true</span>
}
```
</code></p>
<code>And if you'd like to use syntax highlighting, include the language:</code>
<code>
```javascript
if (isAwesome){
<span class="twoSpaces">return true</span>
}
```</code>
</div>
<div class="lowerStyle">
<p>There are many different ways to style code with GitHub’s markdown. If you have inline code blocks, wrap them in backticks: <code class="pcode">var example = true</code>. If you’ve got a longer block of code, you can indent with four spaces:</p>
<div class="stdStyle">
<code>if (isAwesome){
<span class="twoSpaces">return true</span>
}</code>
</div>
<p>GitHub also supports something called code fencing, which allows for multiple lines without indentation:</p>
<div class="stdStyle">
<code>if (isAwesome){
<span class="twoSpaces">return true</span>
}</code>
</div>
<p>And if you’d like to use syntax highlighting, include the language:</p>
<div class="stdStyle">
<code><span class="colorhere">if</span> (isAwesome){
<span class="twoSpaces colorhere">return true</span>
}</code>
</div>
</div>
</div>
<input type="radio" name="tabs" id="extras">
<label for="extras">Extras</label>
<div class="tab">
<div class="stdStyle">
<p><code>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!</code></p>
<p><code>But I have to admit, tasks lists are my favorite:</code></p>
<p><code>- [x] This is a complete item - [ ] This is an incomplete item</code></p>
<p><code>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!</code></p>
<code>And, of course emoji!</code>
</div>
<div class="lowerStyle">
<p>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 <a href="https://github.com/kneath" title="to kneath">@kneath</a> — love your sweater!</p>
<p>But I have to admit, tasks lists are my favorite:</p>
<p><span class="fourSpaces">☑This is a complete item</span></p>
<p><span class="fourSpaces">☐This is an incomplete item</span></p>
</div>
</div>
</div>
</section>
<section id="basic_syntax" class="main-section">
<header>
<h2>Basic Syntax</h2>
</header>
<hr>
<p>Here’s an overview of Markdown syntax that you can use anywhere on GitHub.com or in your own text files.</p>
<h3>Headers</h3>
<div class="stdStyle">
<code># This is an <h1> tag
## This is an <h2> tag
###### This is an <h6> tag
</code>
</div>
<h3>Emphasis</h3>
<div class="stdStyle">
<code>*This text will be italic*
_This will also be italic_
**This text will be bold**
__This will also be bold__
_You **can** combine them_
</code>
</div>
<h3>Lists</h3>
<h4>Unordered</h4>
<div class="stdStyle">
<code>* Item 1
* Item 2
<span class="twoSpaces">* Item 2a</span>
<span class="twoSpaces">* Item 2b</span></code>
</div>
<h4>Ordered</h4>
<div class="stdStyle">
<code>1. Item 1
2. Item 2
3. Item 3
<span class="threeSpaces">1. Item 3a</span>
<span class="threeSpaces">1. Item 3b</span></code>
</div>
<h4>Images</h4>
<div class="stdStyle">
<code>
Format: </code>
</div>
<h4>Links</h4>
<div class="stdStyle">
<code>http://github.com - automatic!
[GitHub](http://github.com)</code>
</div>
<h4>Blockquotes</h4>
<div class="stdStyle">
<code>As Kanye West said:
> We're living the future so
> the present is our past.</code>
</div>
<h4>Inline Code</h4>
<div class="stdStyle">
<code>I think you should use an
`<addr>` element here instead.</code>
</div>
</section>
<section id="github_flavored_markdown" class="main-section">
<header>
<h2>GitHub Flavored Markdown</h2>
</header>
<hr>
<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>
<h3>Syntax Highlighting</h3>
<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>
<div class="stdStyle">
<code>```javascript
function fancyAlert(arg) {
<span class="twoSpaces">if(arg) {</span>
<span class="fourSpaces">$.facebox({div:'#foo'})</span>
<span class="twoSpaces">}</span>
}
```</code>
</div>
<p>You can also simply indent your code by four spaces:</p>
<div class="stdStyle addtional_indent">
<code>function fancyAlert(arg) {
<span class="twoSpaces">if(arg) {</span>
<span class="fourSpaces">$.facebox({div:'#foo'})</span>
<span class="twoSpaces">}</span>
}</code>
</div>
<p>Here’s an example of Python code without syntax highlighting:</p>
<div class="stdStyle">
<code>def foo():
<span class="fourSpaces">if not bar:</span>
<span class="fourSpaces"><span class="fourSpaces">return True</span></span></code>
</div>
<h3>Task Lists</h3>
<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>
<div class="stdStyle">
<code>- [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</code>
</div>
<h3>Tables</h3>
<p>You can create tables by assembling a list of words and dividing them with hyphens <code class="pcode">-</code> (for the first row), and then separating each column with a pipe <code class="pcode">|</code>:</p>
<div class="stdStyle">
<code>First Header | Second Header
------------ | -------------
Content from cell 1 | Content from cell 2
Content in the first column | Content in the second column</code>
</div>
<table>
<caption>Would become:</caption>
<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>Content in the second column</td>
</tr>
</table>
<h3>SHA references</h3>
<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>
<div class="stdStyle">
<!-- this does not wrap inside the container for RWD-->
<code>16c999e8c71134401a78d4d46435517b2271d6ac
mojombo@16c999e8c71134401a78d4d46435517b2271d6ac
mojombo/github-flavored-markdown@16c999e8c71134401a78d4d46435517b2271d6ac</code>
</div>
<h3>Issue references within a repository</h3>
<p>Any number that refers to an Issue or Pull Request will be automatically converted into a link.</p>
<div class="stdStyle">
<code>#1
mojombo#1
mojombo/github-flavored-markdown#1</code>
</div>
<h3>Username @mentions</h3>
<p>Typing an <code class="pcode">@</code> symbol, followed by a username, will notify that person to come and view the comment. This is called an “@mention”, because you’re <span class="italic">mentioning</span> the individual. You can also @mention teams within an organization.</p>
<h3>Automatic linking for URLs</h3>
<p>Any URL (like <code class="pcode">http://www.github.com/</code> ) will be automatically converted into a clickable link.</p>
<h3>Strikethrough</h3>
<p>Any word wrapped with two tildes (like <code class="pcode">~~this~~</code> ) will appear crossed out.</p>
<h3>Emoji</h3>
<p>GitHub supports <a href="https://help.github.com/articles/basic-writing-and-formatting-syntax/#using-emoji" target="_blank">emoji</a>!</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>
<h3>Attribution</h3>
<p><a href="https://guides.github.com/" target="_blank">GitHub Guides</a><span> - </span><a href="https://guides.github.com/features/mastering-markdown/" target="_blank">Mastering Markdown</a></p>
</section>
</main>
<footer>
<div class="footer">
<div class="pfcc">
A Project in the
<a href="https://www.freecodecamp.org/learn/responsive-web-design/#responsive-web-design-projects" target="_blank">
<img src="https://aws1.discourse-cdn.com/freecodecamp/original/3X/4/c/4c06248fcb7353707abcde9f10fc43a5fb6748db.svg" alt="freeCodeCamp" width="134" height="15" /></a><!-- width = 152, height = 17 originally-->
Responsive Web Design Course
</div>
</div>
</footer>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</body>
</html>
!
