feat: dual theme support, use esm.sh (#5)

* chore: remove themes and langs

* docs: update use cdn

* chore: shiki from cdn

* feat: dual theme support

* docs: readme

* docs: use jsdelivr

README.md

@@ -5,10 +5,10 @@
 <h3 align="center">Shiki</h3>
 <p align="center">by <a href="https://github.com/simochee">simochee</a></p>
 
-[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/docsify-shiki/badge)](https://www.jsdelivr.com/package/npm/docsify-shiki)
-[![npm version](https://badge.fury.io/js/docsify-shiki.svg)](https://badge.fury.io/js/docsify-shiki)
-[![License](https://img.shields.io/npm/l/docsify-shiki)](https://github.com/simochee/docsify-shiki/blob/main/LICENSE)
-[![Release](https://github.com/simochee/docsify-shiki/actions/workflows/release.yaml/badge.svg?branch=main)](https://github.com/simochee/docsify-shiki/actions/workflows/release.yaml)
+[![jsDelivr hits (npm)](https://img.shields.io/jsdelivr/npm/hw/docsify-shiki?style=flat-square)](https://www.jsdelivr.com/package/npm/docsify-shiki)
+[![NPM Version](https://img.shields.io/npm/v/docsify-shiki?style=flat-square)](https://www.npmjs.com/package/docsify-shiki)
+[![License](https://img.shields.io/npm/l/docsify-shiki?style=flat-square)](https://github.com/simochee/docsify-shiki/blob/main/LICENSE)
+[![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/simochee/docsify-shiki/release.yaml?style=flat-square)](https://github.com/simochee/docsify-shiki/actions/workflows/release.yaml)
 
 Replace syntax highlight with [Shiki](https://github.com/shikijs/shiki).
 
@@ -17,19 +17,99 @@ Replace syntax highlight with [Shiki](https://github.com/shikijs/shiki).
 Insert a script tag to load the plugin script file after loading the Docsify script.
 
 ```html
-<script>
-  window.$docsify = {};
+<!-- 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>
-<!-- Themes https://shiki.matsu.io/themes -->
-<script src="//cdn.jsdelivr.net/npm/docsify-shiki@v1/themes/nord.js"></script>
-<!-- Languages https://shiki.matsu.io/languages -->
-<script src="//cdn.jsdelivr.net/npm/docsify-shiki@v1/langs/js.js"></script>
-<script src="//cdn.jsdelivr.net/npm/docsify-shiki@v1/langs/md.js"></script>
-<!-- Plugin -->
 <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.
+
+```html
+<script type="module">
+import synthwave84 from 'https://esm.sh/@shikijs/themes@1/synthwave-84';
+
+window.$docsify = {
+  shiki: {
+    theme: synthwave84,
+  }
+}
+</script>
+```
+
+See [Shiki Document](https://shiki.style/themes) for available themes.
+
+### themes
+
+Specifies themes for each color schema.
+
+See [Light/Dark Dual Themes ](https://shiki.style/guide/dual-themes) for information on how multiple themes work.
+
+```html
+<!-- 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.
+
+```html
+<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](https://shiki.style/languages) for available languages.
+
 ## 💻 Development
 
 1. Clone this repository