docs: better langs and themes list

docs/.vitepress/components/LanguagesList.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { usePlayground } from '../store/playground'
+
+const play = usePlayground()
+const showModel = ref(false)
+
+function preview(id: string) {
+  play.lang = id
+  showModel.value = true
+}
+</script>
+
+<template>
+  <div>
+    <table>
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>ID</th>
+          <th>Alias</th>
+          <th>Preview</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="l in play.allLanguages" :key="l.id">
+          <td>{{ l.name }}</td>
+          <td><code>{{ l.id }}</code></td>
+          <td>
+            <code v-for="alias in l.aliases" :key="alias">{{ alias }}</code>
+          </td>
+          <td>
+            <div flex>
+              <button
+                title="Preview Example"
+                ma text-lg
+                @click="preview(l.id)"
+              >
+                <div i-carbon:code />
+              </button>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <div v-if="showModel" fixed inset-0 z-100 flex items-center justify-center>
+      <div bg-black:50 absolute inset-0 backdrop-blur-sm @click="showModel = false" />
+      <ShikijiMiniPlayground max-h-80vh w-full md:w-150 lg:w-200 />
+    </div>
+  </div>
+</template>

docs/.vitepress/components/ThemesList.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { usePlayground } from '../store/playground'
+
+const play = usePlayground()
+const showModel = ref(false)
+
+function preview(id: string) {
+  play.theme = id
+  showModel.value = true
+}
+</script>
+
+<template>
+  <div>
+    <table>
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>ID</th>
+          <th>Preview</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="l in play.allThemes" :key="l.id">
+          <td>{{ l.name }}</td>
+          <td><code>{{ l.id }}</code></td>
+          <td>
+            <div flex>
+              <button
+                title="Preview Example"
+                ma text-lg
+                @click="preview(l.id)"
+              >
+                <div i-carbon:code />
+              </button>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <div v-if="showModel" fixed inset-0 z-100 flex items-center justify-center>
+      <div bg-black:50 absolute inset-0 backdrop-blur-sm @click="showModel = false" />
+      <ShikijiMiniPlayground max-h-80vh w-full md:w-150 lg:w-200 />
+    </div>
+  </div>
+</template>

docs/.vitepress/config.ts

@@ -12,6 +12,8 @@ const GUIDES: DefaultTheme.NavItemWithLink[] = [
   { text: 'Dual Themes', link: '/guide/dual-themes' },
   { text: 'Transformers', link: '/guide/transformers' },
   { text: 'Compat Build', link: '/guide/compat' },
+  { text: 'Custom Themes', link: '/guide/load-theme' },
+  { text: 'Custom Languages', link: '/guide/load-lang' },
 ]
 
 const REFERENCES: DefaultTheme.NavItemWithLink[] = [
@@ -50,15 +52,7 @@ export default defineConfig({
     codeTransformers: [
       transformerTwoSlash({
         explicitTrigger: true,
-        renderer: rendererRich({
-          formatInfo(info) {
-            return info
-              .replace(/\<"abap".*?\>/, '<BundledLanguages>')
-              .replace(/\<"abap".*\.\.\./, '<BundledLanguages>...')
-              .replace(/\<"css-variables".*?\>/, '<BundledThemes>')
-              .replace(/\<"css-variables".*\.\.\./, '<BundledThemes>...')
-          },
-        }),
+        renderer: rendererRich(),
       }),
       {
         // Render custom themes with codeblocks

docs/components.d.ts

@@ -8,8 +8,14 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     Badges: typeof import('./.vitepress/components/Badges.vue')['default']
+    copy: typeof import('./.vitepress/components/LanguagesList copy.vue')['default']
+    FunctionsList: typeof import('./.vitepress/components/FunctionsList.vue')['default']
+    GrammarList: typeof import('./.vitepress/components/GrammarList.vue')['default']
     HomeDemo: typeof import('./.vitepress/components/HomeDemo.vue')['default']
+    LanguagesList: typeof import('./.vitepress/components/LanguagesList.vue')['default']
+    LanugagesList: typeof import('./.vitepress/components/LanugagesList.vue')['default']
     ShikijiMiniPlayground: typeof import('./.vitepress/components/ShikijiMiniPlayground.vue')['default']
     ShikijiPlayground: typeof import('./.vitepress/components/ShikijiPlayground.vue')['default']
+    ThemesList: typeof import('./.vitepress/components/ThemesList.vue')['default']
   }
 }

docs/guide/load-lang.md

@@ -0,0 +1,84 @@
+# Load Custom Languages
+
+Check [All Builtin Languages](/languages) as well.
+
+You can load custom languages by passing a TextMate grammar object into the langs array.
+
+```ts
+import { getHighlighter } from 'shikiji'
+
+const myLang = JSON.parse(fs.readFileSync('my-lang.json', 'utf8'))
+
+const highlighter = await getHighlighter({
+  langs: [myLang]
+})
+
+const html = highlighter.codeToHtml(code, {
+  lang: 'my-lang',
+})
+```
+
+You can also load languages after the highlighter has been created.
+
+```ts
+import { getHighlighter } from 'shikiji'
+
+const myLang = JSON.parse(fs.readFileSync('my-lang.json', 'utf8'))
+
+const highlighter = await getHighlighter()
+
+await highlighter.loadLanguage(myLang) // <--
+
+const html = highlighter.codeToHtml(code, {
+  lang: 'my-lang',
+})
+```
+
+## Migrate from Shiki
+
+Since `shikiji` is environment agnostic, that means we don't have access to the file system. That means the `path` property `shiki` supports is not available in `shikiji`. Instead, you need to read them in yourself and pass the object. For example:
+
+```ts
+const highlighter = await getHighlighter({
+  langs: [
+    {
+      name: 'vue-vine',
+      scopeName: 'source.vue-vine',
+      // ‼️ This would not work!
+      path: join(__dirname, './vine-ts.tmLanguage.json'),
+      embeddedLangs: [
+        'vue-html',
+        'css',
+        'scss',
+        'sass',
+        'less',
+        'stylus',
+      ],
+    },
+  ]
+})
+```
+
+Instead, load that file yourself (via `fs`, `import()`, `fetch()`, etc.) and pass the object:
+
+```ts
+const vineGrammar = JSON.parse(fs.readFileSync(join(__dirname, './vine-ts.tmLanguage.json'), 'utf8'))
+
+const highlighter = await getHighlighter({
+  langs: [
+    {
+      name: 'vue-vine',
+      scopeName: 'source.vue-vine',
+      embeddedLangs: [
+        'vue-html',
+        'css',
+        'scss',
+        'sass',
+        'less',
+        'stylus',
+      ],
+      ...vineGrammar
+    },
+  ]
+})
+```

docs/guide/load-theme.md

@@ -0,0 +1,39 @@
+# Load Custom Themes
+
+Check [All Builtin Themes](/themes) as well.
+
+You can load custom themes by passing a `Theme` object into the themes array.
+
+```ts
+import { getHighlighter } from 'shikiji'
+
+const myTheme = JSON.parse(fs.readFileSync('my-theme.json', 'utf8'))
+
+const highlighter = await getHighlighter({
+  themes: [myTheme]
+})
+
+const html = highlighter.codeToHtml(code, {
+  lang: 'javascript',
+  theme: 'my-theme'
+})
+```
+
+You can also load themes after the highlighter has been created.
+
+```ts
+import { getHighlighter } from 'shikiji'
+
+const myTheme = JSON.parse(fs.readFileSync('my-theme.json', 'utf8'))
+
+const highlighter = await getHighlighter()
+
+await highlighter.loadTheme(myTheme) // <--
+
+const html = highlighter.codeToHtml(code, {
+  lang: 'javascript',
+  theme: 'my-theme'
+})
+```
+
+The theme should be a TextMate theme in JSON object. For example, [it should looks like this](https://github.com/antfu/vscode-theme-vitesse/blob/main/themes/vitesse-dark.json).