/
githubmirror
/
vuetify
Обзор
Документация
Войти
/
githubmirror
/
vuetify
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
packages/docs/src/components/api/PrismCell.vue
40 строк
1 KB
John Leider
docs: replace ref with shallowRef where it makes sense
10 мар 2025, 16:44
10 мар 2025, 16:44
c8500a1
Код
Авторство
О чём код?
<template> <pre v-html="html" /> </template> <script setup lang="ts"> // Styles import Prism from 'prismjs' import 'prismjs/themes/prism.css' import 'prismjs/components/prism-scss.js' import 'prismjs/components/prism-typescript.js' // Types import type { PropType } from 'vue' const props = defineProps({ code: null, language: { type: String as PropType<'typescript' | 'scss'>, default: 'typescript', }, }) const html = shallowRef('') watchEffect(async () => { html.value = highlight(String(await props.code)) }) const MAP = { typescript: [Prism.languages.typescript, 'ts'] as const, scss: [Prism.languages.scss, 'scss'] as const, } function highlight (value: string) { const code = typeof value === 'object' ? JSON.stringify(value) : value const [out, stripped] = stripLinks(code ?? '') const [grammar, language] = MAP[props.language] const highlighted = Prism.highlight(out, grammar, language) return insertLinks(highlighted, stripped) } </script>