Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

GitHub Flavored Markdown Examples #1

Closed
mojombo opened this issue Apr 21, 2009 · 65 comments
Closed

GitHub Flavored Markdown Examples #1

mojombo opened this issue Apr 21, 2009 · 65 comments

Comments

@mojombo
Copy link
Owner

mojombo commented Apr 21, 2009

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.

@kennethreitz
Copy link

I want this in php!!!

@mojombo
Copy link
Owner Author

mojombo commented Dec 17, 2009

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

http://gist.github.com/118964

@fgnass
Copy link

fgnass commented Jan 21, 2010

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

@fgnass
Copy link

fgnass commented Jan 21, 2010

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

@fgnass
Copy link

fgnass commented Jan 22, 2010

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
Copy link

perj commented Mar 17, 2010

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.

@snoldak924
Copy link

a^2 works for me, but not ->

Fedora 12, FF 3.5.11

@Archeleus
Copy link

Yeah, arrows don't work.

@najamelan
Copy link

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

@paradoxxxzero
Copy link

@cjxgm
Copy link

cjxgm commented Jan 8, 2011

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

@ekd123
Copy link

ekd123 commented Feb 1, 2011

B

I

_BI_

What is this?

xxx is same as xxx?

@woomla
Copy link

woomla commented Mar 7, 2011

And this is ?

@Rosuav
Copy link

Rosuav commented Mar 20, 2011

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

@carlosalexsander
Copy link

[testing]

@carlosalexsander
Copy link

 teste 

@dnadlinger
Copy link

Isn't the above rendering pretty much broken?

@ghost
Copy link

ghost commented Oct 13, 2011

This Api's Tester

@sanek83
Copy link

sanek83 commented Nov 17, 2011

logo

@SethMilliken
Copy link

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.

@panzi
Copy link

panzi commented Jul 1, 2012

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;

@panzi
Copy link

panzi commented Jul 1, 2012

Character Replacement
< &lt;
Character Replacement
< &lt;
Character Replacement
Foo Bar

@panzi
Copy link

panzi commented Jul 1, 2012

Nope, completely broken.

@panzi
Copy link

panzi commented Jul 1, 2012

Last try:

Foo Bar
Egg Spam

@panzi
Copy link

panzi commented Jul 1, 2012

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

FooBar
FooBar
FooBar
FooBar

@FichteFoll
Copy link

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.

@panzi
Copy link

panzi commented Jul 1, 2012

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.

@FichteFoll
Copy link

Yeah, seems to be fixed now.

@tsatalos
Copy link

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

@yatharth
Copy link

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.

laviole referenced this issue in expanse-org/go-expanse Aug 25, 2019
Dockerfile tries to copy `geth` but it should copy `gexp` instead
Vascosantunes referenced this issue in carloslobo-Web/meu-blog May 30, 2021
nguyenvanbic123 added a commit to nguyenvanbic123/804955 that referenced this issue Aug 24, 2021
Hướng dẫn video GitHub Trợ giúpBiểu trưng của GitHub Guides
Làm chủ Markdown
 3 phút đọc  Tải xuống phiên bản PDF
Markdown là một cú pháp nhẹ và dễ sử dụng để tạo kiểu cho tất cả các dạng văn bản trên nền tảng GitHub.

Những gì bạn sẽ học:

Cách định dạng Markdown giúp chỉnh sửa cộng tác theo kiểu dễ dàng
Markdown khác với các cách tiếp cận định dạng truyền thống như thế nào
Cách sử dụng Markdown để định dạng văn bản
Cách tận dụng kết xuất Markdown tự động của GitHub
Cách áp dụng các tiện ích mở rộng Markdown độc đáo của GitHub

Markdown là gì?
Markdown là một cách để tạo kiểu cho văn bản trên web. Bạn kiểm soát việc hiển thị tài liệu; định dạng từ in đậm hoặc nghiêng, thêm hình ảnh và tạo danh sách chỉ là một vài trong số những việc chúng ta có thể làm với Markdown. Hầu hết, Markdown chỉ là văn bản thông thường với một vài ký tự không phải chữ cái được đưa vào, như #hoặc *.

Bạn có thể sử dụng Markdown hầu hết các địa điểm xung quanh GitHub:

Gists
Nhận xét trong vấn đề và yêu cầu kéo
Tệp có phần mở rộng .mdhoặc.markdown
Để biết thêm thông tin, hãy xem “ Viết trên GitHub ” trong Trợ giúp GitHub .


Các ví dụ
Chữ Danh sách Hình ảnh Tiêu đề & Trích dẫn Mã số Bổ sung
Thật dễ dàng để tạo một số từ ** in đậm ** và các từ khác * nghiêng * với Markdown. Bạn thậm chí có thể [liên kết tới Google!] (Http://google.com)
Rất dễ dàng để làm cho một số từ in đậm và những từ khác nghiêng với Markdown. Bạn thậm chí có thể liên kết với Google!

Hướng dẫn cú pháp
Dưới đây là tổng quan về cú pháp Markdown mà bạn có thể sử dụng ở mọi nơi trên GitHub.com hoặc trong các tệp văn bản của riêng bạn.

Tiêu đề
# This is an <h1> tag
## This is an <h2> tag
###### This is an <h6> tag
Nhấn mạnh
*This text will be italic*
_This will also be italic_

**This text will be bold**
__This will also be bold__

_You **can** combine them_
Danh sách
Không theo thứ tự
* Item 1
* Item 2
  * Item 2a
  * Item 2b
Đã đặt hàng
1. Item 1
1. Item 2
1. Item 3
   1. Item 3a
   1. Item 3b
Hình ảnh
![GitHub Logo](/images/logo.png)
Format: ![Alt Text](url)
Liên kết
http://github.com - automatic!
[GitHub](http://github.com)
Dấu ngoặc kép
As Kanye West said:

> We're living the future so
> the present is our past.
Mã nội tuyến
I think you should use an
`<addr>` element here instead.

GitHub Flavoured Markdown
GitHub.com sử dụng phiên bản cú pháp Markdown của riêng mình, cung cấp một bộ bổ sung các tính năng hữu ích, nhiều tính năng trong số đó giúp làm việc với nội dung trên GitHub.com dễ dàng hơn.

Lưu ý rằng một số tính năng của GitHub Flavored Markdown chỉ có sẵn trong phần mô tả và nhận xét của Sự cố và Yêu cầu kéo. Chúng bao gồm @ chú thích cũng như tham chiếu đến hàm băm SHA-1, Vấn đề và Yêu cầu kéo. Danh sách tác vụ cũng có sẵn trong nhận xét Gist và trong tệp Gist Markdown.

Đánh dấu cú pháp
Dưới đây là một ví dụ về cách bạn có thể sử dụng đánh dấu cú pháp với GitHub Flavored Markdown :

```javascript
function fancyAlert(arg) {
  if(arg) {
    $.facebox({div:'#foo'})
  }
}
```
Bạn cũng có thể chỉ cần thụt lề mã của mình bằng bốn dấu cách:

    function fancyAlert(arg) {
      if(arg) {
        $.facebox({div:'#foo'})
      }
    }
Dưới đây là một ví dụ về mã Python không có đánh dấu cú pháp:

def foo():
    if not bar:
        return True
Danh sách công việc
- [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@16c999e
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.

Last updated Jan 15, 2014

GitHub là cách tốt nhất để xây dựng và vận chuyển phần mềm.
Cộng tác mạnh mẽ, đánh giá mã và quản lý mã cho các dự án nguồn mở và riêng tư.
This issue was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests