diff --git a/src/components/copilot/SwagCopilotSidebar.vue b/src/components/copilot/SwagCopilotSidebar.vue index a0c64243..41ee5350 100644 --- a/src/components/copilot/SwagCopilotSidebar.vue +++ b/src/components/copilot/SwagCopilotSidebar.vue @@ -111,20 +111,18 @@ watch( } ); -import md from "./markdown"; -const renderer = md(); +import render from "./markdown"; const markdown = ref(null); watch( () => response.value?.answer, - () => { + async () => { + const myMarkdown = response.value?.answer || ''; try { - console.log('rendering') - markdown.value = renderer.render(response.value?.answer || ''); - console.log('rendered') + markdown.value = await render(myMarkdown); } catch (e) { console.error(e); - markdown.value = (response.value?.answer || '') + markdown.value = myMarkdown .replace(/&/g, "&") .replace(//g, ">") diff --git a/src/components/copilot/markdown.ts b/src/components/copilot/markdown.ts index dcc67eaa..536b7d91 100644 --- a/src/components/copilot/markdown.ts +++ b/src/components/copilot/markdown.ts @@ -21,18 +21,40 @@ import * as shiki from 'shiki'; //import {getHighlighter} from 'shiki-processor'; //import onigasm from 'shiki/dist/onig.wasm' -// https://github.com/shikijs/shiki/blob/main/packages/shiki/src/__tests__/__fixtures__/index_browser_custom_wasm.html -// https://vitejs.dev/guide/features.html#webassembly -// https://www.npmjs.com/package/vite-plugin-wasm -// shiki.setWasm(onigasm) -shiki.setCDN('/shiki/'); -const highlighter = await shiki.getHighlighter({ - theme: 'github-dark', - themes: ['github-dark', 'github-light'], - langs: shiki.BUNDLED_LANGUAGES, -}); - -export default () => { +function extractLanguages(markdown) { + const pattern = /```(\w+)/g; + const matches = []; + let match; + + while ((match = pattern.exec(markdown)) !== null) { + matches.push(match[1].toLowerCase()); + } + + return matches; +} + +const arrayIntersection = (arr1, arr2) => arr1.filter(value => arr2.includes(value)); +const bundledLangs = shiki.BUNDLED_LANGUAGES.map(({id}) => id); + +export default async (markdown: string) => { + if (markdown === '') { + return ''; + } + + // we need to extract used languages to optimize performance and load only used languages + const langs = arrayIntersection(bundledLangs, extractLanguages(markdown)); + + // https://github.com/shikijs/shiki/blob/main/packages/shiki/src/__tests__/__fixtures__/index_browser_custom_wasm.html + // https://vitejs.dev/guide/features.html#webassembly + // https://www.npmjs.com/package/vite-plugin-wasm + // shiki.setWasm(onigasm) + shiki.setCDN('/shiki/'); + const highlighter = await shiki.getHighlighter({ + theme: 'github-dark', + themes: ['github-dark', 'github-light'], + langs, + }); + const md = MarkdownIt({ html: true, linkify: true, @@ -79,5 +101,5 @@ export default () => { slugify, } as HeadersPluginOptions) - return md + return md.render(markdown); }; \ No newline at end of file