arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-19 22:41:42 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs: move shiki highlighter to composable (#1325)

Browse Source
This commit is contained in:
Farnabaz
2024-02-06 16:12:27 +01:00
committed by GitHub
parent 45121916d0
commit a297c3b41e
3 changed files with 33 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
docs/components/content/ComponentExample.vue
View File

@@ -22,13 +22,8 @@
import { camelCase } from 'scule'
import { fetchContentExampleCode } from '~/composables/useContentExamplesCode'
import { transformContent } from '@nuxt/content/transformers'
import { createShikiHighlighter } from '@nuxtjs/mdc/runtime/highlighter/shiki'
import MaterialTheme from 'shiki/themes/material-theme.mjs'
import MaterialThemeLighter from 'shiki/themes/material-theme-lighter.mjs'
import MaterialThemePalenight from 'shiki/themes/material-theme-palenight.mjs'
import HtmlLang from 'shiki/langs/html.mjs'
import MdcLang from 'shiki/langs/mdc.mjs'
import VueLang from 'shiki/langs/vue.mjs'
import { useShikiHighlighter } from '~/composables/useShikiHighlighter'
const props = defineProps({
component: {
@@ -85,18 +80,7 @@ const data = await fetchContentExampleCode(camelName)
const hasCode = computed(() => !props.hiddenCode && (data?.code || instance.slots.code))
const highlighter = createShikiHighlighter({
bundledThemes: {
'material-theme': MaterialTheme,
'material-theme-lighter': MaterialThemeLighter,
'material-theme-palenight': MaterialThemePalenight
},
bundledLangs: {
html: HtmlLang,
mdc: MdcLang,
vue: VueLang
}
})
const highlighter = useShikiHighlighter()
const { data: ast } = await useAsyncData(`content-example-${camelName}-ast`, () => transformContent('content:_markdown.md', `\`\`\`vue\n${data?.code ?? ''}\n\`\`\``, {
markdown: {
highlight: {