Which UI do you use?

Custom UI

Pre built UI

caution

Changes in the variable configs only take effect when the plugin is loaded into docusaurus the first time, this means that changing the config will require restarting the docusarus build if you are running npm run start

• In Header elements
• In code blocks
• In Admonitions
• In normal markdown elements
• In React Components

In Header elements

Config

{
    "change_me": {
        "headerVariable": "Variable in header"
    }
}

Usage

# H4: ^{variableName}

Sample

H4: Variable in header

In code blocks

Config

{
    "change_me": {
        "codeBlockContent": "Variable value",
        "codeBlockTitle": "Custom Code Block Title"
    }
}

Usage

```markdown
var someVariable = "^{variableName}"
```

```markdown title="^{variableName}"
let test = "Test"
```

Sample

var someVariable = "Variable value"

Custom Code Block Title

let test = "Test"

In Admonitions

Config

{
    "change_me": {
        "admonitionText": "This is text inside an admonition"
    }
}

Usage

:::important
^{variableName}
:::

Sample

important

This is text inside an admonition

In normal markdown elements

{
    "change_me": {
        "markdownText": "Some markdown text",
        "markdownPartialLinkText": "somemarkdownlink",
        "markdownLink": "https://supertokens.com",
        "markdownBullet": "Markdown bullet"
    }
}

[Link1](https://supertokens.com)
[Link2](https://somelink/somemarkdownlink)

In normal text: Some markdown text

- In bullet points
- Markdown bullet

In React Components

{
    "change_me": {
        "reactTabContent": "Tab value",
        "reactTabsDefaultValue": "orange"
    }
}

Usage

```tsx
// As content for a component
<Tabs
    groupId="fruits"  
    defaultValue="apple"
    values={[
    {label: 'Apple 2', value: 'apple'},
    {label: 'Orange 2', value: 'orange'},
    {label: 'Banana 2', value: 'banana'},
    ]}>
    <TabItem value="apple">^{variableName} 🍎</TabItem>
    <TabItem value="orange">This is an orange 🍊</TabItem>
    <TabItem value="banana">This is a banana 🍌</TabItem>
</Tabs>

// As props for a component
<Tabs
    groupId="fruits"  
    defaultValue="^{variableName}"
    values={[
    {label: 'Apple 2', value: 'apple'},
    {label: 'Orange 2', value: 'orange'},
    {label: 'Banana 2', value: 'banana'},
    ]}>
    <TabItem value="apple">This is an apple 🍎</TabItem>
    <TabItem value="orange">This is an orange 🍊</TabItem>
    <TabItem value="banana">This is a banana 🍌</TabItem>
</Tabs>
```

Sample

Apple 2

Tab value 🍎

Orange 2

This is an orange 🍊

Banana 2

This is a banana 🍌

Apple 2

This is an apple 🍎

Orange 2

This is an orange 🍊

Banana 2

This is a banana 🍌