diff --git a/examples/sites/src/assets/custom-markdown.css b/examples/sites/src/assets/custom-markdown.css index 3809f5a483..494f2b3842 100644 --- a/examples/sites/src/assets/custom-markdown.css +++ b/examples/sites/src/assets/custom-markdown.css @@ -97,6 +97,8 @@ body .markdown-body { } .markdown-body code { text-shadow: none !important; + font-size: 120%; + font-family: Consolas, 'Courier New', monospace !important; } html.dark.dark .markdown-body { @@ -115,6 +117,63 @@ html.dark.dark .markdown-body code .token.operator { background-color: transparent; } -html.dark.dark .markdown-body code .hljs-string { - color: #6f42c1; +/* 指南中的代码块高亮 */ +html.dark.dark .markdown-body code { + &.language-bash { + color: #9ecbff; + .function { + color: #b392f0; + } + } + + &.language-js, + &.language-javascript { + color: #e1e4e8; + .punctuation { + color: #e1e4e8; + } + .keyword { + color: #f97583; + } + .string { + color: #9ecbff; + } + .function { + color: #b392f0; + } + .literal-property, + .property { + color: #b392f0; + } + .operator { + color: #e1e4e8; + } + .constant { + color: #e1e4e8; + } + } + + &.language-html { + color: #e1e4e8; + .tag { + color: #85e89d; + } + .punctuation { + color: #e1e4e8; + } + .attr-name { + color: #f97583; + } + .attr-value { + color: #9ecbff; + } + .literal-property, + .string-property, + .property { + color: #b392f0; + } + .string { + color: #9ecbff; + } + } } diff --git a/examples/sites/src/main.js b/examples/sites/src/main.js index 2d3809bcfa..d009daa8d5 100644 --- a/examples/sites/src/main.js +++ b/examples/sites/src/main.js @@ -27,6 +27,7 @@ import hljs from 'highlight.js/lib/core' import javascript from 'highlight.js/lib/languages/javascript' import css from 'highlight.js/lib/languages/css' import html from 'highlight.js/lib/languages/xml' +import tsPath from 'highlight.js/lib/languages/typescript' import docsearch from '@docsearch/js' import '@docsearch/css' import { doSearchEverySite } from './tools/docsearch' @@ -37,6 +38,7 @@ const envTarget = import.meta.env.VITE_BUILD_TARGET || 'open' hljs.registerLanguage('javascript', javascript) hljs.registerLanguage('css', css) hljs.registerLanguage('html', html) +hljs.registerLanguage('ts', tsPath) if (!location.href.includes('tiny-vue-plus')) { docsearch({ diff --git a/examples/sites/src/views/components-doc/components/async-highlight.vue b/examples/sites/src/views/components-doc/components/async-highlight.vue index 6d822066b7..e01ac34283 100644 --- a/examples/sites/src/views/components-doc/components/async-highlight.vue +++ b/examples/sites/src/views/components-doc/components/async-highlight.vue @@ -9,7 +9,6 @@ import { defineComponent, ref, watch } from 'vue' import hljs from 'highlight.js/lib/core' import 'highlight.js/styles/github.css' -import tsPath from 'highlight.js/lib/languages/typescript' export default defineComponent({ name: 'AsyncHighlight', @@ -18,7 +17,7 @@ export default defineComponent({ type: String, default: '' }, - types: { + filename: { type: String } }, @@ -26,21 +25,13 @@ export default defineComponent({ const highlightFinish = ref(false) const highlightCode = ref('') - const getFormatCodes = (types) => { - hljs.registerLanguage('ts', tsPath) - const textHtml = hljs.highlight(props.code, { language: types }).value - - return textHtml - } watch( props, () => { setTimeout(() => { // highlight和其他同步任务叠加容易形成长任务,改成异步消除长任务。 - if (props.types && props.types === 'html') { - highlightCode.value = props.code - } else if (props.types && props.types === 'ts') { - highlightCode.value = getFormatCodes(props.types) + if (props.filename && props.filename.endsWith('.vue')) { + highlightCode.value = hljs.highlight(props.code, { language: 'html' }).value } else { highlightCode.value = hljs.highlightAuto(props.code).value } @@ -58,13 +49,59 @@ export default defineComponent({