### Setup and Run Docsify Locally

Source: https://github.com/docsifyjs/docsify/blob/develop/CONTRIBUTING.md

Install dependencies and start the development server for contributing. This command prepares your local environment for making changes.

```bash
npm install && npm run dev
```

--------------------------------

### Install Dependencies

Source: https://github.com/docsifyjs/docsify/wiki/Release

Installs all necessary packages for the Docsify project. This should be run after cloning the repository.

```bash
npm i 
```

--------------------------------

### Inline Code Example

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/ui-kit.md

Demonstrates the usage of inline code formatting.

```text
This is `inline code`
```

--------------------------------

### Serve Docsify Site Locally

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/quickstart.md

Start a local development server to preview your Docsify site. Access it at http://localhost:3000.

```bash
docsify serve docs
```

--------------------------------

### Install Docsify CLI Globally

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/quickstart.md

Install the docsify-cli package globally to manage your Docsify projects.

```bash
npm i docsify-cli -g
```

--------------------------------

### Example: Add a page footer

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/write-a-plugin.md

This example demonstrates how to use the `afterEach` lifecycle hook to append a custom footer to every page.

```javascript
window.$docsify = {
  plugins: [
    function pageFooter(hook, vm) {
      const footer = /* html */ `
        <hr/>
        <footer>
          <span><a href="https://github.com/QingWei-Li">cinwell</a> &copy;2017.</span>
          <span>Proudly published with <a href="https://github.com/docsifyjs/docsify" target="_blank">docsify</a>.</span>
        </footer>
      `;

      hook.afterEach(html => {
        return html + footer;
      });
    },
  ],
};
```

--------------------------------

### Basic Button Example

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/ui-kit.md

Shows the default appearance of a button element.

```html
<button>Button</button>
```

--------------------------------

### Blockquote Example

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/ui-kit.md

Demonstrates a basic blockquote. Use blockquotes to highlight quoted text.

```markdown
> Cras aliquet nulla quis metus tincidunt, sed placerat enim cursus. Etiam
> turpis nisl, posuere eu condimentum ut, interdum a risus. Sed non luctus mi.
> Quisque malesuada risus sit amet tortor aliquet, a posuere ex iaculis. Vivamus
> ultrices enim dui, eleifend porttitor elit aliquet sed.
> 
> _- Quote Source_
```

--------------------------------

### Callout Examples

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/ui-kit.md

Demonstrates various types of callouts, including caution, important, note, tip, and warning.

```markdown
> [!CAUTION]
> **Caution** callout with `inline code`.
```

```markdown
> [!IMPORTANT]
> **Important** callout with `inline code`.
```

```markdown
> [!NOTE]
> **Note** callout with `inline code`.
```

```markdown
> [!TIP]
> **Tip** callout with `inline code`.
```

```markdown
> [!WARNING]
> **Warning** callout with `inline code`.
```

--------------------------------

### Create Basic Sidebar

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/adding-pages.md

Create a `_sidebar.md` file in your docs directory to define the sidebar navigation. This example shows a simple list of links.

```markdown
<!-- docs/_sidebar.md -->

- [Home](/)
- [Page 1](page-1.md)
```

--------------------------------

### Install plugin from a separate file

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/write-a-plugin.md

A plugin can be stored in a separate JavaScript file and installed using a standard `<script>` tag. This method ensures the plugin is added to Docsify's plugin array.

```javascript
// docsify-plugin-myplugin.js

{
  function myPlugin(hook, vm) {
    // ...
  }

  // Add plugin to docsify's plugin array
  window.$docsify = window.$docsify || {};
  $docsify.plugins = [...($docsify.plugins || []), myPlugin];
}
```

```html
<script src="docsify-plugin-myplugin.js"></script>
```

--------------------------------

### Apply Prism Themes for Dark and Light Modes

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/language-highlight.md

This example shows how to apply Prism themes specifically for dark mode and light mode using media queries.

```html
<!-- Dark mode only -->
<link
  rel="stylesheet"
  media="(prefers-color-scheme: dark)"
  href="//cdn.jsdelivr.net/npm/prism-themes@1/themes/prism-one-dark.min.css"
/>

<!-- Light mode only -->
<link
  rel="stylesheet"
  media="(prefers-color-scheme: light)"
  href="//cdn.jsdelivr.net/npm/prism-themes@1/themes/prism-one-light.min.css"
/>
```

--------------------------------

### Vue Methods

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/vue.md

Define methods to perform actions, such as responding to user events. This example defines a 'hello' method that shows an alert.

```js
{
  data() {
    return {
      message: 'Hello, World!'
    };
  },
  methods: {
    hello() {
      alert(this.message);
    }
  },
}
```

--------------------------------

### Dockerfile for Docsify

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/deploy.md

A Dockerfile to build and serve a Docsify site. It installs docsify-cli globally and exposes port 3000.

```dockerfile
FROM node:latest
LABEL description="A demo Dockerfile for build Docsify."
WORKDIR /docs
RUN npm install -g docsify-cli@latest
EXPOSE 3000/tcp
ENTRYPOINT docsify serve .
```

--------------------------------

### Nested Blockquote Example

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/ui-kit.md

Illustrates how to create nested blockquotes for hierarchical quoting.

```markdown
> Level 1
> > Level 2
> > > Level 3
```

--------------------------------

### Button Variants

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/ui-kit.md

Provides examples of different button types including link and input buttons.

```html
<button type="button">Button</button>
<a href="javascript:void(0);" class="button">Link Button</a>
<input type="button" value="Input Button" class="button">
```

```html
<button type="button" class="primary">Button</button>
<a href="javascript:void(0);" class="button primary">Link Button</a>
<input type="button" value="Input Button" class="primary">
```

```html
<button type="button" class="secondary">Button</button>
<a href="javascript:void(0);" class="button secondary">Link Button</a>
<input type="button" value="Input Button" class="secondary">
```

--------------------------------

### Clone Docsify Repository

Source: https://github.com/docsifyjs/docsify/wiki/Release

Use this command to get a local copy of the Docsify repository. Ensure you have SSH keys set up for GitHub.

```bash
git clone git@github.com:docsifyjs/docsify.git
```

--------------------------------

### Apply Prism Themes for Light Mode

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/language-highlight.md

Docsify themes are compatible with Prism syntax highlighting themes. Prism themes must be loaded after Docsify themes. This example applies a light mode theme.

```html
<!-- Light and dark mode -->
<link
  rel="stylesheet"
  href="//cdn.jsdelivr.net/npm/prism-themes@1/themes/prism-one-light.min.css"
/>
```

--------------------------------

### Basic Cover Page Markdown

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/cover.md

Example markdown content for a basic cover page, including a logo, title, description, and links.

```markdown
<!-- _coverpage.md -->

![logo](_media/icon.svg)

# docsify

> A magical documentation site generator

- Simple and lightweight
- No statically built HTML files
- Multiple themes

[GitHub](https://github.com/docsifyjs/docsify/)
[Get Started](#docsify)
```

--------------------------------

### Nginx Configuration for Docsify (History Mode)

Source: https://context7.com/docsifyjs/docsify/llms.txt

Example Nginx configuration for Docsify with HTML5 History API mode. The `try_files` directive ensures that client-side routing works correctly.

```nginx
server {
  listen 80;
  server_name docs.example.com;
  root /var/www/docs;
  index index.html;
  location / {
    try_files $uri $uri/ /index.html;
  }
}
```

--------------------------------

### Nginx Configuration for Docsify (Hash Mode)

Source: https://context7.com/docsifyjs/docsify/llms.txt

Example Nginx configuration for serving Docsify sites using hash-based routing. Ensure the `alias` directive points to your site's root directory.

```nginx
server {
  listen 80;
  server_name docs.example.com;
  location / {
    alias /var/www/docs/;
    index index.html;
  }
}
```

--------------------------------

### Vue Template Syntax Examples

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/vue.md

Utilize Vue's template syntax for conditional rendering, loops, and JavaScript expressions directly within markdown.

```markdown
<!-- Hide in docsify, show elsewhere (e.g. GitHub) -->
<p v-if="false">Text for GitHub</p>

<!-- Sequenced content (i.e. loop)-->
<ul>
  <li v-for="i in 3">Item {{ i }}</li>
</ul>

<!-- JavaScript expressions -->
<p>2 + 2 = {{ 2 + 2 }}</p>
```

--------------------------------

### Add Copy to Clipboard Button to Code Blocks

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/plugins.md

Include this script to add a 'Click to copy' button to all preformatted code blocks. This allows users to easily copy example code from your documentation.

```html
<script src="//cdn.jsdelivr.net/npm/docsify-copy-code/dist/docsify-copy-code.min.js"></script>
```

--------------------------------

### Initialize Docsify Project

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/quickstart.md

Initialize a new Docsify project in a specified directory. This command sets up the basic file structure for your documentation site.

```bash
docsify init ./docs
```

--------------------------------

### Minimal index.html for Docsify

Source: https://context7.com/docsifyjs/docsify/llms.txt

This HTML bootstrap is needed to serve a Docsify site from any static host. All configuration is done in `window.$docsify` before the script is loaded.

```html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
    <!-- Core theme (v5) -->
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@5/dist/themes/core.min.css" />
  </head>
  <body class="loading">
    <div id="app"></div>

    <script>
      window.$docsify = {
        name: 'My Docs',
        repo: 'myorg/myrepo',
        loadSidebar: true,       // loads _sidebar.md
        loadNavbar: true,        // loads _navbar.md
        coverpage: true,         // loads _coverpage.md
        auto2top: true,
        maxLevel: 4,
        subMaxLevel: 2,
        routerMode: 'hash',      // 'hash' | 'history'
      };
    </script>

    <!-- Docsify core -->
    <script src="//cdn.jsdelivr.net/npm/docsify@5"></script>

    <!-- Built-in search plugin -->
    <script src="//cdn.jsdelivr.net/npm/docsify@5/dist/plugins/search.min.js"></script>
  </body>
</html>
```

--------------------------------

### Basic Configuration Object

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/configuration.md

Define basic site properties like the repository and maximum heading level.

```html
<script>
  window.$docsify = {
    repo: 'docsifyjs/docsify',
    maxLevel: 3,
    coverpage: true,
  };
</script>
```

--------------------------------

### Include Core Theme and Add-on CSS

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/themes.md

Load the core theme followed by any desired theme add-ons. Ensure add-ons are loaded after the core theme.

```html
<!-- Core Theme -->
<link rel="stylesheet" href="..." />

<!-- Theme (add-on) -->
<link rel="stylesheet" href="..." />
```

--------------------------------

### HTML Code Block

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/ui-kit.md

Example of an HTML code block for basic HTML structure.

```html
<body>
  <p>Hello</p>
</body>
```

--------------------------------

### JavaScript Code Block

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/ui-kit.md

Example of a JavaScript code block for defining and using a function.

```javascript
const add = (num1, num2) => num1 + num2;
const total = add(1, 2);

console.log(total); // 3
```

--------------------------------

### Run Publish Script

Source: https://github.com/docsifyjs/docsify/wiki/Release

Initiates the publishing process for a new Docsify version to npm. This script will prompt for the version number and handle the release.

```bash
npm run pub
```

--------------------------------

### Build Docker Image

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/deploy.md

Command to build a Docker image for the Docsify site using the specified Dockerfile.

```bash
docker build -f Dockerfile -t docsify/demo .
```

--------------------------------

### Configuration Function with VM Instance

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/configuration.md

Configure Docsify using a function that receives the Docsify VM instance, useful for referencing vm in markdown renderers.

```html
<script>
  window.$docsify = function (vm) {
    return {
      markdown: {
        renderer: {
          code(code, lang) {
            // ... use `vm` ...
          },
        },
      },
    };
  };
</script>
```

--------------------------------

### Vue Data Option

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/vue.md

Define reactive data properties for your Vue components. This example shows how to set a 'message' property.

```js
{
  data() {
    return {
      message: 'Hello, World!'
    };
  }
}
```

--------------------------------

### Using Docsify Global Utilities in a Plugin

Source: https://context7.com/docsifyjs/docsify/llms.txt

Demonstrates how to use `window.Docsify.slugify`, `window.Docsify.get`, and access `vm` properties within a plugin's `doneEach` hook. Ensure this code is placed within a valid Docsify plugin function.

```javascript
// Inside a plugin function:
function myPlugin(hook, vm) {
  hook.doneEach(() => {
    // Slugify a heading string the same way Docsify does
    const slug = window.Docsify.slugify('Hello World!'); // → 'hello-world'

    // Perform a plain XHR GET request (returns a Promise)
    window.Docsify.get('/docs/extra.md', false, { 'x-token': 'abc' })
      .then(text => console.log('Fetched:', text.slice(0, 80)));

    // Access the current Docsify instance
    console.log('Current route:', vm.route.path);
    console.log('Config name:', vm.config.name);
    console.log('Docsify version:', window.Docsify.version);
  });
}
```

--------------------------------

### Manual Docsify Initialization Template

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/quickstart.md

A basic HTML template for manual initialization of Docsify. Includes core theme and Docsify.js script.

```html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

    <!-- Core Theme -->
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@5/dist/themes/core.min.css">
  </head>
  <body class="loading">
    <div id="app"></div>

    <!-- Configuration -->
    <script>
      window.$docsify = {
        //...
      };
    </script>

    <!-- Docsify.js -->
    <script src="//cdn.jsdelivr.net/npm/docsify@5"></script>

    <!-- Plugins (optional) -->
    <!-- <script src="//cdn.jsdelivr.net/npm/docsify@5/dist/plugins/search.min.js"></script> -->
  </body>
</html>
```

--------------------------------

### Vue Computed Properties

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/vue.md

Define computed properties to derive data based on existing data. This example calculates the time of day.

```js
{
  computed: {
    timeOfDay() {
      const date = new Date();
      const hours = date.getHours();

      if (hours < 12) {
        return 'morning';
      }
      else if (hours < 18) {
        return 'afternoon';
      }
      else {
        return 'evening'
      }
    }
  },
}
```

--------------------------------

### HTML Custom Navbar

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/custom-navbar.md

Use a static HTML file to define your navigation structure. Links starting with '#/' are treated as internal navigation.

```html
<!-- index.html -->

<body>
  <nav>
    <a href="#/">EN</a>
    <a href="#/zh-cn/">简体中文</a>
  </nav>
  <div id="app"></div>
</body>
```

--------------------------------

### Configure Multiple Cover Pages by Path

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/cover.md

Enable multiple cover pages for different language routes by providing an array of paths to the `coverpage` option.

```javascript
window.$docsify = {
  coverpage: ['/', '/zh-cn/'],
};
```

--------------------------------

### Use Registered Vue Components in Markdown

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/vue.md

Example of using registered Vue components within markdown. Each instance of the component will have its own isolated state.

```html
<button-counter></button-counter>
<button-counter></button-counter>
```

--------------------------------

### Programmatic Docsify Initialization with ESM

Source: https://context7.com/docsifyjs/docsify/llms.txt

Docsify v5 exports the `Docsify` class for ESM usage. Options passed directly to the constructor take the highest priority over `window.$docsify`.

```javascript
import { Docsify, version } from 'docsify'; // or from 'docsify/src/core/Docsify.js'

console.log(version); // e.g. "5.0.0-rc.4"

const app = new Docsify({
  el: '#app',
  name: 'My Project',
  repo: 'https://github.com/myorg/myrepo',
  homepage: 'README.md',
  loadSidebar: true,
  routerMode: 'history',
  plugins: [
    function myPlugin(hook, vm) {
      hook.ready(() => console.log('Docsify is ready, route:', vm.route));
    },
  ],
});
```

--------------------------------

### Rendering Fetched Data

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/vue.md

Use Vue directives like `v-for` to render lists of data fetched asynchronously. This example displays images and their titles.

```markdown
<div style="display: flex;">
  <figure style="flex: 1;">
    <img v-for="image in images" :src="image.url" :title="image.title">
    <figcaption>{{ image.title }}</figcaption>
  </figure>
</div>
```

--------------------------------

### Implement Plugin Lifecycle Hooks

Source: https://context7.com/docsifyjs/docsify/llms.txt

Plugins are functions that receive `hook` and `vm` arguments to interact with Docsify's lifecycle. Hooks include `init`, `mounted`, `beforeEach`, `afterEach`, `doneEach`, and `ready`.

```javascript
// docsify-plugin-example.js
{
  function myPlugin(hook, vm) {
    // 1. Fires once when Docsify initialises (before DOM mount)
    hook.init(() => {
      console.log('init — Docsify version:', window.Docsify.version);
    });

    // 2. Fires once after Docsify mounts to the DOM
    hook.mounted(() => {
      document.querySelector('.sidebar').classList.add('custom-sidebar');
    });

    // 3. Fires before each page's Markdown is compiled → modify raw Markdown
    hook.beforeEach(markdown => {
      // Prepend a last-updated notice using the built-in variable
      return `> Last updated: {docsify-updated}

${markdown}`;
    });

    // 3b. Async version — use next() callback
    hook.beforeEach((markdown, next) => {
      try {
        const modified = markdown.replace(/TODO/g, '**TODO**');
        next(modified);
      } catch (err) {
        next(markdown); // always call next to avoid hanging
      }
    });

    // 4. Fires after Markdown is compiled to HTML → modify rendered HTML
    hook.afterEach(html => {
      const footer = `<footer><p>© ${new Date().getFullYear()} My Org</p></footer>`;
      return html + footer;
    });

    // 4b. Async afterEach
    hook.afterEach((html, next) => {
      // e.g. syntax-highlight a custom block
      next(html);
    });

    // 5. Fires after each page's HTML is appended to the DOM
    hook.doneEach(() => {
      // Re-initialise third-party widgets, analytics events, etc.
      console.log('Page rendered:', vm.route.path);
    });

    // 6. Fires once after the very first page has finished rendering
    hook.ready(() => {
      console.log('Site fully ready');
    });
  }

  // Self-registering pattern for standalone plugin files
  window.$docsify = window.$docsify || {};
  $docsify.plugins = [myPlugin, ...($docsify.plugins || [])];
}
```

--------------------------------

### Vue Lifecycle Hooks

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/vue.md

Utilize lifecycle hooks like 'created' to perform actions when a component is initialized. This example fetches data upon creation.

```js
{
  data() {
    return {
      images: null,
    };
  },
  created() {
    fetch('https://api.domain.com/')
      .then(response => response.json())
      .then(data => (this.images = data))
      .catch(err => console.log(err));
  }
}

// API response:
// [
//   { title: 'Image 1', url: 'https://domain.com/1.jpg' },
//   { title: 'Image 2', url: 'https://domain.com/2.jpg' },
//   { title: 'Image 3', url: 'https://domain.com/3.jpg' },
// ];
```

--------------------------------

### Configure Multiple Cover Pages by File Name

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/cover.md

Configure specific cover page files for different routes using an object where keys are routes and values are cover page file names.

```javascript
window.$docsify = {
  coverpage: {
    '/': 'cover.md',
    '/zh-cn/': 'cover.md',
  },
};
```

--------------------------------

### Calling Methods with Events

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/vue.md

Trigger Vue methods using event listeners like `@click`. This example attaches the 'hello' method to a button click.

```markdown
<button @click="hello">Say Hello</button>
```

--------------------------------

### Define Dynamic Routes with Strings and Functions

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/configuration.md

Configure virtual routes to provide content dynamically. Routes can map paths to markdown strings or functions that return markdown. Order matters, with more specific routes listed first.

```javascript
window.$docsify = {
  routes: {
    // Basic match w/ return string
    '/foo': '# Custom Markdown',

    // RegEx match w/ synchronous function
    '/bar/(.*)'(route, matched) {
      return '# Custom Markdown';
    },

    // RegEx match w/ asynchronous function
    '/baz/(.*)'(route, matched, next) {
      fetch('/api/users?id=12345')
        .then(response => {
          next('# Custom Markdown');
        })
        .catch(err => {
          // Handle error...
        });
    },
  },
};
```

--------------------------------

### Lifecycle hook: ready()

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/write-a-plugin.md

The `ready` hook is invoked once after the initial page has been rendered.

```javascript
hook.ready(() => {
  // ...
});
```

--------------------------------

### Include Edit on GitHub Button

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/plugins.md

Add an 'Edit on GitHub' button to each page by including this plugin. Refer to the linked document for detailed setup and configuration.

```html
<!-- This plugin is typically added via a script tag, similar to others, but the source only provides a description. -->
```

--------------------------------

### Multi-line and Nested Callouts

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/ui-kit.md

Shows how to create multi-line callouts with lists and nested callouts.

```markdown
> [!NOTE]
> - List item 1
> - List item 2
> 
> Text
> 
> ```html
> <p>Hello, World!</p>
> ```
```

```markdown
> [!NOTE]
> Level 1
> > [!NOTE]
> > Level 2
> > > [!NOTE]
> > > Level 3
```

--------------------------------

### Vue Counter Component in Markdown

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/vue.md

Example of a simple Vue counter component rendered directly in markdown. This demonstrates how Vue templates are processed when `vueGlobalOptions` is configured.

```html
<p>
  <button @click="count += 1">+</button>
  {{ count }}
  <button @click="count -= 1">-</button>
</p>
```

--------------------------------

### Set Custom Homepage

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/configuration.md

Specify a different Markdown file or URL to be used as the homepage instead of the default `README.md`.

```javascript
window.$docsify = {
  // Change to /home.md
  homepage: 'home.md',

  // Or use the readme in your repo
  homepage:
    'https://raw.githubusercontent.com/docsifyjs/docsify/main/README.md',
};
```

--------------------------------

### Run All and Specific Test Types

Source: https://github.com/docsifyjs/docsify/blob/develop/test/README.md

Commands to execute all tests or specific types of tests (e2e, integration, unit).

```bash
# Run all tests
npm t

# Run test types
npm run test:e2e
npm run test:integration
npm run test:unit
```

--------------------------------

### Auto-mounting Vue Template Syntax

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/vue.md

Docsify automatically mounts top-level elements in markdown containing Vue template syntax or components if they are not already mounted. This example shows elements that will be mounted.

```html
<p>{{ foo }}</p>
<my-component />
<div>
  <span>{{ bar }}</span>
  <some-other-component />
</div>
```

--------------------------------

### Load Navbar from File

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/configuration.md

Control how the navbar is loaded. Set to `true` to load from `_navbar.md`, or provide a string path to load from a specific file.

```javascript
window.$docsify = {
  // load from _navbar.md
  loadNavbar: true,

  // load from nav.md
  loadNavbar: 'nav.md',
};
```

--------------------------------

### Configure GitHub Repository Link

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/configuration.md

Specify the `repo` option with a GitHub username/repository string or a full URL to display the GitHub Corner widget.

```javascript
window.$docsify = {
  repo: 'docsifyjs/docsify',
  // or
  repo: 'https://github.com/docsifyjs/docsify/',
};
```

--------------------------------

### Netlify Redirects for HTML5 Router

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/deploy.md

Create a `_redirects` file in your docs directory with this content to enable Netlify to correctly handle routing for HTML5 mode. This redirects all paths to `index.html`.

```sh
/*    /index.html   200
```

--------------------------------

### Include Core Theme CSS

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/themes.md

Link to the core Docsify theme stylesheet in your HTML. This provides the base styles for your site.

```html
<!-- Core Theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@5/dist/themes/core.min.css" />
```

--------------------------------

### Configure Google Analytics (UA)

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/plugins.md

Integrate Google Universal Analytics by setting the 'ga' option in window.$docsify. This can also be configured directly via the data-ga attribute.

```html
<script>
  window.$docsify = {
    ga: 'UA-XXXXX-Y',
  };
</script>
<script src="//cdn.jsdelivr.net/npm/docsify@5/dist/docsify.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/docsify@5/dist/plugins/ga.min.js"></script>
```

```html
<script src="//cdn.jsdelivr.net/npm/docsify@5/dist/docsify.min.js" data-ga="UA-XXXXX-Y"></script>
<script src="//cdn.jsdelivr.net/npm/docsify@5/dist/plugins/ga.min.js"></script>
```

--------------------------------

### Create Sidebar with Section Headers

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/adding-pages.md

Organize sidebar navigation using section headers in `_sidebar.md`. This allows for hierarchical structuring of your documentation.

```markdown
<!-- docs/_sidebar.md -->

- Section Header 1

  - [Home](/)
  - [Page 1](page-1.md)

- Section Header 2

  - [Page 2](page-2.md)
  - [Page 3](page-3.md)
```

--------------------------------

### Enable Cover Page

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/cover.md

Set the `coverpage` option to true to enable the cover page feature. This requires a `_coverpage.md` file in your project root.

```javascript
window.$docsify = {
  coverpage: true,
};
```

--------------------------------

### Task List Syntax

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/helpers.md

Create task lists in Markdown. Note that empty checkboxes '[]' are not functional.

```markdown
- [ ] foo
- bar
- [x] baz
- [] bam <~ not working
  - [ ] bim
  - [ ] lim
```

--------------------------------

### Preview Docsify Site with Python 2 HTTP Server

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/quickstart.md

Manually preview your Docsify site using Python 2's SimpleHTTPServer module. Ensure you are in the 'docs' directory.

```python
# Python 2
cd docs && python -m SimpleHTTPServer 3000
```

--------------------------------

### Run Docker Container

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/deploy.md

Command to run a Docker container for the Docsify site, mapping port 3000 and mounting the current directory as a volume.

```bash
docker run -itp 3000:3000 --name=docsify -v $(pwd):/docs docsify/demo
```

--------------------------------

### Preview Docsify Site with Python 3 HTTP Server

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/quickstart.md

Manually preview your Docsify site using Python 3's http.server module. Ensure you are in the 'docs' directory.

```python
# Python 3
cd docs && python -m http.server 3000
```

--------------------------------

### Lifecycle hook: init()

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/write-a-plugin.md

The `init` hook is invoked once when the docsify script is initialized.

```javascript
hook.init(() => {
  // ...
});
```

--------------------------------

### Configure Sidebar Loading

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/configuration.md

Set `loadSidebar` to `true` to load from `_sidebar.md` or provide a string for a custom path.

```javascript
window.$docsify = {
  // load from _sidebar.md
  loadSidebar: true,

  // load from summary.md
  loadSidebar: 'summary.md',
};
```

--------------------------------

### AWS Amplify Build Settings

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/deploy.md

Configure amplify.yml for deploying Docsify. Specify the base directory for artifacts and ensure build commands are handled correctly.

```yaml
version: 0.1
frontend:
  phases:
    build:
      commands:
        - echo "Nothing to build"
  artifacts:
    baseDirectory: /docs
    files:
      - '**/*'
  cache:
    paths: []
```

--------------------------------

### Configure Route Aliases

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/configuration.md

Set up route aliases to manage routing rules, including support for regular expressions. Order matters, as the first matching alias takes precedence.

```javascript
window.$docsify = {
  alias: {
    '/foo/(.*)': '/bar/$1', // supports regexp
    '/zh-cn/changelog': '/changelog',
    '/changelog':
      'https://raw.githubusercontent.com/docsifyjs/docsify/main/CHANGELOG',

    // You may need this if you use routerMode:'history'.
    '/.*/_sidebar.md': '/_sidebar.md', // See #301
  },
};
```

--------------------------------

### Basic Markdown Navbar

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/custom-navbar.md

Create a `_navbar.md` file to define your navigation links. This file will be automatically loaded by Docsify when `loadNavbar` is enabled.

```markdown
<!-- _navbar.md -->

- [En](/)
- [chinese](/zh-cn/)
```

--------------------------------

### Add plugins to Docsify configuration

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/write-a-plugin.md

Plugins can be directly included in the `plugins` array within the `window.$docsify` configuration object.

```javascript
window.$docsify = {
  plugins: [
    function myPlugin1(hook, vm) {
      // ...
    },
    function myPlugin2(hook, vm) {
      // ...
    },
  ],
};
```

--------------------------------

### Legacy Callout Styles

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/ui-kit.md

Illustrates legacy styles for important and tip callouts.

```markdown
>> Legacy **Important** callout with `inline code`.
```

```markdown
?> Legacy **Tip** with `inline code`.
```

--------------------------------

### Load Docsify with Major Version

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/quickstart.md

Load Docsify using a CDN link that specifies a major version. This allows for automatic updates with non-breaking enhancements and bug fixes.

```html
<!-- Core Theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@5/dist/themes/core.min.css">

<!-- Docsify -->
<script src="//cdn.jsdelivr.net/npm/docsify@5"></script>
```

--------------------------------

### Include Core Dark Theme Add-on

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/themes.md

Add the core dark theme styles. This can be applied universally or conditionally.

```html
<!-- Core Dark (add-on) -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@5/dist/themes/addons/core-dark.min.css" />
```

--------------------------------

### Configure Sidebar Alias

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/adding-pages.md

Use the `alias` configuration to specify fallback paths for `_sidebar.md` loading, preventing unnecessary directory traversal.

```html
<script>
  window.$docsify = {
    loadSidebar: true,
    alias: {
      '/.*/_sidebar.md': '/_sidebar.md',
    },
  };
</script>
```

--------------------------------

### GitLab Pages CI Configuration

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/deploy.md

Use this YAML script in your .gitlab-ci.yml file to deploy your docsify site to GitLab Pages. It handles copying files and setting up the public directory.

```YAML
pages:
  stage: deploy
  script:
  - mkdir .public
  - cp -r * .public
  - mv .public public
  artifacts:
    paths:
    - public
  only:
  - master
```

--------------------------------

### Enable Navbar Loading in Docsify

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/custom-navbar.md

Configure Docsify to load a navigation bar from a Markdown file by setting `loadNavbar` to true in your index.html.

```html
<!-- index.html -->

<script>
  window.$docsify = {
    loadNavbar: true,
  };
</script>
<script src="//cdn.jsdelivr.net/npm/docsify@5/dist/docsify.min.js"></script>
```

--------------------------------

### Configure Gitalk Comments for Docsify

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/plugins.md

Set up Gitalk, a GitHub Issue-based comment system, for your docsify site. This requires including the Gitalk CSS and JS files, along with initializing the Gitalk instance with your GitHub application credentials and repository details.

```html
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk/dist/gitalk.css" />

<script src="//cdn.jsdelivr.net/npm/docsify@5/dist/plugins/gitalk.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/gitalk/dist/gitalk.min.js"></script>
<script>
  const gitalk = new Gitalk({
    clientID: 'GitHub Application Client ID',
    clientSecret: 'GitHub Application Client Secret',
    repo: 'GitHub repo',
    owner: 'GitHub repo owner',
    admin: [
      'GitHub repo collaborators, only these guys can initialize github issues',
    ],
    // facebook-like distraction free mode
    distractionFreeMode: false,
  });
</script>
```

--------------------------------

### Load Docsify with Specific Version

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/quickstart.md

Load Docsify using a CDN link that specifies the exact version. This ensures the site behaves identically across all environments by preventing any updates.

```html
<!-- Core Theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@5.0.0/themes/core.min.css">

<!-- Docsify -->
<script src="//cdn.jsdelivr.net/npm/docsify@5.0.0"></script>
```

--------------------------------

### Run Tests

Source: https://github.com/docsifyjs/docsify/wiki/Release

Executes all defined tests for the Docsify project to ensure code integrity before release.

```bash
npm test
```

--------------------------------

### Configure Docsify Search Plugin

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/plugins.md

Configure the search plugin by specifying paths to search or using 'auto' for discovery. Options include placeholder localization and headline depth.

```html
<script>
  window.$docsify = {
    search: 'auto', // default

    search: [
      '/',            // => /README.md
      '/guide',       // => /guide.md
      '/get-started', // => /get-started.md
      '/zh-cn/',      // => /zh-cn/README.md
    ],

    // Complete configuration parameters
    search: {
      // Location in sidebar (default: prepended as first child)
      // Optionally specify insertAfter or insertBefore (not both)
      insertAfter: '.app-name', // CSS selector in .sidebar scope
      insertBefore: '.sidebar-nav', // CSS selector in .sidebar scope

      maxAge: 86400000, // Expiration time, the default one day
      paths: [], // string[] of files to search in, or 'auto' for discovery based on your sidebar
      placeholder: 'Type to search',

      // Localization
      placeholder: {
        '/zh-cn/': '搜索',
        '/': 'Type to search',
      },

      noData: 'No Results!',

      // Localization
      noData: {
        '/zh-cn/': '找不到结果',
        '/': 'No Results',
      },

      // Headline depth, 1 - 6
      depth: 2,

      hideOtherSidebarContent: true, // Deprecated as of v5

      // To avoid search index collision
      // between multiple websites under the same domain
      namespace: 'website-1',

      // Use different indexes for path prefixes (namespaces).
      // NOTE: Only works in 'auto' mode.
      //
      // When initialiazing an index, we look for the first path from the sidebar.
      // If it matches the prefix from the list, we switch to the corresponding index.
      pathNamespaces: ['/zh-cn', '/ru-ru', '/ru-ru/v1'],

      // You can provide a regexp to match prefixes. In this case,
      // the matching substring will be used to identify the index
      pathNamespaces: /^(\/(zh-cn|ru-ru))?(\/(v1|v2))?/,
    },
  };
</script>
<script src="//cdn.jsdelivr.net/npm/docsify@5/dist/docsify.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/docsify@5/dist/plugins/search.min.js"></script>
```

--------------------------------

### Configure Google Analytics 4 (GA4)

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/plugins.md

Set up Google Analytics 4 (GA4) or multiple tracking IDs by configuring the 'gtag' option in window.$docsify. Supports GA4, Universal Analytics, Google Ads, and Floodlight.

```html
<script>
  // Single ID
  window.$docsify = {
    gtag: 'UA-XXXXX-Y',
  };

  // Multiple IDs
  window.$docsify = {
    gtag: [
      'G-XXXXXXXX', // Google Analytics 4 (GA4)
      'UA-XXXXXXXX', // Google Universal Analytics (GA3)
      'AW-XXXXXXXX', // Google Ads
      'DC-XXXXXXXX', // Floodlight
    ],
  };
</script>
<script src="//cdn.jsdelivr.net/npm/docsify@5/dist/docsify.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/docsify@5/dist/plugins/gtag.min.js"></script>
```

--------------------------------

### Include Core Dark Theme Add-on (Dark Mode Only)

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/themes.md

Conditionally load the core dark theme styles only when the operating system's dark mode is active.

```html
<!-- Core Dark - Dark Mode Only (add-on) -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@5/dist/themes/addons/core-dark.min.css" media="(prefers-color-scheme: dark)" />
```

--------------------------------

### Docsify Search Plugin Configuration

Source: https://context7.com/docsifyjs/docsify/llms.txt

Configure the bundled search plugin to enable full-text search functionality. Customize options like index time-to-live, paths to index, placeholder text, and search result messages for different languages.

```html
<script>
  window.$docsify = {
    search: {
      maxAge: 86400000,        // index TTL in ms (default: 1 day)
      paths: 'auto',           // 'auto' uses sidebar links; or string[]
      placeholder: {
        '/zh-cn/': '搜索',
        '/':       'Search docs',
      },
      noData: {
        '/zh-cn/': '没有结果',
        '/':       'No results',
      },
      depth: 3,                // headline levels to index (1–6)
      namespace: 'my-docs',   // prevent collision with other docsify sites on same domain
      pathNamespaces: ['/zh-cn', '/en'],
      insertAfter: '.app-name', // position the search box after this sidebar element
    },
  };
</script>
<script src="//cdn.jsdelivr.net/npm/docsify@5/dist/docsify.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/docsify@5/dist/plugins/search.min.js"></script>
```

--------------------------------

### Load Additional Prism Language Grammars

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/language-highlight.md

Support for additional languages is available by loading Prism grammar files. These files must be loaded after Docsify.

```html
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-bash.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-docker.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-git.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-java.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-jsx.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-markdown.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-php.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-python.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-rust.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-sql.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-swift.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-typescript.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-yaml.min.js"></script>
```

--------------------------------

### Set Basic Theme Properties

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/themes.md

Define custom theme properties like color, font size, and line height within a :root CSS declaration.

```css
:root {
  --theme-color: red;
  --font-size  : 15px;
  --line-height: 1.5;
}

```

--------------------------------

### Checkout Main Branch

Source: https://github.com/docsifyjs/docsify/wiki/Release

Switches the current working branch to 'main'. This is a preparatory step before merging changes from the develop branch.

```bash
git checkout main
```

--------------------------------

### Run Unit/Integration Tests with Jest

Source: https://github.com/docsifyjs/docsify/blob/develop/test/README.md

Commands for running specific test files, test names, or combinations thereof using Jest. Use the -u flag to update snapshots.

```bash
# Run test file(s)
npm run test:unit -- -i ./path/to/file.test.js
npm run test:unit -- -i ./path/to/*.test.js

# Run test name(s)
npm run test:unit -- -t "my test"

# Run test name(s) in file
npm run test:unit -- -i ./path/to/file.test.js -t "my test"

# ------------------------------------------------------------------------------

# Update snapshots
npm run test:unit -- -u

# Update snapshots for test file(s)
npm run test:unit -- -u -i ./path/to/file.test.js
npm run test:unit -- -u -i ./path/to/*.test.js

# Update snapshots for test name(s)
npm run test:unit -- -u -t "my test"

# Update snapshots for test name(s) in file
npm run test:unit -- -u -i ./path/to/file.test.js -t "my test"
```

--------------------------------

### Set Base Path for Website Files

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/configuration.md

Specify the base path for loading website files, which can be a directory, another domain, or even a raw file from a repository.

```javascript
window.$docsify = {
  basePath: '/path/',

  // Load the files from another site
  basePath: 'https://docsify.js.org/',

  // Even can load files from other repo
  basePath:
    'https://raw.githubusercontent.com/ryanmcdermott/clean-code-javascript/master/',
};
```

--------------------------------

### Configure Vue Mount Points

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/vue.md

Use `vueMounts` to mount specific DOM elements as Vue instances. Each mount point is defined by a CSS selector and its associated Vue options. Data for each instance is unique and does not persist across navigations.

```javascript
window.$docsify = {
  vueMounts: {
    '#counter': {
      data() {
        return {
          count: 0,
        };
      },
    },
  },
};
```

--------------------------------

### Import and Set Custom Fonts

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/themes.md

Import web fonts using @import and set the --font-family, --font-family-emoji, and --font-family-mono properties.

```css
/* Fonts: Noto Sans, Noto Emoji, Noto Mono */
@import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&family=Noto+Sans+Mono:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  --font-family      : 'Noto Sans', sans-serif;
  --font-family-emoji: 'Noto Color Emoji', sans-serif;
  --font-family-mono : 'Noto Sans Mono', monospace;
}

```

--------------------------------

### Enable Script Execution

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/configuration.md

Allow Docsify to execute script tags within markdown pages. Defaults to true if Vue is detected.

```javascript
window.$docsify = {
  executeScript: true,
};
```

```html
## This is test

<script>
  console.log(2333)
</script>
```

--------------------------------

### Mount Vue App with Script Tag

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/vue.md

Mount a Vue application using a `<script>` tag directly within a markdown file. Only the first script tag in a markdown file is executed for Vue mounting.

```html
<script>
  Vue.createApp({
    // Options...
  }).mount('#example');
</script>
```

--------------------------------

### General Plugin URL Update Pattern

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/v5-upgrade.md

Illustrates the general pattern for updating any Docsify plugin URL from v4 to v5. This involves changing the path from `/lib/plugins/` to `/dist/plugins/`, updating the version to `@5`, and adjusting specific plugin names if necessary (e.g., `zoom-image` to `zoom`).

```html
//cdn.jsdelivr.net/npm/docsify/lib/plugins/emoji.min.js" becomes "//cdn.jsdelivr.net/npm/docsify@5/dist/plugins/emoji.min.js"
```

--------------------------------

### Set Website Logo

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/configuration.md

Specify the path to the website logo. The logo is visible only if the `name` prop is also set.

```javascript
window.$docsify = {
  logo: '/_media/icon.svg',
};
```

--------------------------------

### Include Vue Theme Add-on

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/themes.md

Integrate the Vue theme add-on for a specific aesthetic. This should be loaded after the core theme.

```html
<!-- Vue Theme (add-on) -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@5/dist/themes/addons/vue.min.css" />
```

--------------------------------

### Docsify Configuration Object

Source: https://context7.com/docsifyjs/docsify/llms.txt

The global configuration object or factory function that Docsify reads during boot. When defined as a function it receives the `vm` instance so that runtime values can be used.

```javascript
// Function form — useful for accessing vm inside markdown config
window.$docsify = function (vm) {
  return {
    name: 'Docs',
    repo: 'docsifyjs/docsify',

    // Navigation
    loadSidebar: true,          // true → _sidebar.md
    loadNavbar: 'nav.md',       // string → custom file name
    mergeNavbar: true,          // collapse navbar into sidebar on small screens
    hideSidebar: false,

    // Cover page
    coverpage: true,            // true → _coverpage.md
    onlyCover: false,           // show only cover on root path

    // Routing
    routerMode: 'hash',         // 'hash' | 'history'
    basePath: '/docs/',
    alias: {
      '/foo/(.*)': '/bar/$1',   // RegExp-based aliases
      '/.*/_sidebar.md': '/_sidebar.md', // required for history mode
    },
    relativePath: false,

    // Content
    homepage: 'README.md',
    ext: '.md',
    maxLevel: 6,
    subMaxLevel: 3,
    autoHeader: true,
    auto2top: true,

    // Links
    externalLinkTarget: '_blank',
    externalLinkRel: 'noopener',
    noCompileLinks: ['/raw/.*'],

    // Emoji
    nativeEmoji: false,
    noEmoji: false,

    // HTTP
    requestHeaders: { 'cache-control': 'max-age=600' },
    notFoundPage: true,         // loads _404.md

    // Misc
    executeScript: true,
    catchPluginErrors: true,

    // Markdown customisation (see markdown section)
    markdown: {
      renderer: {
        code({ text, lang }) {
          return `<pre><code class="language-${lang}">${text}</code></pre>`;
        },
      },
    },

    plugins: [],
  };
};
```

--------------------------------

### Enable Relative Path

Source: https://github.com/docsifyjs/docsify/blob/develop/docs/configuration.md

Set `relativePath` to `true` to enable relative linking. Links will be resolved based on the current URL's directory.

```javascript
window.$docsify = {
  // Relative path enabled
  relativePath: true,

  // Relative path disabled (default value)
  relativePath: false,
};
```