展示由 @toast-ui/editor 写的markdown 并实现代码高亮 + 标题锚点跳转

记录一下遇到的 展示由 @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 实体 用于解决 &gt; &amp; 没有解析的情况
	            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（内嵌代码）