perf:集成代码块复制按钮增加title

This commit is contained in:
zyh
2023-06-16 16:20:36 +08:00
parent 05d40ab946
commit 88e5ceca4c
2 changed files with 13 additions and 3 deletions

View File

@@ -5,16 +5,20 @@
/* eslint-disable max-len */ /* eslint-disable max-len */
module.exports = function (md) { module.exports = function (md) {
// === Start: 防止复制按钮不断被创建 === // === Start: Patch 防止复制按钮不断被创建 ===
if (!md.renderer.rules.originalFence) { if (!md.renderer.rules.originalFence) {
md.renderer.rules.originalFence = md.renderer.rules.fence md.renderer.rules.originalFence = md.renderer.rules.fence
} }
// === End: Patch ===
const fence = md.renderer.rules.originalFence const fence = md.renderer.rules.originalFence
// === End: Patch ===
// const fence = md.renderer.rules.fence
md.renderer.rules.fence = function () { md.renderer.rules.fence = function () {
const i18n = require('@/components/common/i18n')
const title = i18n.default.t('overall.copyText')
const rawCode = fence.apply(void 0, arguments) const rawCode = fence.apply(void 0, arguments)
const button = '\n <button class="v-md-copy-code-btn" type="button">\n <i class="nz-icon nz-icon-override"></i>\n </button>' const button = `\n <button title="${title}" class="v-md-copy-code-btn" type="button">\n <i class="nz-icon nz-icon-override"></i>\n </button>`
const finalCode = rawCode.replace('<!--beforeend-->', button + '<!--beforeend-->').replace('v-md-pre-wrapper', 'v-md-pre-wrapper copy-code-mode') const finalCode = rawCode.replace('<!--beforeend-->', button + '<!--beforeend-->').replace('v-md-pre-wrapper', 'v-md-pre-wrapper copy-code-mode')
return finalCode return finalCode
} }

View File

@@ -54,6 +54,12 @@ import hljs from 'highlight.js'
// markdown支持代码复制 // markdown支持代码复制
import createCopyCodePlugin from '@/components/common/copy-code/index' import createCopyCodePlugin from '@/components/common/copy-code/index'
import '@/components/common/copy-code/copy-code.css' import '@/components/common/copy-code/copy-code.css'
VMdPreview.xss.extend({
// extend white list
whiteList: {
button: ['title']
}
})
VMdPreview.use(githubTheme, { VMdPreview.use(githubTheme, {
Hljs: hljs Hljs: hljs
}) })