README.md

Docsify Plugins

Shiki

by simochee

Replace syntax highlight with Shiki.

📀 Setup

Insert a script tag to load the plugin script file after loading the Docsify script.

<!-- IMPORTANT: config must be defined as a module -->
<script type="module">
  // import themes and languages from esm.sh
  import nord from 'https://esm.sh/@shikijs/themes@1/nord';
  import ts from 'https://esm.sh/@shikijs/langs@1/ts';
  import vue from 'https://esm.sh/@shikijs/langs@1/vue';

  window.$docsify = {
    shiki: {
      theme: nord,
      langs: [ts, vue],
    }
  };
</script>
<script src="//cdn.jsdelivr.net/npm/docsify@v4"></script>
<script type="module" src="//cdn.jsdelivr.net/npm/docsify-shiki@v1"></script>

🔧 Configuration

theme

Specifies the Shiki theme. Use themes to set themes for each color schema.

<script type="module">
import synthwave84 from 'https://esm.sh/@shikijs/themes@1/synthwave-84';

window.$docsify = {
  shiki: {
    theme: synthwave84,
  }
}
</script>

See Shiki Document for available themes.

themes

Specifies themes for each color schema.

See Light/Dark Dual Themes for information on how multiple themes work.

<!-- Example: query-based dark theme -->
<style>
@media (prefers-color-scheme: dark) {
  .shiki,
  .shiki span {
    color: var(--shiki-dark) !important;
    background-color: var(--shiki-dark-bg) !important;
    /* Optional, if you also want font styles */
    font-style: var(--shiki-dark-font-style) !important;
    font-weight: var(--shiki-dark-font-weight) !important;
    text-decoration: var(--shiki-dark-text-decoration) !important;
  }
}
</style>
<script type="module">
import githubDark from 'https://esm.sh/@shikijs/themes@1/github-dark';
import githubLight from 'https://esm.sh/@shikijs/themes@1/github-light';

window.$docsify = {
  shiki: {
    themes: {
      dark: githubDark,
      light: githubLight
    }
  }
}
</script>

langs

Specify the languages to use with Shiki.

<script type="module">
import js from 'https://esm.sh/@shikijs/langs@1/js';
import md from 'https://esm.sh/@shikijs/langs@1/md';

window.$docsify = {
  shiki: {
    langs: [js, md],
  }
}
</script>

See Shiki Document for available languages.

💻 Development

1. Clone this repository
2. Enable Corepack using corepack enable
3. Install dependencies using pnpm install
4. Run watch mode using pnpm run watch
5. Start server using Live Server
6. Insert a script tag to load the plugin script file after loading the Docsify script.

<script type="module" src="http://localhost:5500"></script>

🛡️ License

MIT