arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-18 14:08:06 +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/ComponentCard.vue
View File

@@ -52,14 +52,8 @@
<script setup lang="ts">
import { transformContent } from '@nuxt/content/transformers'
import { createShikiHighlighter } from '@nuxtjs/mdc/runtime/highlighter/shiki'
import { upperFirst, camelCase, kebabCase } from 'scule'
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'
// eslint-disable-next-line vue/no-dupe-keys
const props = defineProps({
@@ -273,18 +267,8 @@ function renderObject (obj: any) {
return obj
}
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(
`${name}-ast-${JSON.stringify({ props: componentProps, slots: props.slots, code: props.code })}`,
async () => {

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: {

27
docs/composables/useShikiHighlighter.ts Normal file
View File

@@ -0,0 +1,27 @@
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'
let highlighter
export const useShikiHighlighter = () => {
if (!highlighter) {
highlighter = createShikiHighlighter({
bundledThemes: {
'material-theme': MaterialTheme,
'material-theme-lighter': MaterialThemeLighter,
'material-theme-palenight': MaterialThemePalenight
},
bundledLangs: {
html: HtmlLang,
mdc: MdcLang,
vue: VueLang
}
})
}
return highlighter
}