Using Markdown

All pages are primarily written in Markdown. Everything below renders live on this page; it´s tested and verified.

Syntax-highlighted code blocks ​

We're using grammar-based tokenization¹ which works across the ~65 languages bundled with Bark. A few examples:

public sealed record Order(string Id, decimal Total)
{
    public bool IsLarge => Total > 1000m;
}

def fibonacci(n: int) -> int:
    if n < 2:
        return n
    return fibonacci(n - 1) + fibonacci(n - 2)

public class Greeter {
    public String greet(String name) {
        return "Hello, " + name + "!";
    }
}

fn main() {
    let nums = vec![1, 2, 3];
    println!("{:?}", nums.iter().sum::<i32>());
}

SELECT id, title FROM pages WHERE published = true ORDER BY title;

Use the real language id (csharp, not c#); the shorthand doesn't work the same.

Title bars ​

Add [filename] to the fence info string to show a title bar instead of the language badge:

```json [src/appsettings.json]
{
    "Hello": "world"
}
```

Renders as:

{
    "Hello": "world"
}

Line highlighting ​

Highlight specific lines with {n,m-o} in the fence info string:

function add(a: number, b: number) {
  return a + b; // this line is highlighted
}

Or mark a line with a trailing comment. Bark strips the marker and keeps the highlight:

const cache = new Map();
const ttlMs = 60_000;

Diff notation ​

const port = 3000;
const port = process.env.PORT ?? 3000;

Focus ​

function setup() {
  loadConfig();
  startServer();
}

Line numbers ​

const a = 1;
const b = 2;
const c = a + b;

Code groups ​

This example:

::: code-group
```sh [npm]
npm install
```
```sh [pnpm]
pnpm install
```
```sh [c# icon:sharp]
dotnet restore
```
:::

Renders as:

npmpnpmc#

sh

npm install

sh

pnpm install

sh

dotnet restore

Use [label] for the tab title. If the label matches a name on Simple Icons, its icon will display automatically. You can a specific icon with [label icon:slug], e.g. [csharp icon:dotnet].

Alerts ​

Use these for quick highlights within your prose. These can be spawned with the syntax > [!TYPE]:

Custom containers ​

These are blocks starting and ending with ::: follewed by either note, tip, warning, danger or details. Can be combined with Click to expand for expanding blocks.

Custom containers are sugar over a plain <div class="TYPE custom-block">. Markdig passes raw HTML straight through, so you can write the div yourself when you need something the shorthand can't do, like a one-off inline style:

<div class="tip custom-block">

Just want to try it out? Skip to the [Quickstart](../getting-started).

</div>

Renders as:

Though make sure to leave a blank line after the opening <div> and before the closing </div>. Without it, the Markdown renderer treats the inside as raw HTML instead of Markdown and your [links](...) won't render.

Badges ​

Small inline labels, the kind you'd drop next to a heading to flag "new in 3.0" or an unstable API. Write them as plain HTML, Bark passes unrecognized tags straight through and styles <badge> itself:

Hello world <Badge type="tip">3.0+</Badge>

Renders as:

Hello world 3.0+

Four types, same colors as the alert blocks above: info (blue), tip (green, default), warning (amber), danger (red).

info tip warning danger

Definition lists ​

A definition list pairs terms with their meanings. Use a colon : followed by a space to mark each definition.

Term 1

Definition of term 1.

Term 2

Definition of term 2.

Another definition of term 2.

Math ​

Inline: $E = mc^2$

Block:

Citations ​

Wrap your text in double quotes "" to create a citation element:

The Art of Computer Programming

Standard Markdown ​

Tables, task lists, footnotes, and alert blocks all work too:

• Done
• Not done yet

A sentence with a footnote.²

Link attributes ​

Append {target="_blank" rel="noopener"} after a link to open it in a new tab:

[Bark on GitHub](https://github.com/org/bark){target="_blank" rel="noopener"}