First step to Mark Down

Mark Down !

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

Examples

Text

It's very easy to make some words **bold** and other words *italic* with Markdown. You can even [link to Google!](http://google.com)
It’s very easy to make some words bold and other words italic with Markdown. You can even link to Google!

Lists

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

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

Images

If you want to embed images, this is how you do it:

![Image of Yaktocat](https://octodex.github.com/images/yaktocat.png)

If you want to embed images, this is how you do it:

Image of Yakotocat

Headers & Quotes

# 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

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

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:

    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:

```javascript
if (isAwesome){
  return true
}
```

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
}
  • Extras
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:

- [x] 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! :sparkles: :camel: :boom:

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! :sparkles: :camel: :boom:

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'})
  }
}
```

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! :sparkles: :camel: :boom:

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

Markdown Extra

Tables

The following markdown:

| Item      | Value | Qty |
| --------- | -----:|:--: |
| Computer  | $1600 | 5   |
| Phone     |   $12 | 12  |
| Pipe      |    $1 |234  |

will render to something like this depending on how you choose to style it:

Item Value Qty
Computer $1600 5
Phone $12 12
Pipe $1 234

You can also specify a class for the generated tables using Markdown.Extra.init(converter, {table_class: "table table-striped"}) for instance.

Span-level markdown inside of table cells will also be converted.

Fenced Code Blocks

Fenced code blocks are supported à la GitHub. This markdown:

```
var x = 2;
```

Will be transformed into:

<pre>
    <code>var x = 2;</code>
</pre>

You can specify a syntax highlighter in the options object passed to Markdown.Extra.init, in order to generated html compatible with either google-code-prettify or Highlight.js:

// highlighter can be either `prettify` or `highlight`
Markdown.Extra.init(converter, {highlighter: "prettify"});

If either of those is specified, the language type will be added to the code tag, e.g. <code class="language-javascript">, otherwise you just get the standard <code class="javascript"> as in PHP Markdown Extra. If prettify is specified, <pre>also becomes <pre class="prettyprint">. Otherwise, the markup is the same as what Pagedown produces for regular indented code blocks. For example, when using {highlighter: "prettify"} as shown above, this:

```javascript
var x = 2;
```

Would generate the following html:

<pre class="prettyprint">
    <code class="language-javascript">var x = 2;</code>
</pre>

Definition Lists

Term 1
:   Definition 1

Term 2
:   This definition has a code block.

        code block

becomes:

<dl>
  <dt>Term 1</dt>
  <dd>
    Definition 1
  </dd>
  <dt>Term 2</dt>
  <dd>
    This definition has a code block.
    <pre><code>code block</code></pre>
  </dd>
</dl>

Definitions can contain both inline and block-level markdown.

Footnotes

Here is a footnote[^footnote].

  [^footnote]: Here is the *text* of the **footnote**.

becomes:

<p>Here is a footnote<a href="#fn:footnote" id="fnref:footnote" title="See footnote" class="footnote">1</a>.</p>

<div class="footnotes">
<hr>
<ol>
<li id="fn:footnote">Here is the <em>text</em> of the <strong>footnote</strong>. <a href="#fnref:footnote" title="Return to article" class="reversefootnote">↩</a></li>
</ol>
</div>

Special Attributes

You can add class and id attributes to headers and gfm fenced code blocks.

``` {#gfm-id .gfm-class}
var foo = bar;
```

## A Header {#header-id}

### Another One ### {#header-id .hclass}

Underlined  {#what}
==========

SmartyPants

SmartyPants extension converts ASCII punctuation characters into “smart” typographic punctuation HTML entities. For example:

ASCII HTML
Single backticks 'Isn't this fun?' ‘Isn’t this fun?’
Quotes "Isn't this fun?" “Isn’t this fun?”
Dashes This -- is an en-dash and this --- is an em-dash This – is an en-dash and this — is an em-dash

Newlines

Newlines à la GitHub (without the need of two white spaces):

Roses are red
Violets are blue

becomes:

<p>Roses are red <br>
Violets are blue</p>

Strikethrough

Strikethrough à la GitHub:

~~Mistaken text.~~

becomes:

<p><del>Mistaken text.</del></p>

Extension / Option Reference

You can enable all of the currently supported extensions with {extensions: "all"}. This is also the default. If specifying multiple extensions, you must provide them as an array. Here is a list of the current and planned options and extensions. I’ve chosen to use the same naming scheme as the excellent Python Markdown library.

Extension Description
fenced_code_gfm GFM fenced code blocks
tables Pretty tables!
def_list Definition lists
attr_list Special attributes list for headers and fenced code blocks
footnotes Footnotes
smartypants SmartyPants
newlines GFM newlines
strikethrough GFM strikethrough
smart_strong No strong emphasis in the middle of words
abbr Abbreviations
fenced_code PHP Markdown Extra fenced code blocks
Option Description
table_class Class added to all markdown tables. Useful when using frameworks like bootstrap.
highlighter Code highlighter. Must be one of highlight and prettify for now

Italicized extensions are planned, and will be added in roughly the order shown

See PHP Markdown Extra’s documentation for a more complete overview of syntax. In situations where it differs from how things are done on GitHub — alignment of table headers, for instance — I’ve chosen compatibility with gfm, which seems to be quickly becoming the most widely used markdown implementation.

Special Characters

Markdown Extra adds two new special characters, | and :, that can be escaped by preceding them with \. Doing so will cause the escaped character to be ignored when determining the extent of code blocks and definition lists.