Let’s try what markdown offers in context of Eleventy static site generator.

Markdown in Eleventy is parsed by markdown-it. It can be extended by a number of plugins.

The first example is a table of content—it is a list that consists of headings on level 2. The plugin for this is markdown-it-table-of-contents.

Table of content

This is a heading h2

This is a heading h3

This is a heading h4

This is a heading h5

Text

Paragraphs in markdown have to be divided by a blank line.

This paragraph contains multiple lines in source code, because I like it more this way.

Default markdown behavior is not inserting <br> on places of newlines. This is the behavior of html, too. It is better because there is less ambiguity in source code and you can let your formatter do it’s work.

Text elements

bold italic strikethrough code

Quote

const foo = "more code"

(Code block with language specified as js.)

Lists

  • First
    • Alpha
    • Beta
  • Second
  1. First
    • Alpha
    • Beta
  2. Second

Automatic conversions

Links like example.com are automatically converted.

You can use two hyphens to produce an n-dash, e.g. 9–12. Or three hyphens—to create m-dash.

“Quotation marks” and ellipsis is supported too…

Arrows: rain ➙ wet

Extras

Extra markdown functionality is provided either by embedded or external markdown-it plugins.

Tables

Memory Latency (ns)
L1 cache 0.5
L2 cache 7
Main memory 100

Source: Latency Numbers Every Programmer Should Know

Footnotes

You can specify references to footnotes by writing something like this inside markdown: [1]

[^markdown-capabilities]

And somewhere after that:

[^markdown-capabilities]: [markdown capabilities](https://github.com/markdown-it/markdown-it#syntax-extensions)

Anchors

Hover over a heading, click the # sign and use targeted url…

Figures

Look, this is a <figure> with caption.

Box with title App depend on a bunch of Libs

My custom plugins

You can write your own plugin for markdown-it—it is one function.

Code blocks with title

This line

```html [Elaborate html document]
...html code...

produces

Elaborate html document
<html>
  <body>
    <h1>Page</h1>
  </body>
</html>

Mermaid

Role based toggling

Executable code blocks

Using klipse.

const t = window.performance.timing
const duration = t.domContentLoadedEventEnd - t.navigationStart
;`DOM loaded after ${duration} ms`

      const t = window.performance.timing
const duration = t.domContentLoadedEventEnd - t.navigationStart
;`DOM loaded after ${duration} ms`
      
HTML and CSS
<style>
  .my-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 120px;
  }
</style>
<p class="my-text">Once upon a time, there was a man</p>

      <style>
  .my-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 120px;
  }
</style>
<p class="my-text">Once upon a time, there was a man</p>
      
const array = [1, 2, 3]
let sum1 = array.reduce((acc, curr) => acc + curr, 0)
let sum2 = 0
for (const n of array) {
  sum2 += n
}

console.log(sum1)
console.log(sum2)

      const array = [1, 2, 3]
let sum1 = array.reduce((acc, curr) => acc + curr, 0)
let sum2 = 0
for (const n of array) {
  sum2 += n
}

console.log(sum1)
console.log(sum2)

Notes

  1. markdown capabilities ↩︎