Skip to content

Instantly share code, notes, and snippets.

@curtisj44
Last active March 5, 2021 20:00
Show Gist options
  • Save curtisj44/e056f3ea8162219d95821d08c7b891d7 to your computer and use it in GitHub Desktop.
Save curtisj44/e056f3ea8162219d95821d08c7b891d7 to your computer and use it in GitHub Desktop.
Markdown Examples

Markdown

Per: https://daringfireball.net/projects/markdown/syntax

Headings

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 5
Heading level 6

Blockquotes

This is a blockquote 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. Suspendisse id sem consectetuer libero luctus adipiscing.

Nested Blockquote

This is the first level of quoting.

This is nested blockquote.

Back to the first level.


This is a header.

  1. This is the first list item.
  2. This is the second list item.

Here's some example code:

return shell_exec("echo $input | $markdown_script");

Lists

  • Red
  • Green
  • Blue
  • Red
  • Green
  • Blue
  1. Bird
  2. McHale
  3. Parish
  • A list item with a blockquote:

    This is a blockquote inside a list item.

Code Blocks

This is a normal paragraph:

This is a code block.

Links

This is an example inline link.

Emphasis

single asterisks

single underscores

double asterisks

double underscores

Code

Use the printf() function.

There is a literal backtick (`) here.

Images

Alt text

GitHub Flavored Markdown Spec

https://guides.github.com/features/mastering-markdown/ https://github.github.com/gfm/

Code Fencing

if (isAwesome){
  return true
}

Task Lists

  • @mentions, #refs, links, formatting, and tags supported
  • list syntax required (any unordered or ordered list supported)
  • this is a complete item
  • this is an incomplete item

Table

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

Example

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

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

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

Image of Yaktocat

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

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
}

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!

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

Per: https://markdown-it.github.io/

h1 Heading 8-)

h2 Heading

h3 Heading

h4 Heading

h5 Heading
h6 Heading

Horizontal Rules




Typographic replacements

Enable typographer option to see result.

(c) (C) (r) (R) (tm) (TM) (p) (P) +-

test.. test... test..... test?..... test!....

!!!!!! ???? ,, -- ---

"Smartypants, double quotes" and 'single quotes'

Emphasis

This is bold text

This is bold text

This is italic text

This is italic text

Strikethrough

Blockquotes

Blockquotes can also be nested...

...by using additional greater-than signs right next to each other...

...or with spaces between arrows.

Lists

Unordered

  • Create a list by starting a line with +, -, or *
  • Sub-lists are made by indenting 2 spaces:
    • Marker character change forces new list start:
      • Ac tristique libero volutpat at
      • Facilisis in pretium nisl aliquet
      • Nulla volutpat aliquam velit
  • Very easy!

Ordered

  1. Lorem ipsum dolor sit amet

  2. Consectetur adipiscing elit

  3. Integer molestie lorem at massa

  4. You can use sequential numbers...

  5. ...or keep all the numbers as 1.

Start numbering with offset:

  1. foo
  2. bar

Code

Inline code

Indented code

// Some comments
line 1 of code
line 2 of code
line 3 of code

Block code "fences"

Sample text here...

Syntax highlighting

var foo = function (bar) {
  return bar++;
};

console.log(foo(5));

Tables

Option Description
data path to data files to supply the data that will be passed into templates.
engine engine to be used for processing templates. Handlebars is the default.
ext extension to be used for dest files.

Right aligned columns

Option Description
data path to data files to supply the data that will be passed into templates.
engine engine to be used for processing templates. Handlebars is the default.
ext extension to be used for dest files.

Links

link text

link with title

Autoconverted link https://github.com/nodeca/pica (enable linkify to see)

Images

Minion Stormtroopocat

Like links, Images also have a footnote style syntax

Alt text

With a reference later in the document defining the URL location:

Plugins

The killer feature of markdown-it is very effective support of syntax plugins.

Classic markup: 😉 :crush: 😢 :tear: 😆 😋

Shortcuts (emoticons): :-) :-( 8-) ;)

see how to change output with twemoji.

  • 19^th^
  • H2O

++Inserted text++

==Marked text==

Footnote 1 link1.

Footnote 2 link2.

Inline footnote^[Text of inline footnote] definition.

Duplicated footnote reference2.

Term 1

: Definition 1 with lazy continuation.

Term 2 with inline markup

: Definition 2

    { some code, part of Definition 2 }

Third paragraph of definition 2.

Compact style:

Term 1 ~ Definition 1

Term 2 ~ Definition 2a ~ Definition 2b

This is HTML abbreviation example.

It converts "HTML", but keep intact partial entries like "xxxHTMLyyy" and so on.

*[HTML]: Hyper Text Markup Language

::: warning here be dragons :::

Footnotes

  1. Footnote can have markup

    and multiple paragraphs.

  2. Footnote text. 2

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