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 --><scripttype="module">// import themes and languages from esm.shimportnordfrom'https://esm.sh/@shikijs/themes@1/nord';importtsfrom'https://esm.sh/@shikijs/langs@1/ts';importvuefrom'https://esm.sh/@shikijs/langs@1/vue';window.$docsify={shiki: {theme: nord,langs: [ts,vue],}};</script><scriptsrc="//cdn.jsdelivr.net/npm/docsify@v4"></script><scripttype="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.

<scripttype="module">importsynthwave84from'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,
.shikispan {
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><scripttype="module">importgithubDarkfrom'https://esm.sh/@shikijs/themes@1/github-dark';importgithubLightfrom'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.

<scripttype="module">importjsfrom'https://esm.sh/@shikijs/langs@1/js';importmdfrom'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.

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

🛡️ License

MIT