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

The front matter supports the following options:

• title — the page title; defaults to the (first) first-level heading of the page, if any
• toc — if false, disables the table of contents
• index — whether to index this page if search is enabled; defaults to true for listed pages
• keywords - additional words to index for search; boosted at the same weight as the title
• draft — whether to skip this page during build; drafts are also not listed in the default sidebar
• sql — table definitions for SQL code blocks

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:

Also see Hypertext Literal for generating dynamic HTML in JavaScript.