Skip to main content

Docusaurus Cheetsheet

Algolia Docsearch Crawler​

tip

docker Crawler​

sudo docker run -it --env-file=.env -e "CONFIG=$(cat ./config.json | jq -r tostring)" algolia/docsearch-scraper

This command must only be used inside the huslo-docs folder not inside huslo-docs/my-webiste

Adding CAUTION:​

:::caution

Replace this line with your OWN CAUTION text...

:::
  • Use The above text to make👇
caution

Replace this line with your OWN CAUTION text...

Adding TIP:​

:::tip

Replace this line with your OWN TIP text...

:::
  • Use The above text to make👇
tip

Replace this line with your OWN TIP text...

Adding IMPORTANT:​

:::important

Replace this line with your OWN IMPORTANT text...

:::
  • Use The above text to make👇
info

Replace this line with your OWN IMPORTANT text...

Adding NOTE:​

:::note

Replace this line with your OWN NOTE text...

:::
  • Use The above text to make👇
note

Replace this line with your OWN NOTE text...

Adding Tabs for Multi Languages​

import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";

<Tabs
  defaultValue="cpp"
  values={[
    { label: 'C++', value: 'cpp', },
    { label: 'Java', value: 'java', },
    { label: 'Python', value: 'py', },
  ]
}>


<TabItem value="cpp">

```cpp
#include<iostream>
using namespace std;

// C++ Code
```

</TabItem>


<TabItem value="java">

```java
class HelloWorld {
  public static void main(String args[]) {
    System.out.println("Hello, World");
  }
}
```

</TabItem>


<TabItem value="py">

```py
def hello_world():
  print 'Hello, world!'
```

</TabItem>

</Tabs>

Adding title to Code Blocks​

```css {title="This is the title here"}

- Demo Code

```

Add _category.json​

VS-Code Snippet: cat

"docusaurus _category.json": {
  "prefix": "cat",
  "body": [
    "{",
    "  \"label\": \"Problem Solving Paradigms\",",
    "  \"position\": 2",
    "}"
  ],
  "description": "docusaurus _category.json"
}

Adding line highlight to Code Blocks​

use {1,5,9-10} -> line numbers after the language name like java below:

```java {1}

Adding Line Numbers to Code Blocks​

Using Now​

note
src/css/custom.css
.prism-code {
  counter-reset: line-number;
}

.prism-code .token-line::marker {
  color: var(--ifm-color-gray-600);
  content: counter(line-number);
}

.prism-code .token-line {
  counter-increment: line-number;
  display: list-item;
  padding-left: var(--ifm-pre-padding);
  margin-left: var(--ifm-global-spacing);
  opacity: 0.1;
}

Other variants​

info
/* Edit the `src/css/custom.css` file and add the following styles */

/*
 * Reset the line-number counter for each .prism-code scope
 */
.prism-code {
  counter-reset: line-number;
}

/*
 * Notice the chained .language-ts class name to .prism-code
 * You can chain more languages in order to add line numbers
 */
.prism-code.language-ts .token-line::before {
  counter-increment: line-number;
  content: counter(line-number);
  margin-right: calc(var(--ifm-pre-padding) * 1.5);
  text-align: right;
  min-width: 2.5rem;
  display: inline-block;
  opacity: 0.3;
  position: sticky;
  left: var(--ifm-pre-padding);
}
/* Adding line numbers to more languages by editing line 14 */

.prism-code.language-ts .token-line::before,
.prism-code.language-bash .token-line::before {
  /* Above Code */
}

/* Support all languages: */
.prism-code[class*="language-"] .token-line::before {
  /* Above Code */
}
info

A variant with display: list-item:​

@counter-style codeblock-line {
  system: extends decimal;
  suffix: "";
}

.prism-code {
  list-style: codeblock-line;
}

.prism-code .token-line::marker {
  color: var(--ifm-color-gray-600);
}

.prism-code .token-line {
  display: list-item;
  padding-left: var(--ifm-pre-padding);
  margin-left: var(--ifm-global-spacing);
}

Add syntax highlighting for other languages​

{"docusaurus.config.js"}
themeConfig:
    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
    ({
      prism: {
        theme: lightCodeTheme,
        darkTheme: darkCodeTheme,
        additionalLanguages: [`java`, `dart`],
      },
      // ...
      // ..
      // .