by simochee
Replace syntax highlight with Shiki.
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>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.
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>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.
- Clone this repository
- Enable Corepack using
corepack enable - Install dependencies using
pnpm install - Run watch mode using
pnpm run watch - Start server using Live Server
- Insert a script tag to load the plugin script file after loading the Docsify script.
<script type="module" src="http://localhost:5500"></script>MIT