mojombo/github-flavored-markdown

GitHub Flavored Markdown Examples

mojombo opened this issue · 65 comments

GitHub Flavored Markdown

View the source of this content.

Let's get the whole "linebreak" thing out of the way. The next paragraph contains two phrases separated by a single newline character:

Roses are red
Violets are blue

The next paragraph has the same phrases, but now they are separated by two spaces and a newline character:

Roses are red
Violets are blue

Oh, and one thing I cannot stand is the mangling of words with multiple underscores in them like perform_complicated_task or do_this_and_do_that_and_another_thing.

A bit of the GitHub spice

In addition to the changes in the previous section, certain references are auto-linked:

These are dangerous goodies though, and we need to make sure email addresses don't get mangled:

My email addy is tom@github.com.

Math is hard, let's go shopping

In first grade I learned that 5 > 3 and 2 < 7. Maybe some arrows. 1 -> 2 -> 3. 9 <- 8 <- 7.

Triangles man! a^2 + b^2 = c^2

We all like making lists

The above header should be an H2 tag. Now, for a list of fruits:

  • Red Apples
  • Purple Grapes
  • Green Kiwifruits

Let's get crazy:

  1. This is a list item with two paragraphs. Lorem ipsum dolor
    sit amet, consectetuer adipiscing elit. Aliquam hendrerit
    mi posuere lectus.

Vestibulum enim wisi, viverra nec, fringilla in, laoreet
vitae, risus. Donec sit amet nisl. Aliquam semper ipsum
sit amet velit.
2. Suspendisse id sem consectetuer libero luctus adipiscing.

What about some code in a list? That's insane, right?

  1. In Ruby you can map like this:

    ['a', 'b'].map { |x| x.uppercase }
    
  2. In Rails, you can do a shortcut:

    ['a', 'b'].map(&:uppercase)
    

Some people seem to like definition lists

Lower cost
The new version of this product costs significantly less than the previous one!
Easier to use
We've changed the product so that it's much easier to use!

I am a robot

Maybe you want to print robot to the console 1000 times. Why not?

def robot_invasion
  puts("robot " * 1000)
end

You see, that was formatted as code because it's been indented by four spaces.

How about we throw some angle braces and ampersands in there?

<div class="footer">
    &copy; 2004 Foo Corporation
</div>

Set in stone

Preformatted blocks are useful for ASCII art:

             ,-. 
    ,     ,-.   ,-. 
   / \   (   )-(   ) 
   \ |  ,.>-(   )-< 
    \|,' (   )-(   ) 
     Y ___`-'   `-' 
     |/__/   `-' 
     | 
     | 
     |    -hrr- 
  ___|_____________ 

Playing the blame game

If you need to blame someone, the best way to do so is by quoting them:

I, at any rate, am convinced that He does not throw dice.

Or perhaps someone a little less eloquent:

I wish you'd have given me this written question ahead of time so I
could plan for it... I'm sure something will pop into my head here in
the midst of this press conference, with all the pressure of trying to
come up with answer, but it hadn't yet...

I don't want to sound like
I have made no mistakes. I'm confident I have. I just haven't - you
just put me under the spot here, and maybe I'm not as quick on my feet
as I should be in coming up with one.

Table for two

IDNameRank
1Tom Preston-WernerAwesome
2Albert EinsteinNearly as awesome

Crazy linking action

I get 10 times more traffic from Google than from
Yahoo or MSN.

Also, shoop.

I want this in php!!!

Easy enough. Here's the Ruby code that we use. It should be simple to port to PHP.

http://gist.github.com/118964

Looks like the arrows/math example doesn't work.

Oh, therefore HTML (a subset?) seems to be supported in comments ;-)

Sorry my fault, I wasn't aware that Markdown also supports regular HTML tags.
Anyway, the a^2 and arrow -> syntax mentioned in the example doesn't seem to work.

perj commented

Doesn't seem to parse valgrind reports very well, eg. http://github.com/facebook/hiphop-php/issues/#issue/50 a bit down. Nor gdb tracebacks for that matter.

a^2 works for me, but not ->

Fedora 12, FF 3.5.11

Yeah, arrows don't work.

any chance on images? Being able to upload a screenshot in an issue tracker is quite useful

I like this feeling...

Maybe there's something wrong in the page.

Under Set in stone.

And -> doesn't work on my computer, too.

Yeah, I like to try these.

f(x) = sin(ax^2 ) + bx + c

OK

That's it!

  1. abcdef
    ghijklmnopq
  2. cdefg
  • abc
  • cde

B

I

_BI_

What is this?

xxx is same as xxx?

And this is ?

Something seems to be wrong with the ASCII art example; I think it's coming out as code but not pre.

[testing]

Isn't the above rendering pretty much broken?

This Api's Tester

Given that this page is offered as the primary example linked from the GitHub Flavored Markdown page, it would be great if it rendered correctly. So thanks to the wonderful fact that comments themselves use this very markdown, I've included a c&p of the corresponding referenced source (with the exception of the following minor fix, s/</&lt;/, in the <pre> example which appears to be indicative of what is arguably a bug in the <pre> parsing code):

Begin Example Source of Corrected <pre> Section


<pre>
             ,-. 
    ,     ,-.   ,-. 
   / \   (   )-(   ) 
   \ |  ,.>-(   )-&lt; 
    \|,' (   )-(   ) 
     Y ___`-'   `-' 
     |/__/   `-' 
     | 
     | 
     |    -hrr- 
  ___|_____________ 
</pre>

Begin Full Rendered Source


GitHub Flavored Markdown

View the source of this content.

Let's get the whole "linebreak" thing out of the way. The next paragraph contains two phrases separated by a single newline character:

Roses are red
Violets are blue

The next paragraph has the same phrases, but now they are separated by two spaces and a newline character:

Roses are red
Violets are blue

Oh, and one thing I cannot stand is the mangling of words with multiple underscores in them like perform_complicated_task or do_this_and_do_that_and_another_thing.

A bit of the GitHub spice

In addition to the changes in the previous section, certain references are auto-linked:

These are dangerous goodies though, and we need to make sure email addresses don't get mangled:

My email addy is tom@github.com.

Math is hard, let's go shopping

In first grade I learned that 5 > 3 and 2 < 7. Maybe some arrows. 1 -> 2 -> 3. 9 <- 8 <- 7.

Triangles man! a^2 + b^2 = c^2

We all like making lists

The above header should be an H2 tag. Now, for a list of fruits:

  • Red Apples
  • Purple Grapes
  • Green Kiwifruits

Let's get crazy:

  1. This is a list item with two paragraphs. Lorem ipsum dolor
    sit amet, consectetuer adipiscing elit. Aliquam hendrerit
    mi posuere lectus.

Vestibulum enim wisi, viverra nec, fringilla in, laoreet
vitae, risus. Donec sit amet nisl. Aliquam semper ipsum
sit amet velit.
2. Suspendisse id sem consectetuer libero luctus adipiscing.

What about some code in a list? That's insane, right?

  1. In Ruby you can map like this:

    ['a', 'b'].map { |x| x.uppercase }
    
  2. In Rails, you can do a shortcut:

    ['a', 'b'].map(&:uppercase)
    

Some people seem to like definition lists

Lower cost
The new version of this product costs significantly less than the previous one!
Easier to use
We've changed the product so that it's much easier to use!

I am a robot

Maybe you want to print robot to the console 1000 times. Why not?

def robot_invasion
  puts("robot " * 1000)
end

You see, that was formatted as code because it's been indented by four spaces.

How about we throw some angle braces and ampersands in there?

<div class="footer">
    &copy; 2004 Foo Corporation
</div>

Set in stone

Preformatted blocks are useful for ASCII art:

             ,-. 
    ,     ,-.   ,-. 
   / \   (   )-(   ) 
   \ |  ,.>-(   )-< 
    \|,' (   )-(   ) 
     Y ___`-'   `-' 
     |/__/   `-' 
     | 
     | 
     |    -hrr- 
  ___|_____________ 

Playing the blame game

If you need to blame someone, the best way to do so is by quoting them:

I, at any rate, am convinced that He does not throw dice.

Or perhaps someone a little less eloquent:

I wish you'd have given me this written question ahead of time so I
could plan for it... I'm sure something will pop into my head here in
the midst of this press conference, with all the pressure of trying to
come up with answer, but it hadn't yet...

I don't want to sound like
I have made no mistakes. I'm confident I have. I just haven't - you
just put me under the spot here, and maybe I'm not as quick on my feet
as I should be in coming up with one.

Table for two

IDNameRank
1Tom Preston-WernerAwesome
2Albert EinsteinNearly as awesome

Crazy linking action

I get 10 times more traffic from Google than from
Yahoo or MSN.

The table feature seems to be broken. At least the tables here do not work:
https://github.com/panzi/SocialSharePrivacy

I'll test some things here:

Character Replacement
< &lt;
> &gt;
& &amp;
" &quot;
' &#39;
Character Replacement
< &lt;
> &gt;
& &amp;
" &quot;
' &#39;
Character Replacement
< &lt;
Character Replacement
< &lt;
Character Replacement
Foo Bar

Nope, completely broken.

Last try:

Foo Bar
Egg Spam

Or do all <td>s need to be in one line?

FooBar
FooBar
FooBar
FooBar

https://github.com/FichteFoll/sublimetext-insertdate/blob/master/README.md

Seems to be similar to the "MultiMarkDown" thing but I'm not sure about that and it just works. The alignments do not, apparently (the :----, :-----: ------: thing).

Edit: Plugin for Sublime Tex 2.

Ok, then let me try this here:

Foo Bar
Egg Spam

... interestingly it shows the exact same problems as the <table> version. My guess is that sometime in the last few days some update wrecked table support on github and that old files are cached rendered and thus still look right.

When you click on "Edit" and then on "Preview" in the README.md you linked you see the exact same thing.

Yeah, seems to be fixed now.

It seems that un-necessary parsing happens within preformatted blocks < pre > ...< /pre >
For example the existance of a single '&' in the preformated block causes a parse error to be generated and the whole pre formatted block to become pink....

To avoid that you need to replace all your ampersands within pre with & amp ; ...
I am assuming that this is a parsing bug of the markdown library and not a standard behavior, correct?

odysseas

Broken

This soo doesn't work properly. And they still don't allow HTML inside <del>code<del> tags (which is probably a feature, not a bug). And as a previous commenter said:

Given that this page is offered as the primary example linked from the GitHub Flavored Markdown page, it would be great if it rendered correctly.

So I decided to try it on my own :)

GitHub Flavored Markdown

View the source of this content.

Let's get the whole "linebreak" thing out of the way. The next paragraph contains two phrases separated by a single newline character:

Roses are red
Violets are blue

The next paragraph has the same phrases, but now they are separated by two spaces and a newline character:

Roses are red
Violets are blue

Oh, and one thing I cannot stand is the mangling of words with multiple underscores in them like perform_complicated_task or do_this_and_do_that_and_another_thing.

A bit of the GitHub spice

In addition to the changes in the previous section, certain references are auto-linked:

These are dangerous goodies though, and we need to make sure email addresses don't get mangled:

My email addy is tom@github.com.

Math is hard, let's go shopping

In first grade I learned that 5 > 3 and 2 < 7. Maybe some arrows. 1 -> 2 -> 3. 9 <- 8 <- 7.

Triangles man! a^2 + b^2 = c^2

We all like making lists

The above header should be an H2 tag. Now, for a list of fruits:

  • Red Apples
  • Purple Grapes
  • Green Kiwifruits

Let's get crazy:

  1. This is a list item with two paragraphs. Lorem ipsum dolor
    sit amet, consectetuer adipiscing elit. Aliquam hendrerit
    mi posuere lectus.

Vestibulum enim wisi, viverra nec, fringilla in, laoreet
vitae, risus. Donec sit amet nisl. Aliquam semper ipsum
sit amet velit.
2. Suspendisse id sem consectetuer libero luctus adipiscing.

What about some code in a list? That's insane, right?

  1. In Ruby you can map like this:

    ['a', 'b'].map { |x| x.uppercase }
    
  2. In Rails, you can do a shortcut:

    ['a', 'b'].map(&:uppercase)
    

Some people seem to like definition lists

Lower cost
The new version of this product costs significantly less than the previous one!
Easier to use
We've changed the product so that it's much easier to use!

I am a robot

Maybe you want to print robot to the console 1000 times. Why not?

def robot_invasion
  puts("robot " * 1000)
end

You see, that was formatted as code because it's been indented by four spaces.

How about we throw some angle braces and ampersands in there?

<div class="footer">
    &copy; 2004 Foo Corporation
</div>

Set in stone

Preformatted blocks are useful for ASCII art:

             ,-. 
    ,     ,-.   ,-. 
   / \   (   )-(   ) 
   \ |  ,.>-(   )-< 
    \|,' (   )-(   ) 
     Y ___`-'   `-' 
     |/__/   `-' 
     | 
     | 
     |    -hrr- 
  ___|_____________ 

Playing the blame game

If you need to blame someone, the best way to do so is by quoting them:

I, at any rate, am convinced that He does not throw dice.

Or perhaps someone a little less eloquent:

I wish you'd have given me this written question ahead of time so I
could plan for it... I'm sure something will pop into my head here in
the midst of this press conference, with all the pressure of trying to
come up with answer, but it hadn't yet...

I don't want to sound like
I have made no mistakes. I'm confident I have. I just haven't - you
just put me under the spot here, and maybe I'm not as quick on my feet
as I should be in coming up with one.

Table for two

IDNameRank
1Tom Preston-WernerAwesome
2Albert EinsteinNearly as awesome

Crazy linking action

I get 10 times more traffic from Google than from
Yahoo or MSN.

Good easy to use!

=_=
-.-

Why the
: syntax is not supported?

Lower cost
The new version of this product costs significantly less than the previous one!
Easier to use
We've changed the product so that it's much easier to use!

Is less compact...

test

code

 public class People{
  private String name;
  private  int     age;
 }

i am a coder

language
java
python

very good

Again: the example shown in the posted issue has many rendering problems.

  • "certain references are auto-linked" – nope
  • and the arrow example is parsed incorrectly, and now shows text w/ strikethrough.

How do I apply italics + bold?

_both_

***both***

Doesn't work for me in a README. :(

GitHub Flavored Markdown

View the source of this content.

Let's get the whole "linebreak" thing out of the way. The next paragraph contains two phrases separated by a single newline character:

Roses are red
Violets are blue

The next paragraph has the same phrases, but now they are separated by two spaces and a newline character:

Roses are red
Violets are blue

Oh, and one thing I cannot stand is the mangling of words with multiple underscores in them like perform_complicated_task or do_this_and_do_that_and_another_thing.

A bit of the GitHub spice

In addition to the changes in the previous section, certain references are auto-linked:

These are dangerous goodies though, and we need to make sure email addresses don't get mangled:

My email addy is tom@github.com.

Math is hard, let's go shopping

In first grade I learned that 5 > 3 and 2 < 7. Maybe some arrows. 1 -> 2 -> 3. 9 <- 8 <- 7.

Triangles man! a^2 + b^2 = c^2

We all like making lists

The above header should be an H2 tag. Now, for a list of fruits:

  • Red Apples
  • Purple Grapes
  • Green Kiwifruits

Let's get crazy:

  1. This is a list item with two paragraphs. Lorem ipsum dolor
    sit amet, consectetuer adipiscing elit. Aliquam hendrerit
    mi posuere lectus.

Vestibulum enim wisi, viverra nec, fringilla in, laoreet
vitae, risus. Donec sit amet nisl. Aliquam semper ipsum
sit amet velit.
2. Suspendisse id sem consectetuer libero luctus adipiscing.

What about some code in a list? That's insane, right?

  1. In Ruby you can map like this:

    ['a', 'b'].map { |x| x.uppercase }
    
  2. In Rails, you can do a shortcut:

    ['a', 'b'].map(&:uppercase)
    

Some people seem to like definition lists

Lower cost
The new version of this product costs significantly less than the previous one!
Easier to use
We've changed the product so that it's much easier to use!

I am a robot

Maybe you want to print robot to the console 1000 times. Why not?

def robot_invasion
  puts("robot " * 1000)
end

You see, that was formatted as code because it's been indented by four spaces.

How about we throw some angle braces and ampersands in there?

<div class="footer">
    &copy; 2004 Foo Corporation
</div>

Set in stone

Preformatted blocks are useful for ASCII art:

             ,-. 
    ,     ,-.   ,-. 
   / \   (   )-(   ) 
   \ |  ,.>-(   )-< 
    \|,' (   )-(   ) 
     Y ___`-'   `-' 
     |/__/   `-' 
     | 
     | 
     |    -hrr- 
  ___|_____________ 

Playing the blame game

If you need to blame someone, the best way to do so is by quoting them:

I, at any rate, am convinced that He does not throw dice.

Or perhaps someone a little less eloquent:

I wish you'd have given me this written question ahead of time so I
could plan for it... I'm sure something will pop into my head here in
the midst of this press conference, with all the pressure of trying to
come up with answer, but it hadn't yet...

I don't want to sound like
I have made no mistakes. I'm confident I have. I just haven't - you
just put me under the spot here, and maybe I'm not as quick on my feet
as I should be in coming up with one.

Table for two

IDNameRank
1Tom Preston-WernerAwesome
2Albert EinsteinNearly as awesome

Crazy linking action

I get 10 times more traffic from Google than from
Yahoo or MSN.

test
﹉﹉
﹉﹉

test
test

so is there a way to do the math/exponents/super, or no? seems they didn't work 3 years ago and don't now. :)

#21 test

hi

测试一下中文:

  • @justjavac, 格式化代码
  • 这是一个中文测试
  • 加粗
  • 未完成

I wanted to try to do some enhanced format using HTML tags for the README pages of my projects but it seems the GFM ignores style tags and attributes. Is there any other way to do it?

I think ignoring <style> tags is perfectly valid in this case because you can do various and unwanted stuff with it.

I recommend you to take a look at the Github Pages feature.

No inner word embolden: e_X_change

OK, so what's with the mess around the

 block?

Set in stone

Preformatted blocks are useful for ASCII art:

             ,-. 
    ,     ,-.   ,-. 
   / \   (   )-(   ) 
   \ |  ,.>-(   )-< 
    \|,' (   )-(   ) 
     Y ___`-'   `-' 
     |/__/   `-' 
     | 
     | 
     |    -hrr- 
  ___|_____________ 

Playing the blame game

If you need to blame someone, the best way to do so is by quoting them:

I, at any rate, am convinced that He does not throw dice.

We don't seem to end the block in the right place, do we? Why is that?

Well, it's because of the < in the ascii art. Is this a parsing error? Replace it with < to see:

Preformatted blocks are useful for ASCII art:

             ,-. 
    ,     ,-.   ,-. 
   / \   (   )-(   ) 
   \ |  ,.>-(   )-< 
    \|,' (   )-(   ) 
     Y ___`-'   `-' 
     |/__/   `-' 
     | 
     | 
     |    -hrr- 
  ___|_____________ 

and we seem ok now.

Writing < doesn't work, as you'd expect.

🚢
i like this.
And just a test.

I don't believe the github wiki feature allows embedded HTML at all. Security issue intended to prevent insertion of malicious javascript. This is unfortunate since embedded HTML is a standard way to do tables in markdown. Github Flavored Markdown (GFM) supports tables, but this makes editing your content (e.g. with a desktop markdown editor ) pretty difficult since markdown editors don't support GFM!

Not all HTML tags are <script> tags. Using <em> to emphasize text is perfectly valid. You can also used <table> tags for tables (iirc). (And there are for sure text editors who support Multimarkdown tables (e.g. for Sublime Text there is a plugin).)

(strikeout using <del>)

test

Try GFM

def hello():
    print 'hello world'
if __name__ == '__main__':
    print hello()

try gfm

  • try gfm

mm

Superscript test.

<sup>Superscrip</sup> test.

I wish [reference links][1] would work.

[1]: They don't.

alert("hello world")
for (i=1; i <=100; i++){
   Console.WriteLine("Not much going on here");
}

Jesdisciple commented a month ago:

I wish [reference links][1] would work.

[1]: They don't.

Do you mean "I wish reference links would work without a link"?

This markdown:

Working: [2], [3], [4]. Failing: [5], [6], [7], [8]

[2]: http://github.com/ "This works."
[3]: http://github.com/ 'Works.'
[4]: http://github.com/
[5]: http://github.com/ Fails
[6]: "Fails."
[7]: 'Fails.'
[8]: Fails.

Generates the following HTML:

<p>Working: <a href="https://github.com/" title="This works.">2</a>, <a href="https://github.com/" title="Works.">3</a>, <a href="https://github.com/">4</a>. Failing: [5], <a href="%22Fails.%22">6</a>, <a href="'Fails.'">7</a>, <a href="Fails.">8</a></p>

Which looks like so:

Working: 2, 3, 4. Failing: [5], 6, 7, 8

[5]: http://github.com/ Fails


Huh, here is an interesting bug:

Markdown:

[9], [10], [11], [12].

[9]: file://google.com/foo "Fails interestingly."
[10]: ftp://google.com/foo "Fails interestingly."
[11]: ssh://google.com/foo "Fails interestingly."
[12]: foo://google.com/foo "Fails interestingly."

HTML source:

<p><a title="Fails interestingly.">9</a>, <a title="Fails interestingly.">10</a>, <a title="Fails interestingly.">11</a>, <a title="Fails interestingly.">12</a>.</p>

HTML:

9, 10, 11, 12.

Woops, looks like I misread the markdown syntax page; I was thinking reference links were footnotes (intra-page links), but they're just ordinary external links.

(But that would be "I wish reference links would work without a URL.")

for test

    def say_hi
        print "hello world" 
    end

What's happening to the ASCII art?

             ,-. 
    ,     ,-.   ,-. 
   / \   (   )-(   ) 
   \ |  ,.>-(   )-< 
    \|,' (   )-(   ) 
     Y ___`-'   `-' 
     |/__/   `-' 
     | 
     | 
     |    -hrr- 
  ___|_____________ 
_Update:_ Found the reason, it's because of the `<` in the ASCII art. Replace it with `<` to fix:
             ,-. 
    ,     ,-.   ,-. 
   / \   (   )-(   ) 
   \ |  ,.>-(   )-< 
    \|,' (   )-(   ) 
     Y ___`-'   `-' 
     |/__/   `-' 
     | 
     | 
     |    -hrr- 
  ___|_____________ 

please,, anyone who knows my password and my user name,,, please let me know ... i beg ..

testing



Fish Types

Red Fish Blue Fish
One Fish Two Fish