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