Markdown

Markdown in Observable Framework follows the CommonMark spec and is powered by markdown-it. We also feature live JavaScript as either fenced code blocks (```js) or inline expressions (${…}), and HTML in Markdown, and front matter for page-level configuration. If you don’t already know Markdown, please see GitHub’s guide to Markdown for an introduction.

Here are a few examples of Markdown content to get you started.

Front matter

---
title: My favorite page
toc: false
---

Headings

# A first-level heading
## A second-level heading
### A third-level heading

Styling

this is **bold** text
this is __bold__ text
this is *italic* text
this is _italic_ text
this is ~~strikethrough~~ text
this is `monospaced` text
> this is quoted text

Tables

Column 1   | Column 2     | Column 3
---------- | ------------ | ----------
Cell 1-1   | Cell 2-1     | Cell 3-1
Cell 1-2   | Cell 2-2     | Cell 3-2

Align left | Align center | Align right
:--------- | :----------: | ----------:
Cell 1-1   |   Cell 2-1   |    Cell 3-1
Cell 1-2   |   Cell 2-2   |    Cell 3-2

Lists

- red
- green
- blue
  - light blue
  - dark blue

1. first
1. second
1. third
   1. third first
   1. third second

Links

<https://example.com>
[relative link](./dashboard)
[external link](https://example.com)
[external link](<https://en.wikipedia.org/wiki/Tar_(computing)>)

Images

![A happy kitten](https://placekitten.com/200/300)

HTML

You can write HTML directly into Markdown. HTML is useful for greater control over layout, say to use CSS grid for a responsive bento box layout in a dashboard, or adding an external stylesheet via a link element. For example, here is an HTML details element:

<details>
  <summary>Click me</summary>
  This text is not visible by default.
</details>

This produces:

In Markdown, blank lines denote separate HTML blocks; be sure to avoid blank lines if you want to treat a chunk of HTML as a single block. For example, write this:

<!-- 👍 one HTML block -->
<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

Don’t write this:

<!-- 👎 three HTML blocks -->
<ul>

  <li>one</li>
  <li>two</li>
  <li>three</li>

</ul>

In the latter case, the li elements become top-level and wrapped in a span, rather than children of the ul.

Also see Hypertext Literal for generating dynamic HTML in JavaScript.