Solutions. For Life.

Markdown Style Demo and Reference

posted on: Invalid Date

last updated: 6/13/2022, 8:24:59 PM

by: Samuel C Tyler

7 min read

A demonstration of the markdown rendering of this blog. Used for theming and a TODO list of features. Most of this is from the markdown-it demo, with which I am trying to get 100% compatibility.

On This Page

โœ… Headings

h1 Heading ๐Ÿ˜Ž

h2 Heading

h3 Heading

h4 Heading

h5 Heading
h6 Heading
# h1 Heading 8-)
## h2 Heading
### h3 Heading
#### h4 Heading
##### h5 Heading
###### h6 Heading

โœ… Table of Contents

You can add a table of contents to each page by adding a header with the following names:

  • TOC
  • Table of Contents
  • Contents
  • On This Page

Only the first one will become the header for the page.

โœ… Horizontal Rules




___

---

***

โœ… Typographic replacements

ยฉ ยฉ ยฎ ยฎ โ„ข โ„ข โ„— โ„— ยฑ

test.. testโ€ฆ testโ€ฆ test?โ€ฆ test!โ€ฆ

!!! ??? , โ€“ โ€”

โ€œSmartypants, double quotesโ€ and โ€˜single quotesโ€™

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

**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.

> 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!
+ 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
  1. You can use sequential numbersโ€ฆ
  2. โ€ฆor keep all the numbers as 1.

Start numbering with offset:

  1. foo
  2. bar
1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa


1. You can use sequential numbers...
1. ...or keep all the numbers as `1.`

Start numbering with offset:

57. foo
1. bar

๐ŸŒ— Code

Inline code โœ…

Indented code โŒ [doesnโ€™t work. use fenced code blocks]

// 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));
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

``` js
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.
| 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

[link text](http://dev.nodeca.com)

[link with title](http://nodeca.github.io/pica/demo/ "title text!")

Autoconverted link https://github.com/nodeca/pica

๐ŸŒ— Images [needs reference/footnote support]

Minion Stormtroopocat

Like links, Images also have a footnote style syntax

Alt text

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

![Minion](https://octodex.github.com/images/minion.png)
![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")

Like links, Images also have a footnote style syntax

![Alt text][id]

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

[id]: https://octodex.github.com/images/dojocat.jpg  "The Dojocat"

Plugins

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

โœ… Emojies

Classic markup: ๐Ÿ˜‰ :crush: ๐Ÿ˜ข :tear: ๐Ÿ˜† ๐Ÿ˜‹

Shortcuts (emoticons): ๐Ÿ˜ƒ ๐Ÿ˜ฆ ๐Ÿ˜Ž ๐Ÿ˜‰

> Classic markup: :wink: :crush: :cry: :tear: :laughing: :yum:
>
> Shortcuts (emoticons): :-) :-( 8-) ;)

โœ… Subscript / Superscript

  • 19th
  • H2O

โœ… ins

Inserted text

โœ… mark

Marked text

Automatically generate links.

www.example.com, https://example.com, and contact@example.com

www.example.com, https://example.com, and contact@example.com

โœ… Task Lists

  • Task 1
  • Task 2
    • Subtask 2.1
* [ ] Task 1
* [x] Task 2
  * [X] Subtask 2.1

๐ŸŒ— Checkboxes [indeterminate not working]

Here is a checkbox:

Not Done

Done

Done partially done

Not Done

Done

Done partially done

:::check disabled::: Not Done

:::check disabled checked::: Done 

:::check disabled indeterminate::: Done partially done

:::check::: Not Done

:::check checked::: Done 

:::check indeterminate::: Done partially done

โŒ Footnotes

Footnote 1 link[^first].

Footnote 2 link[^second].

Inline footnote^[Text of inline footnote] definition.

Duplicated footnote reference[^second].

[^first]: Footnote can have markup

and multiple paragraphs.

[^second]: Footnote text.

โŒ Definition lists

Term 1 : Definition 1 with lazy continuation.

Term 2 with inline markup : Definition 2

Third paragraph of definition 2.

Compact style:

Term 1 ~ Definition 1

Term 2 ~ Definition 2a ~ Definition 2b

โŒ Abbreviations

This is HTML abbreviation example.

It converts โ€œHTMLโ€, but keep intact partial entries like โ€œxxxHTMLyyyโ€ and so on.

*[HTML]: Hyper Text Markup Language

โŒ Custom containers

::: warning here be dragons :::

โœ… Emoji Support

Github-style emojis are supported via node-emoji. List of emojis. Emoticons are supported via emoticons.

โœ… Latex Support

You can write html, that contains expressions like this: x2+5x ^ 2 + 5 inside them. As you probably know. You also can write expressions in display mode as follows:

โˆ‘i=1n(xi2โˆ’xโ€พ2)\sum_{i=1}^n(x_i^2 - \overline{x}^2)

In first case you will need to use $expression$ and in the second one $$expression$$. To escape the $ symbol itโ€™s mandatory to write as follows: \$. To use display mode, the block MUST begin with $$ and end with $$.

You can write html, that contains expressions like this: 
$x ^ 2 + 5$ inside them. As you probably know. You also can write 
expressions in display mode as follows: 
$$
sum_{i=1}^n(x_i^2 - overline{x}^2)
$$
In first case you will need to use $expression$ and in the 
second one $$expression$$. To escape the $ symbol it's
mandatory to write as follows: \$. To use `display` mode, the block 
MUST begin with $$ and end with $$.

๐ŸŒ— Embedding

This is a tweet:

This is a vimeo video:

This is an instagram post:

This is a youtube video:

This is a photo from flickr:

Leiria by night

This another photo, from 23hq:

Check it out ๐Ÿ‘†

โŒ Flowcharts (with mermaid.js)

%% Waiting for the following chart to load...
graph TB;
  db?{database needs to be changed?}
  done[Done.]
  db["Run database migration (rails migration)"]
  data?{data need to be changed?}
  data["run script to change data (one-shot)"]
  db_cleanup?{database needs cleanup?}
  db? -- yes --> db
  db? -- no  --> done
  db  --> data?
  data? -- no -->done
  data? -- yes --> data
  data --> db_cleanup?
  db_cleanup? -- yes --> db
  db_cleanup? -- no --> done
```mermaid
%% Waiting for the following chart to load...
graph TB;
  db?{database needs to be changed?}
  done[Done.]
  db["Run database migration (rails migration)"]
  data?{data need to be changed?}
  data["run script to change data (one-shot)"]
  db_cleanup?{database needs cleanup?}
  db? -- yes --> db
  db? -- no  --> done
  db  --> data?
  data? -- no -->done
  data? -- yes --> data
  data --> db_cleanup?
  db_cleanup? -- yes --> db
  db_cleanup? -- no --> done
```

โŒ Return to Top with Optional Sound

Adding a button to return to the top of the page. Optionally plays a sound. The nosound attribute is ideally set via a switch somewhere on the page.

[Not started yet!]

<ToTop sound="/music/goingup.mp3" nosound/>

โŒ Right Panel

โŒ Tag Cloud

Add a tag cloud component, mainly for the right column. Sort by most popular first. Use slot props so we have can use slots to render it.

[Not started yet!]

<TagCloud let:tags={tags}>
  {#each tags as tag}
    <a class="bg-secondary text-onSecondaryBg px-2" href="/tags/{tag}">{tag}</a>
  {/each}
</TagCloud>

โŒ Mobile-first Page Navigation in the Left column