refactor: 💡 使用 markdown-it-highlightjs 进行高亮

This commit is contained in:
ChandlerVer5 2023-03-05 13:58:45 +08:00
parent 8619ac4667
commit ab08df9823
4 changed files with 15 additions and 16 deletions

View File

@ -25,9 +25,9 @@
"dependencies": { "dependencies": {
"@traptitech/markdown-it-katex": "^3.6.0", "@traptitech/markdown-it-katex": "^3.6.0",
"@vueuse/core": "^9.13.0", "@vueuse/core": "^9.13.0",
"highlight.js": "^11.7.0",
"katex": "^0.16.4", "katex": "^0.16.4",
"markdown-it": "^13.0.1", "markdown-it": "^13.0.1",
"markdown-it-highlightjs": "^4.0.1",
"naive-ui": "^2.34.3", "naive-ui": "^2.34.3",
"pinia": "^2.0.32", "pinia": "^2.0.32",
"vue": "^3.2.47", "vue": "^3.2.47",

View File

@ -16,12 +16,12 @@ specifiers:
axios: ^1.3.4 axios: ^1.3.4
crypto-js: ^4.1.1 crypto-js: ^4.1.1
eslint: ^8.35.0 eslint: ^8.35.0
highlight.js: ^11.7.0
husky: ^8.0.3 husky: ^8.0.3
katex: ^0.16.4 katex: ^0.16.4
less: ^4.1.3 less: ^4.1.3
lint-staged: ^13.1.2 lint-staged: ^13.1.2
markdown-it: ^13.0.1 markdown-it: ^13.0.1
markdown-it-highlightjs: ^4.0.1
naive-ui: ^2.34.3 naive-ui: ^2.34.3
npm-run-all: ^4.1.5 npm-run-all: ^4.1.5
pinia: ^2.0.32 pinia: ^2.0.32
@ -38,9 +38,9 @@ specifiers:
dependencies: dependencies:
'@traptitech/markdown-it-katex': 3.6.0 '@traptitech/markdown-it-katex': 3.6.0
'@vueuse/core': 9.13.0_vue@3.2.47 '@vueuse/core': 9.13.0_vue@3.2.47
highlight.js: 11.7.0
katex: 0.16.4 katex: 0.16.4
markdown-it: 13.0.1 markdown-it: 13.0.1
markdown-it-highlightjs: 4.0.1
naive-ui: 2.34.3_vue@3.2.47 naive-ui: 2.34.3_vue@3.2.47
pinia: 2.0.32_hmuptsblhheur2tugfgucj7gc4 pinia: 2.0.32_hmuptsblhheur2tugfgucj7gc4
vue: 3.2.47 vue: 3.2.47
@ -3346,6 +3346,12 @@ packages:
engines: {node: '>=8'} engines: {node: '>=8'}
dev: true dev: true
/markdown-it-highlightjs/4.0.1:
resolution: {integrity: sha512-EPXwFEN6P5nqR3G4KjT20r20xbGYKMMA/360hhSYFmeoGXTE6hsLtJAiB/8ID8slVH4CWHHEL7GX0YenyIstVQ==}
dependencies:
highlight.js: 11.7.0
dev: false
/markdown-it/13.0.1: /markdown-it/13.0.1:
resolution: {integrity: sha512-lTlxriVoy2criHP0JKRhO2VDG9c2ypWCsT237eDiLqi09rmbKoUetyGHq2uOIRoRS//kfoJckS0eUzzkDR+k2Q==} resolution: {integrity: sha512-lTlxriVoy2criHP0JKRhO2VDG9c2ypWCsT237eDiLqi09rmbKoUetyGHq2uOIRoRS//kfoJckS0eUzzkDR+k2Q==}
hasBin: true hasBin: true

View File

@ -1,6 +1,6 @@
import type { App } from 'vue' import type { App } from 'vue'
import setupHighlightDirective from './highlight' // import setupHighlightDirective from './highlight'
export function setupDirectives(app: App) { export function setupDirectives(app: App) {
setupHighlightDirective(app) // setupHighlightDirective(app)
} }

View File

@ -2,9 +2,8 @@
import { computed, ref } from 'vue' import { computed, ref } from 'vue'
import MarkdownIt from 'markdown-it' import MarkdownIt from 'markdown-it'
import mdKatex from '@traptitech/markdown-it-katex' import mdKatex from '@traptitech/markdown-it-katex'
import hljs from 'highlight.js' import mdhljs from 'markdown-it-highlightjs'
import { useBasicLayout } from '@/hooks/useBasicLayout' import { useBasicLayout } from '@/hooks/useBasicLayout'
import { t } from '@/locales'
interface Props { interface Props {
inversion?: boolean inversion?: boolean
@ -21,17 +20,11 @@ const textRef = ref<HTMLElement>()
const mdi = new MarkdownIt({ const mdi = new MarkdownIt({
linkify: true, linkify: true,
highlight: (code, language) => {
const validLang = !!(language && hljs.getLanguage(language))
if (validLang) {
const lang = language ?? ''
return `<pre class="code-block-wrapper"><div class="code-block-header"><span class="code-block-header__lang">${lang}</span><span class="code-block-header__copy">${t('chat.copyCode')}</span></div><code class="hljs code-block-body ${language}">${hljs.highlight(code, { language: lang }).value}</code></pre>`
}
return `<pre style="background: none">${hljs.highlightAuto(code).value}</pre>`
},
}) })
mdi.use(mdKatex, { blockClass: 'katexmath-block rounded-md p-[10px]', errorColor: ' #cc0000' }) mdi
.use(mdhljs, { auto: true, inline: true })
.use(mdKatex, { blockClass: 'katexmath-block rounded-md p-[10px]', errorColor: ' #cc0000' })
const wrapClass = computed(() => { const wrapClass = computed(() => {
return [ return [