markdown-pages
Static Site Generator for Markdown

Page contents

Elements

A list of all the elements that can be used in Markdown documents to show content. Read the tutorial first if you want to know how they are used to generate web pages.

Text

**Bold**, *italics* or ~~strikethrough~~, with multiple lines.\
Subscript H~2~O or superscript X^2^.

Bold, italics or strikethrough, with multiple lines.
Subscript H2O or superscript X2.

Headings

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Quote

> A section that is quoted from another source.
> The continuation of the text.

A section that is quoted from another source. The continuation of the text.

Definition

Term name:
: Term definition.
Term name:
Term definition.

List

- Item A
- Item B
- Item C

Ordered list

1. First item
2. Second item
3. Third item
  1. First item
  2. Second item
  3. Third item

Checklist

- [x] Task 1
- [x] Task 2
- [ ] Task 3
[Link](elements.html) to this page.

Link to this page.

Image

![Small image depicting a page.](assets/favicon.ico "Page icon")
Small image depicting a page. 
This is an inline image: ![Small image depicting a page.](assets/favicon.ico "Page icon").

This is an inline image: Small image depicting a page..

The title at the end, "Page icon", is optional and can be used for styling.

img[title$="icon"] {
  border: 1px solid black;
}

Table

| Left-aligned | Center-aligned | Right-aligned | 
| :----------- | :------------: | ------------: |
| 10           | Red, blue.     | Done          |
| 256          | Red, yellow.   | Pending       |
Left-aligned Center-aligned Right-aligned
10 Red, blue. Done
256 Red, yellow. Pending

Separator

---

See the horizontal rules between the header, content and footer of this page.

Footnote

Here's a sentence with a footnote, the footnote itself must be defined at
the bottom of the document. [^1]

Here’s a sentence with a footnote, the footnote itself must be defined at the bottom of the document. 1

[^1]: This is the footnote itself.

Code

This is an inline code block: `user = "dev"`.

This is an inline code block: user = "dev".

In the pre-installed template, code highlighting is done by Prism.

```
<!DOCTYPE html>
<html>
  <head>
    <style>
      h1 {
        color: blue;
      }
    </style>
  </head>
  <body>
    <h1>Code highlighter</h1>
    <script>
      for (let i = 0; i < 10; i++) {
        alert(i);
      }
    </script>
  </body>
</html>
```
<!DOCTYPE html>
<html>
  <head>
    <style>
      h1 {
        color: blue;
      }
    </style>
  </head>
  <body>
    <h1>Code highlighter</h1>
    <script>
      for (let i = 0; i < 10; i++) {
        alert(i);
      }
    </script>
  </body>
</html>

The language can be specified in the first line, like ```markup. The available languages are markup, shown above and by default, bash, css, javascript, markdown, python and yaml. New languages can be added to the module list of the page metadata.

module:
  - https://esm.sh/prismjs/components/prism-rust.min.js

Math

$a^2 + b^2 = c^2$

$v(t) = v_0 + \frac{1}{2}at^2$

$\gamma = \frac{1}{\sqrt{1 - v^2/c^2}}$  

$\int_{0}^{1} x dx = \left[ \frac{1}{2}x^2 \right]_{0}^{1} = \frac{1}{2}$

$e^x = \sum_{n=0}^\infty \frac{x^n}{n!} = \lim_{n\rightarrow\infty} (1+x/n)^n$

a2+b2=c2a^2 + b^2 = c^2

v(t)=v0+12at2v(t) = v_0 + \frac{1}{2}at^2

γ=11−v2/c2\gamma = \frac{1}{\sqrt{1 - v^2/c^2}}

∫01xdx=[12x2]01=12\int_{0}^{1} x dx = \left[ \frac{1}{2}x^2 \right]_{0}^{1} = \frac{1}{2}

ex=∑n=0∞xnn!=limn→∞(1+x/n)ne^x = \sum_{n=0}^\infty \frac{x^n}{n!} = \lim_{n\rightarrow\infty} (1+x/n)^n

HTML

Text with <small>smaller</small> text inside.

<div>
  <p>All content inside an HTML element must be HTML.</p>
</div>

Text with smaller text inside.

All content inside an HTML element must be HTML.