vuepress-plugin-md-power 1.0.0-rc.54 → 1.0.0-rc.56

package/lib/client/components/CodeEditor.vue

@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import { getHighlighterCore } from 'shiki/core'
+import type { HighlighterCore } from 'shiki/core'
+import editorData from '@internal/md-power/replEditorData'
+import { onMounted, onUnmounted, ref, shallowRef, watch } from 'vue'
+import { resolveCodeInfo } from '../composables/codeRepl.js'
+
+let highlighter: HighlighterCore | null = null
+let container: HTMLPreElement | null = null
+let lineNumbers: HTMLDivElement | null = null
+const { grammars, theme } = editorData
+
+const lang = ref<'go' | 'rust' | 'kotlin'>()
+
+const editorEl = shallowRef<HTMLDivElement>()
+const textAreaEl = shallowRef<HTMLTextAreaElement>()
+const input = ref('')
+
+async function init() {
+  highlighter = await getHighlighterCore({
+    themes: 'light' in theme && 'dark' in theme ? [theme.light, theme.dark] : [theme],
+    langs: Object.keys(grammars).map(key => grammars[key]),
+    loadWasm: () => import('shiki/wasm'),
+  })
+}
+
+function highlight() {
+  if (highlighter && lang.value && input.value) {
+    const output = highlighter.codeToHtml(input.value, {
+      lang: lang.value,
+      ...('light' in theme && 'dark' in theme
+        ? { themes: theme, defaultColor: false }
+        : { theme }),
+    })
+    if (container) {
+      container.innerHTML = output
+        .replace(/^<pre[^]+?>/, '')
+        .replace(/<\/pre>$/, '')
+        .replace(/(<span class="line">)(<\/span>)/g, '$1<wbr>$2')
+    }
+    if (lineNumbers) {
+      lineNumbers.innerHTML = output
+        .split('\n')
+        .map(() => '<div class="line-number"></div>')
+        .join('')
+    }
+  }
+}
+
+function updateScroll() {
+  container && (container.scrollLeft = textAreaEl.value?.scrollLeft || 0)
+}
+
+watch([input], highlight, { flush: 'post' })
+
+onMounted(async () => {
+  if (!editorEl.value || !textAreaEl.value)
+    return
+  await init()
+  container = editorEl.value.querySelector('pre')
+  lineNumbers = editorEl.value.querySelector('.line-numbers')
+  const info = resolveCodeInfo(editorEl.value)
+  lang.value = info.lang
+  input.value = info.code
+  textAreaEl.value.addEventListener('scroll', updateScroll, { passive: false })
+  window.addEventListener('resize', updateScroll)
+})
+
+onUnmounted(() => {
+  textAreaEl.value?.removeEventListener('scroll', updateScroll)
+  window.removeEventListener('resize', updateScroll)
+  highlighter = null
+  container = null
+  lineNumbers = null
+})
+</script>
+
+<template>
+  <div ref="editorEl" class="code-repl-editor">
+    <slot />
+    <textarea ref="textAreaEl" v-model="input" class="code-repl-input" />
+  </div>
+</template>
+
+<style scoped>
+.code-repl-editor {
+  position: relative;
+}
+
+.code-repl-editor :deep(div[class*="language-"] pre) {
+  scrollbar-width: none;
+}
+
+.code-repl-editor:hover :deep(.copy-code-button) {
+  opacity: 1;
+}
+
+.code-repl-input {
+  position: absolute;
+  top: 0;
+  right: -1.5rem;
+  bottom: 0;
+  left: -1.5rem;
+  z-index: 1;
+  box-sizing: border-box;
+  display: block;
+  padding: 1.3rem 1.5rem;
+  overflow-x: auto;
+  font-family: var(--vp-font-family-mono);
+  font-size: var(--vp-code-font-size);
+  -webkit-hyphens: none;
+  hyphens: none;
+  color: transparent;
+  text-align: left;
+  word-break: normal;
+  word-wrap: normal;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  white-space: pre;
+  caret-color: gray;
+  resize: none;
+  background-color: transparent;
+  word-spacing: normal;
+
+  direction: ltr;
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+  scrollbar-width: thin;
+}
+
+@media (min-width: 640px) {
+  .code-repl-input {
+    right: 0;
+    left: 0;
+  }
+}
+
+:deep(div[class*="language-"].line-numbers-mode) + .code-repl-input {
+  padding-left: 1rem;
+  margin-left: 2rem;
+}
+</style>

package/lib/client/components/{LanguageRepl.vue → CodeRepl.vue}

@@ -1,11 +1,18 @@
 <script setup lang="ts">
-import { shallowRef } from 'vue'
+import { defineAsyncComponent, shallowRef } from 'vue'
 import { useCodeRepl } from '../composables/codeRepl.js'
 import IconRun from './IconRun.vue'
 import Loading from './Loading.vue'
 import IconConsole from './IconConsole.vue'
 import IconClose from './IconClose.vue'
 
+defineProps<{
+  editable?: boolean
+  title?: string
+}>()
+
+const Editor = defineAsyncComponent(() => import('./CodeEditor.vue'))
+
 const replEl = shallowRef<HTMLDivElement | null>(null)
 const outputEl = shallowRef<HTMLDivElement | null>(null)
 const {
@@ -31,10 +38,16 @@ function runCode() {
 
 <template>
   <div ref="replEl" class="code-repl">
-    <span v-show="loaded && finished" class="icon-run" title="Run Code" @click="runCode">
-      <IconRun />
-    </span>
-    <slot />
+    <div class="code-repl-title">
+      <h4>{{ title }}</h4>
+      <span v-show="loaded && finished" class="icon-run" title="Run Code" @click="runCode">
+        <IconRun />
+      </span>
+    </div>
+    <Editor v-if="editable">
+      <slot />
+    </Editor>
+    <slot v-else />
     <div ref="outputEl" class="code-repl-pin" />
     <div v-if="!firstRun" class="code-repl-output">
       <div class="output-head">
@@ -80,16 +93,43 @@ function runCode() {
   margin-bottom: 16px;
 }
 
+.code-repl :deep(div[class*="language-"]) {
+  margin: 0 -1.5rem;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
 .code-repl-output {
   position: relative;
   top: -20px;
   padding-top: 6px;
   margin: 0 -1.5rem;
   background-color: var(--vp-code-block-bg);
-  transition: background-color, var(--t-color);
+  transition: background-color var(--t-color);
 }
 
-@media (min-width: 768px) {
+.code-repl-title {
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+  margin: 0 -1.5rem;
+  background-color: var(--vp-code-block-bg);
+  border-bottom: solid 1px var(--vp-c-divider);
+  transition: var(--t-color);
+  transition-property: background, border;
+}
+
+@media (min-width: 640px) {
+  .code-repl-title {
+    margin: 0;
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+  }
+
+  .code-repl :deep(div[class*="language-"]) {
+    margin: 0;
+  }
+
   .code-repl-output {
     margin: 0;
     border-bottom-right-radius: 6px;
@@ -97,34 +137,36 @@ function runCode() {
   }
 }
 
+.code-repl-title h4 {
+  flex: 1;
+  padding: 0 12px;
+  margin: 0;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 48px;
+  color: var(--vp-code-tab-active-text-color);
+  white-space: nowrap;
+  transition: color var(--t-color);
+}
+
 .icon-run {
-  position: absolute;
-  top: -10px;
-  right: 10px;
-  z-index: 2;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 30px;
-  height: 30px;
-  font-size: 16px;
-  color: var(--vp-c-bg);
+  width: 24px;
+  height: 24px;
+  font-size: 12px;
+  color: var(--vp-c-text-3);
   cursor: pointer;
-  background-color: var(--vp-c-brand-1);
+  border: solid 1px var(--vp-c-text-3);
   border-radius: 100%;
   transition: var(--t-color);
-  transition-property: color, background-color;
-}
-
-@media (min-width: 768px) {
-  .icon-run {
-    top: 60px;
-    right: 16px;
-  }
+  transition-property: color, border;
 }
 
 .icon-run:hover {
-  background-color: var(--vp-c-brand-2);
+  color: var(--vp-c-text-2);
+  border-color: var(--vp-c-text-2);
 }
 
 .code-repl-output .output-head {
@@ -132,7 +174,7 @@ function runCode() {
   align-items: center;
   justify-content: space-between;
   padding: 4px 10px 4px 20px;
-  border-top: solid 2px var(--vp-c-border);
+  border-top: solid 2px var(--vp-c-divider);
   transition: border-color var(--t-color);
 }
 

package/lib/client/composables/codeRepl.d.ts

@@ -1,5 +1,6 @@
 import { type Ref } from 'vue';
 type Lang = 'kotlin' | 'go' | 'rust';
+export declare function resolveCode(el: HTMLElement): string;
 export declare function resolveCodeInfo(el: HTMLDivElement): {
     lang: Lang;
     code: string;

package/lib/client/composables/codeRepl.js

@@ -1,4 +1,4 @@
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import { http } from '../utils/http.js';
 import { sleep } from '../utils/sleep.js';
 import { rustExecute } from './rustRepl.js';
@@ -19,18 +19,20 @@ const supportLang = ['kotlin', 'go', 'rust'];
 function resolveLang(lang) {
     return lang ? langAlias[lang] || lang : '';
 }
+export function resolveCode(el) {
+    const clone = el.cloneNode(true);
+    clone
+        .querySelectorAll(ignoredNodes.join(','))
+        .forEach(node => node.remove());
+    return clone.textContent || '';
+}
 export function resolveCodeInfo(el) {
-    const wrapper = el.querySelector('[class*=language-]');
+    const wrapper = el.querySelector('div[class*=language-]');
     const lang = wrapper?.className.match(RE_LANGUAGE)?.[1];
-    const codeEl = wrapper?.querySelector('pre code');
+    const codeEl = wrapper?.querySelector('pre');
     let code = '';
-    if (codeEl) {
-        const clone = codeEl.cloneNode(true);
-        clone
-            .querySelectorAll(ignoredNodes.join(','))
-            .forEach(node => node.remove());
-        code = clone.textContent || '';
-    }
+    if (codeEl)
+        code = resolveCode(codeEl);
     return { lang: resolveLang(lang), code };
 }
 export function useCodeRepl(el) {
@@ -42,6 +44,12 @@ export function useCodeRepl(el) {
     const stderr = ref([]); // like print error
     const error = ref(''); // execute error
     const backendVersion = ref('');
+    onMounted(() => {
+        if (el.value) {
+            const info = resolveCodeInfo(el.value);
+            lang.value = info.lang;
+        }
+    });
     const executeMap = {
         kotlin: executeKotlin,
         go: executeGolang,

package/lib/client/composables/pdf.d.ts

@@ -1,3 +1,15 @@
+/**
+ * Fork for https://github.com/vuepress-theme-hope/vuepress-theme-hope/blob/main/packages/components/src/client/utils/viewPDF.ts
+ *
+ * The MIT License (MIT)
+ * Copyright (C) 2021 - PRESENT by Mr.Hope<mister-hope@outlook.com>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
 import type { PDFEmbedType, PDFTokenMeta } from '../../shared/pdf.js';
 export declare function renderPDF(el: HTMLElement, url: string, embedType: PDFEmbedType, options: PDFTokenMeta): void;
 export declare function usePDF(el: HTMLElement, url: string, options: PDFTokenMeta): void;

package/lib/client/composables/pdf.js

@@ -1,3 +1,15 @@
+/**
+ * Fork for https://github.com/vuepress-theme-hope/vuepress-theme-hope/blob/main/packages/components/src/client/utils/viewPDF.ts
+ *
+ * The MIT License (MIT)
+ * Copyright (C) 2021 - PRESENT by Mr.Hope<mister-hope@outlook.com>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
 import { ensureEndingSlash, isLinkHttp } from 'vuepress/shared';
 import { withBase } from 'vuepress/client';
 import { pluginOptions } from '../options.js';

package/lib/client/composables/size.d.ts

@@ -1,3 +1,15 @@
+/**
+ * Fork for https://github.com/vuepress-theme-hope/vuepress-theme-hope/blob/main/packages/components/src/client/composables/useSize.ts
+ *
+ * The MIT License (MIT)
+ * Copyright (C) 2021 - PRESENT by Mr.Hope<mister-hope@outlook.com>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
 import type { MaybeRef } from '@vueuse/core';
 import type { Ref, ShallowRef, ToRefs } from 'vue';
 import type { SizeOptions } from '../../shared/size.js';

package/lib/client/composables/size.js

@@ -1,3 +1,15 @@
+/**
+ * Fork for https://github.com/vuepress-theme-hope/vuepress-theme-hope/blob/main/packages/components/src/client/composables/useSize.ts
+ *
+ * The MIT License (MIT)
+ * Copyright (C) 2021 - PRESENT by Mr.Hope<mister-hope@outlook.com>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
 import { useEventListener } from '@vueuse/core';
 import { computed, isRef, onMounted, ref, shallowRef, toValue, watch } from 'vue';
 export function useSize(options, extraHeight = 0) {

package/lib/client/shim.d.ts

@@ -1,6 +1,7 @@
-declare module '*.vue' {
-  import type { ComponentOptions } from 'vue'
+import type { ReplEditorData } from '../shared/repl.js'
 
-  const comp: ComponentOptions
-  export default comp
+declare module '@internal/md-power/replEditorData' {
+
+  const res: ReplEditorData
+  export default res
 }

package/lib/node/features/caniuse.d.ts

@@ -3,7 +3,7 @@
  * @[caniuse image](feature_name)
  */
 import type { PluginWithOptions } from 'markdown-it';
-import type { Markdown } from 'vuepress/markdown';
+import type MarkdownIt from 'markdown-it';
 import type { CanIUseOptions } from '../../shared/index.js';
 /**
  * @example
@@ -22,4 +22,4 @@ export declare const caniusePlugin: PluginWithOptions<CanIUseOptions>;
  * :::
  * ```
  */
-export declare function legacyCaniuse(md: Markdown, { mode }?: CanIUseOptions): void;
+export declare function legacyCaniuse(md: MarkdownIt, { mode }?: CanIUseOptions): void;

package/lib/node/features/langRepl.d.ts

@@ -1,2 +1,4 @@
 import type markdownIt from 'markdown-it';
-export declare function langReplPlugin(md: markdownIt): void;
+import type { App } from 'vuepress/core';
+import type { ReplOptions } from '../../shared/repl.js';
+export declare function langReplPlugin(app: App, md: markdownIt, { theme, go, kotlin, rust, }: ReplOptions): Promise<void>;

package/lib/node/features/langRepl.js

@@ -1,17 +1,53 @@
 import container from 'markdown-it-container';
-function createReplContainer(md, type) {
+import { fs, getDirname, path } from 'vuepress/utils';
+const RE_INFO = /^(#editable)?\s*?(.*)$/;
+function createReplContainer(md, lang) {
+    const type = `${lang}-repl`;
     const validate = (info) => info.trim().startsWith(type);
     const render = (tokens, index) => {
         const token = tokens[index];
+        const info = token.info.trim().slice(type.length).trim() || '';
+        // :::lang-repl#editable title
+        const [, editable, title] = info.match(RE_INFO) ?? [];
         if (token.nesting === 1)
-            return '<LanguageRepl>';
+            return `<CodeRepl ${editable ? 'editable' : ''} title="${title || `${lang} playground`}">`;
         else
-            return '</LanguageRepl>';
+            return '</CodeRepl>';
     };
     md.use(container, type, { validate, render });
 }
-export function langReplPlugin(md) {
-    createReplContainer(md, 'kotlin-repl');
-    createReplContainer(md, 'go-repl');
-    createReplContainer(md, 'rust-repl');
+export async function langReplPlugin(app, md, { theme, go = false, kotlin = false, rust = false, }) {
+    kotlin && createReplContainer(md, 'kotlin');
+    go && createReplContainer(md, 'go');
+    rust && createReplContainer(md, 'rust');
+    theme ??= { light: 'github-light', dark: 'github-dark' };
+    const data = { grammars: {} };
+    const themesPath = getDirname(import.meta.resolve('tm-themes'));
+    const grammarsPath = getDirname(import.meta.resolve('tm-grammars'));
+    const readTheme = (theme) => read(path.join(themesPath, 'themes', `${theme}.json`));
+    const readGrammar = (grammar) => read(path.join(grammarsPath, 'grammars', `${grammar}.json`));
+    if (typeof theme === 'string') {
+        data.theme = await readTheme(theme);
+    }
+    else {
+        data.theme = await Promise.all([
+            readTheme(theme.light),
+            readTheme(theme.dark),
+        ]).then(([light, dark]) => ({ light, dark }));
+    }
+    if (kotlin)
+        data.grammars.kotlin = await readGrammar('kotlin');
+    if (go)
+        data.grammars.go = await readGrammar('go');
+    if (rust)
+        data.grammars.rust = await readGrammar('rust');
+    await app.writeTemp('internal/md-power/replEditorData.js', `export default ${JSON.stringify(data, null, 2)}`);
+}
+async function read(file) {
+    try {
+        const content = await fs.readFile(file, 'utf-8');
+        return JSON.parse(content);
+    }
+    catch { }
+    return undefined;
 }

package/lib/node/plugin.js

@@ -1,3 +1,4 @@
+import { addViteOptimizeDepsInclude } from '@vuepress/helper';
 import { caniusePlugin, legacyCaniuse } from './features/caniuse.js';
 import { pdfPlugin } from './features/pdf.js';
 import { createIconCSSWriter, iconsPlugin } from './features/icons/index.js';
@@ -14,14 +15,17 @@ export function markdownPowerPlugin(options = {}) {
     return (app) => {
         const { initIcon, addIcon } = createIconCSSWriter(app, options.icons);
         return {
-            name: '@vuepress-plume/plugin-md-power',
+            name: 'vuepress-plugin-md-power',
             // clientConfigFile: path.resolve(__dirname, '../client/config.js'),
             clientConfigFile: app => prepareConfigFile(app, options),
             define: {
                 __MD_POWER_INJECT_OPTIONS__: options,
             },
             onInitialized: async () => await initIcon(),
-            extendsMarkdown(md) {
+            extendsBundlerOptions(bundlerOptions) {
+                options.repl && addViteOptimizeDepsInclude(bundlerOptions, app, ['shiki/core', 'shiki/wasm']);
+            },
+            extendsMarkdown: async (md, app) => {
                 if (options.caniuse) {
                     const caniuse = options.caniuse === true ? {} : options.caniuse;
                     // @[caniuse](feature_name)
@@ -67,7 +71,7 @@ export function markdownPowerPlugin(options = {}) {
                     md.use(plotPlugin);
                 }
                 if (options.repl)
-                    langReplPlugin(md);
+                    await langReplPlugin(app, md, options.repl);
             },
         };
     };

package/lib/node/prepareConfigFile.js

@@ -32,8 +32,8 @@ export async function prepareConfigFile(app, options) {
         enhances.add(`app.component('Plot', Plot)`);
     }
     if (options.repl) {
-        imports.add(`import LanguageRepl from '${CLIENT_FOLDER}components/LanguageRepl.vue'`);
-        enhances.add(`app.component('LanguageRepl', LanguageRepl)`);
+        imports.add(`import CodeRepl from '${CLIENT_FOLDER}components/CodeRepl.vue'`);
+        enhances.add(`app.component('CodeRepl', CodeRepl)`);
     }
     // enhances.add(`if (__VUEPRESS_SSR__) return`)
     if (options.caniuse) {

package/lib/shared/plugin.d.ts

@@ -2,6 +2,7 @@ import type { CanIUseOptions } from './caniuse.js';
 import type { PDFOptions } from './pdf.js';
 import type { IconsOptions } from './icons.js';
 import type { PlotOptions } from './plot.js';
+import type { ReplOptions } from './repl.js';
 export interface MarkdownPowerPluginOptions {
     pdf?: boolean | PDFOptions;
     icons?: boolean | IconsOptions;
@@ -9,9 +10,12 @@ export interface MarkdownPowerPluginOptions {
     bilibili?: boolean;
     youtube?: boolean;
     codepen?: boolean;
+    /**
+     * @deprecated
+     */
     replit?: boolean;
     codeSandbox?: boolean;
     jsfiddle?: boolean;
-    repl?: boolean;
+    repl?: false | ReplOptions;
     caniuse?: boolean | CanIUseOptions;
 }

package/lib/shared/repl.d.ts

@@ -0,0 +1,22 @@
+import type { BuiltinTheme, ThemeRegistration } from 'shiki';
+export type ThemeOptions = BuiltinTheme | {
+    light: BuiltinTheme;
+    dark: BuiltinTheme;
+};
+export interface ReplOptions {
+    theme?: ThemeOptions;
+    go?: boolean;
+    kotlin?: boolean;
+    rust?: boolean;
+}
+export interface ReplEditorData {
+    grammars: {
+        go?: any;
+        kotlin?: any;
+        rust?: any;
+    };
+    theme: ThemeRegistration | {
+        light: ThemeRegistration;
+        dark: ThemeRegistration;
+    };
+}

package/lib/shared/repl.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vuepress-plugin-md-power",
   "type": "module",
-  "version": "1.0.0-rc.54",
+  "version": "1.0.0-rc.56",
   "description": "The Plugin for VuePres 2 - markdown power",
   "author": "pengzhanbo <volodymyr@foxmail.com>",
   "license": "MIT",
@@ -41,15 +41,19 @@
   },
   "dependencies": {
     "@iconify/utils": "^2.1.23",
+    "@vuepress/helper": "2.0.0-rc.28",
     "@vueuse/core": "^10.9.0",
     "local-pkg": "^0.5.0",
     "markdown-it-container": "^4.0.0",
     "nanoid": "^5.0.7",
-    "vue": "^3.4.25"
+    "shiki": "^1.5.1",
+    "tm-grammars": "^1.11.1",
+    "tm-themes": "^1.4.1",
+    "vue": "^3.4.27"
   },
   "devDependencies": {
-    "@iconify/json": "^2.2.204",
-    "@types/markdown-it": "^14.0.1"
+    "@iconify/json": "^2.2.208",
+    "@types/markdown-it": "^14.1.1"
   },
   "publishConfig": {
     "access": "public"