Docusaurus

Page Setup

Development and hosting are straightforward. Docusaurus comes with sensible defaults, can be extended easily, and lets you mix React components with Markdown or MDX.

Vercel can host a Docusaurus 3 site without extra setup. Connect your repository, configure the build command, and add a custom domain if you need one.

Done.

Search

Use the official Algolia / DocSearch integration. Alternatively use this plugin: https://github.com/lelouch77/docusaurus-lunr-search

Using Infima Styling

Infima Components

Docusaurus comes with the Infima Styling Library by default. Therefore, we can just "copy paste" component examples into .jsx and .mdx pages.

Here is an example alert:

This is a primary alert. You should probably pay attention to it.

And as a success variant:

This is a success alert. Everything worked as expected.

Code Fence Line Highlighting

To highlight a specific line, specify the line-range in the code fences' title line

code fence block

```rust {2} title="main.rs"
fn main() {
    println!("This line is highlighted.");
}
```

main.rs

fn main() {
    println!("This line is highlighted.");
}

This also works with a number range

code fence block

```rust {2-3} title="main.rs"
fn main() {
    println!("This line is highlighted.");
    println!("This line is also highlighted.");
}
```

main.rs

fn main() {
    println!("This line is highlighted.");
    println!("This line is also highlighted.");
}