arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-02-01 12:47:57 +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"> <script setup lang="ts">
import { transformContent } from '@nuxt/content/transformers' import { transformContent } from '@nuxt/content/transformers'
import { createShikiHighlighter } from '@nuxtjs/mdc/runtime/highlighter/shiki'
import { upperFirst, camelCase, kebabCase } from 'scule' import { upperFirst, camelCase, kebabCase } from 'scule'
import MaterialTheme from 'shiki/themes/material-theme.mjs' import { useShikiHighlighter } from '~/composables/useShikiHighlighter'
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'
// eslint-disable-next-line vue/no-dupe-keys // eslint-disable-next-line vue/no-dupe-keys
const props = defineProps({ const props = defineProps({
@@ -273,18 +267,8 @@ function renderObject (obj: any) {
return obj return obj
} }
const highlighter = createShikiHighlighter({ const highlighter = useShikiHighlighter()
bundledThemes: {
'material-theme': MaterialTheme,
'material-theme-lighter': MaterialThemeLighter,
'material-theme-palenight': MaterialThemePalenight
},
bundledLangs: {
html: HtmlLang,
mdc: MdcLang,
vue: VueLang
}
})
const { data: ast } = await useAsyncData( const { data: ast } = await useAsyncData(
`${name}-ast-${JSON.stringify({ props: componentProps, slots: props.slots, code: props.code })}`, `${name}-ast-${JSON.stringify({ props: componentProps, slots: props.slots, code: props.code })}`,
async () => { async () => {

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

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