记录一下遇到的 展示由 @toast-ui/editor 写的markdown 并实现代码高亮
<template>
<mtd-container class="sidebar-container">
<div class="sidebar-main">
<div id="marked-content">
<div class="marked-markdown-body-content" v-html="content"></div>
</div>
</div>
<a-anchor class="title-wrap" :offset-top="20" container="#marked-content">
<a-anchor-link
v-for="link in anchorLinkList"
:href="link.href"
:title="link.title"
:key="link.key"
:class="link.key"
/>
</a-anchor>
</mtd-container>
</template>
<script setup>
import { marked } from 'marked'
import { computed, ref } from 'vue'
import hljs from 'highlight.js'
import 'highlight.js/styles/vs.css'
// 文章详情
const articleDetail = ref(null)
const anchorLinkList = ref([])
const anchorIndex = ref(0)
// 文章内容
const content = computed(() => {
if (articleDetail.value?.content) {
const renderer = {
// 自定义heading 实现 锚点标题的跳转
heading(text, level) {
const idName = level + '_' + anchorIndex.value++
const className = 'level' + level + ' markdown-anchor-link-box'
anchorLinkList.value.push({
level: level,
title: text,
key: className,
href: '#' + idName
})
return `
<h${level} id=${idName} class=${className}>
${text}
</h${level}>
`
},
// 自定义代码块渲染 用于highlight.js高亮
code(code, infostring) {
const lang = (infostring || 'javascript').match(/\S*/)[0]
try {
const highlighted = hljs.highlight(code, { language: lang, ignoreIllegals: true }).value
return `<pre><code class="hljs language-${lang}">${highlighted}</code></pre>`
} catch (err) {
console.log('highlight error', err)
}
},
// 自定义内嵌代码渲染 用于highlight.js高亮
codespan(code) {
// 解码 HTML 实体 用于解决 > & 没有解析的情况
const decodedCode = decodeHtmlEntities(code)
// 由于内嵌代码通常不指定语言,所以我们直接使用 highlight.js 的 highlightAuto 方法
const highlighted = hljs.highlightAuto(decodedCode).value
return `<code class="hljs">${highlighted}</code>`
}
}
marked.use({ renderer })
return marked.parse(articleDetail.value.content)
}
return ''
})
// 解码 HTML 实体的辅助函数
function decodeHtmlEntities(text) {
const textArea = document.createElement('textarea')
textArea.innerHTML = text
return textArea.value
}
</script>
<style lang="less">
#marked-content {
/* 为所有表格设置边框 */
table {
border-collapse: collapse;
width: 100%;
}
/* 为表格的单元格设置边框 */
th,
td {
border: 1px solid #ddd;
padding: 8px;
}
/* 为表头设置背景颜色 */
th {
background-color: #f2f2f2;
}
/* 为表格行添加斑马线效果 */
tr:nth-child(even) {
background-color: #f9f9f9;
}
.marked-markdown-body-content {
/* 为内嵌代码和代码块添加背景颜色 */
code {
background-color: #f7f7f7;
border-radius: 4px;
padding: 2px;
}
}
}
</style>
<style lang="less" scoped>
.aside {
width: 220px;
}
.sidebar-container {
height: calc(100vh - 60px);
min-height: calc(100vh - 60px);
}
.sidebar-main {
flex: 1 1 auto;
min-width: 0;
padding: 20px;
background-color: #fff;
overflow-y: hidden;
#marked-content {
height: calc(100vh - 120px);
overflow-y: auto;
}
}
.title-wrap {
flex: 0 0 auto;
position: sticky;
top: 80px;
padding-right: 10px;
height: 500px;
overflow-y: auto;
.level1 {
padding-left: 12px;
}
.level2 {
padding-left: 24px;
}
.level3 {
padding-left: 36px;
}
.level4 {
padding-left: 48px;
}
.level5 {
padding-left: 60px;
}
.level6 {
padding-left: 72px;
}
}
</style>
PS:
“@toast-ui/editor”: “3.2.1”,
“highlight.js”: “11.9.0”,
“marked”: “11.1.0”,
marked.js v8.0.0之后在options里去掉了 hightlight的配置项,所以需要在renderer 里 自定义code(代码块) 和 codespan(内嵌代码)