Markdown Sampler

GitHub Pages uses the kramdown processor to render markdown, and the rouge syntax highlighter to color code. See the References section below for links to more details.

Cheatsheet

Element Syntax
TOC {:toc} following a list item
Headings # … ######
Breaks <br>
Spans _, **, ~~
Blockquotes >
Lists *, +, -, 1.
Code ` or ```
Keyboard <kdb> .. </kbd>
Tables |--:|
Links [text](url "title") or ([text][id] + [id]: url "title")
Images ![alt](url "title") or (![alt][id] + [id]: url "title")
Footnotes [^id] + [^id]: content)
Rules --- or *** or ___
Emoji :emoji-id:
Icons {% include icon.liquid id='<id>' %}
Messages {:.ui.<size|type>.message}

Each section on this page illustrates markdown syntax that can be used to author content with the programming pages theme.

TOC

Place the kramdown macro {:toc} on the line below any list item. The list item will be replaced by an auto-generated table of content list.

markdown

- toc placeholder
{:toc}


result

Headings

Prefix the heading text with 1-6 octothorpes (#) to indicate h1—h6.

markdown

# Heading h1

## Heading h2

### Heading h3

#### Heading h4

##### Heading h5

###### Heading h6


result

Heading h1

Heading h2

Heading h3

Heading h4

Heading h5
Heading h6

Breaks

The html break tag (<br>) will insert newlines.

markdown

line1<br>line2


result

line1
line2

Spans

Surround text by decoration characters (_, *, ~, `).

markdown

_emphasis_ or *emphasis*

__strong__ or **strong**

~~strikethrough~~

`code`


result

emphasis or emphasis

strong or strong

strikethrough

code

Blockquotes

Prefix the quotation text with a greater than sign (>). Consecutive lines will be combined.

markdown

> blockquote line 1
> same line, continued

> blockquote line 2


result

blockquote line 1 same line, continued

blockquote line 2

Lists

Unordered Lists

Using -, +, or *, indent each level by three spaces.

markdown

- unordered item
   - unordered item
      - unordered item
+ unordered item
* unordered item


result

  • unordered item
    • unordered item
      • unordered item
  • unordered item
  • unordered item

Ordered Lists

Using any digit followed by a period (.), indent each level by three spaces. Actual number values are ignored.

markdown

1. ordered item
   1. ordered item
      1. ordered item
95. ordered item
7. ordered item


result

  1. ordered item
    1. ordered item
      1. ordered item
  2. ordered item
  3. ordered item

Code

Inline code

Surround code phrases with backticks (`).

markdown

regular `code` regular


result

regular code regular

Indented code

Indent code blocks with four spaces.

markdown

    code
    code
    code


result

code
code
code

Fenced code

Use triple backticks (```) on lines before and after the code block to render syntax-highlighted code. Provide an optional syntax hint on the first line specify a specific language highlighter. Github Pages uses the rouge highlighter for syntax coloring.

markdown

```json
{
    "foo": "bar",
    "baz": 847,
    "bat": [true, false]
}
```


result

{
    "foo": "bar",
    "baz": 847,
    "bat": [true, false]
}

Keyboard

Use the kbd tag to indicate literal key sequences (Esc).

markdown

Select all text on the page with <kbd>Ctrl</kbd><kbd>A</kbd>.


result

Select all text on the page with CtrlA.

Tables

Surround columns with pipes (|). Provide a header separator row of hyphens (-), with optional alignment colons (:).

markdown

| Column A | Column B  | Column C |
|----------|:---------:|---------:|
| left     | center    | right    |
| left     | center    | right    |
| left     | center    | right    |


result

Column A Column B Column C
left center right
left center right
left center right

Format: [text](url "hover text") or [text](#anchor "hover text")

markdown

- [random Wikipedia page](http://en.wikipedia.org/wiki/Special:Randompage "link to a random Wikipedia page")
- [references](#references "jump to the references section")


result

Format: [text][reference-id]
Reference Format: [reference-id]: url "hover text"

markdown

- [random Wikipedia page][random-page]
- [references]

[random-page]: http://en.wikipedia.org/wiki/Special:Randompage "link to a random Wikipedia page"
[references]: #references "jump to the references section on this page"


result

Images

Format: ![alt text](url "hover text")

markdown

![sample image](https://dummyimage.com/600x400/70b7ec/000 "a 600x400 image")


result

sample image

Format: ![alt text][reference-id]
Reference Format: [reference-id]: url "hover text"

markdown

![sample image][dummy-image]

[dummy-image]: https://dummyimage.com/600x400/70b7ec/000 "a 600x400 image"


result

sample image

Footnotes

Marker format: [^id]
Note format: [^id]: content

markdown

Footnote markers must be numbers or word characters in square brackets.[^1] Traditional symbols[^2] will not work with the kramdown processor.

The backlink character (`⮌`) is configurable via `kramdown.footnote_backlink` in `_config.yml`.[^3]
The programming pages theme chooses unicode code point `U+2B8C` for this, and supplies its own webfont to ensure cross-platform rendering.
Kramdown's default value is `U+21A9` (`↩`).[^4]

Footnotes are collected and all rendered at the end of the page, with the optional backlink character linking back to the citing text.

[^1]: A footnote marker can be created by placing the footnote name in square brackets. The footnote name has to start with a caret (`^`), followed by a word character or a digit and then optionally followed by other word characters, digits or dashes. For example: `This is some text.[^1]. Other text.[^footnote].` (from: [Kramdown syntax documentation <svg version="1.1" class="icon smaller text" role="img" aria-hidden="true" viewBox="0 0 1792 1536"><path d="M1408 928v320q0 119-84.5 203.5T1120 1536H288q-119 0-203.5-84.5T0 1248V416q0-119 84.5-203.5T288 128h704q14 0 23 9t9 23v64q0 14-9 23t-23 9H288q-66 0-113 47t-47 113v832q0 66 47 113t113 47h832q66 0 113-47t47-113V928q0-14 9-23t23-9h64q14 0 23 9t9 23zm384-864v512q0 26-19 45t-45 19-45-19l-176-176-652 652q-10 10-23 10t-23-10L695 983q-10-10-10-23t10-23l652-652-176-176q-19-19-19-45t19-45 45-19h512q26 0 45 19t19 45z"/></svg>](https://kramdown.gettalong.org/syntax.html#footnotes) ).
[^2]: Typographical devices such as the asterisk (*) or dagger (†) may also be used to point to footnotes; the traditional order of these symbols in English is *, †, ‡, §, ‖, ¶. (from: [Wikipedia description of footnotes <svg version="1.1" class="icon smaller text" role="img" aria-hidden="true" viewBox="0 0 1792 1536"><path d="M1408 928v320q0 119-84.5 203.5T1120 1536H288q-119 0-203.5-84.5T0 1248V416q0-119 84.5-203.5T288 128h704q14 0 23 9t9 23v64q0 14-9 23t-23 9H288q-66 0-113 47t-47 113v832q0 66 47 113t113 47h832q66 0 113-47t47-113V928q0-14 9-23t23-9h64q14 0 23 9t9 23zm384-864v512q0 26-19 45t-45 19-45-19l-176-176-652 652q-10 10-23 10t-23-10L695 983q-10-10-10-23t10-23l652-652-176-176q-19-19-19-45t19-45 45-19h512q26 0 45 19t19 45z"/></svg>](https://en.wikipedia.org/w/index.php?title=Note_(typography)&oldid=871967408) ).
[^3]: `footnote_backlink` defines the text that will link back to the footnote marker. The footnote backlink is just text, so any special HTML characters will be escaped. If the footnote backlink text is an empty string, no footnote backlinks will be generated. (from: [Kramdown configuration options <svg version="1.1" class="icon smaller text" role="img" aria-hidden="true" viewBox="0 0 1792 1536"><path d="M1408 928v320q0 119-84.5 203.5T1120 1536H288q-119 0-203.5-84.5T0 1248V416q0-119 84.5-203.5T288 128h704q14 0 23 9t9 23v64q0 14-9 23t-23 9H288q-66 0-113 47t-47 113v832q0 66 47 113t113 47h832q66 0 113-47t47-113V928q0-14 9-23t23-9h64q14 0 23 9t9 23zm384-864v512q0 26-19 45t-45 19-45-19l-176-176-652 652q-10 10-23 10t-23-10L695 983q-10-10-10-23t10-23l652-652-176-176q-19-19-19-45t19-45 45-19h512q26 0 45 19t19 45z"/></svg>](https://kramdown.gettalong.org/options.html#option-footnote-backlink) ).
[^4]: Default value for `footnote_backlink` is `&8617;`, i.e. unicode codepoint `U+21A9`. It can be set to any text, or the empty string to disable (from: [Kramdown syntax documentation <svg version="1.1" class="icon smaller text" role="img" aria-hidden="true" viewBox="0 0 1792 1536"><path d="M1408 928v320q0 119-84.5 203.5T1120 1536H288q-119 0-203.5-84.5T0 1248V416q0-119 84.5-203.5T288 128h704q14 0 23 9t9 23v64q0 14-9 23t-23 9H288q-66 0-113 47t-47 113v832q0 66 47 113t113 47h832q66 0 113-47t47-113V928q0-14 9-23t23-9h64q14 0 23 9t9 23zm384-864v512q0 26-19 45t-45 19-45-19l-176-176-652 652q-10 10-23 10t-23-10L695 983q-10-10-10-23t10-23l652-652-176-176q-19-19-19-45t19-45 45-19h512q26 0 45 19t19 45z"/></svg>](https://kramdown.gettalong.org/options.html#option-footnote-backlink) ).


result

Footnote markers must be numbers or word characters in square brackets.1 Traditional symbols2 will not work with the kramdown processor.

The backlink character (⮌) is configurable via kramdown.footnote_backlink in _config.yml.3 The programming pages theme chooses unicode code point U+2B8C for this, and supplies its own webfont to ensure cross-platform rendering. Kramdown’s default value is U+21A9 (↩).4

Footnotes are collected and all rendered at the end of the page, with the optional backlink character linking back to the citing text.

Rules

Use three consecutive hyphens (-), asterisks (*), or underscores (_), on a line alone.

markdown

---
***
___


result

Emoji

The jemoji plugin must be activated to enable emoji rendering. Plugins are specified in _config.xml.

Place an emoji id inside colons (:id:). Reference an emoji cheat sheet for a full list of ids.

markdown

:golf::clap:
{:.ui.huge}


result

:golf::clap:

Icons

There is no markdown shortcut for icons, but the theme provides a liquid macro for embedding svg icons that have been defined in _data/svg_icons.yml.

Users may also define icons of their own, simply by adding additional icon data files under _data/icons/.

Format: {% include icon.liquid id='star' %} will render as:

The following icons were loaded during the building of this site:

  custom
external-link
lightbulb-outline
star
  theme
bars
cc-by
cc-cc
check-circle
chevron-right
exclamation-circle
exclamation-triangle
file-outline
flow-line
flow-tree
folder-outline
home
info-circle
interface
magnifier
plus-square-outline

See also Emoji as another way to insert pictograms.

Messages

Sized and/or semantically color-coded message blocks can be defined by leveraging the block Inline Attribute List in kramdown, and the message element from Semantic UI. Size and type can be used apart or together. Icons are optional.

Format: {:.ui.<size|type>.message}, where size is any of:

  • mini
  • tiny
  • small
  • large
  • big
  • huge
  • massive

and type is any of:

  • success
  • info
  • warning
  • error

Sized message

markdown

This text will appear as a **<size>** message. :speech_balloon:
{:.ui.huge.message}


result

This text will appear as a mini message. :speech_balloon:

This text will appear as a tiny message. :speech_balloon:

This text will appear as a small message. :speech_balloon:

This is a plain message with no size specified. :speech_balloon:

This text will appear as a large message. :speech_balloon:

This text will appear as a big message. :speech_balloon:

This text will appear as a huge message. :speech_balloon:

This text will appear as a massive message. :speech_balloon:

Success message

markdown

<span>{% include icon.liquid id='check-circle' %} <b>Success</b></span><br> This text will appear in a big success block with an icon.
{:.ui.big.success.message}


result

Success
This text will appear in a big success block with an icon.

Info message

markdown

<span>{% include icon.liquid id='info-circle' %} <b>Info</b></span><br> This text will appear in an info block with an icon.
{:.ui.info.message}


result

Info
This text will appear in an info block with an icon.

Warning message

markdown

<span>{% include icon.liquid id='exclamation-triangle' %} <b>Warning</b></span><br> This text will appear in a warning block with an icon.
{:.ui.warning.message}


result

Warning
This text will appear in a warning block with an icon.

Error message

markdown

<span>{% include icon.liquid id='exclamation-circle' %} <b>Error</b></span><br> This text will appear in an error block with an icon.
{:.ui.error.message}


result

Error
This text will appear in an error block with an icon.

References

view the source for this page at sampler.md.
it is more complicated than typical, in order to format the source and result blocks nicely.



footnotes

  1. A footnote marker can be created by placing the footnote name in square brackets. The footnote name has to start with a caret (^), followed by a word character or a digit and then optionally followed by other word characters, digits or dashes. For example: This is some text.[^1]. Other text.[^footnote]. (from: Kramdown syntax documentation ). ⮌

  2. Typographical devices such as the asterisk (*) or dagger (†) may also be used to point to footnotes; the traditional order of these symbols in English is *, †, ‡, §, ‖, ¶. (from: Wikipedia description of footnotes ). ⮌

  3. footnote_backlink defines the text that will link back to the footnote marker. The footnote backlink is just text, so any special HTML characters will be escaped. If the footnote backlink text is an empty string, no footnote backlinks will be generated. (from: Kramdown configuration options ). ⮌

  4. Default value for footnote_backlink is &8617;, i.e. unicode codepoint U+21A9. It can be set to any text, or the empty string to disable (from: Kramdown syntax documentation ). ⮌

programming pages 2020 pixeldroid
https://github.com/pixeldroid/programming-pages
programming pages theme v0.5.22 (https://github.com/pixeldroid/programming-pages)