Skip to main content

Docusaurus

Page Setup​

Development and Hosting is trivial. Docusaurus comes with very sensible defaults and can be easily extended. Regular React code and be combined with easy to write markdown.

Vercel with its hobby plan supports Docusaurus v2 out of the box and for free. Just login, connect your repository and add a custom domain.

Done.

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

Plugins​

List here https://docusaurus.io/community/resources>.

Mermaid Diagrams​

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

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:

And as a success variant without a closable x:

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.");
}