vue-markdown高亮显示超链接

要在 `vue-markdown` 中实现超链接的高亮显示，可以通过自定义渲染器来扩展其功能。以下是具体的解决方案： ### 自定义渲染器以支持超链接高亮 通过引入并配置 `markdown-it` 插件，可以修改默认的行为以满足需求。以下是一个完整的示例代码[^1]。 ```javascript // 安装必要的依赖项 npm install markdown-it markdown-it-anchor vue-markdown-loader highlight.js --save-dev import Vue from 'vue'; import VueMarkdown from 'vue-markdown'; // 配置 markdown-it 和插件 const MarkdownIt = require('markdown-it'); const hljs = require('highlight.js'); Vue.component('vue-markdown', VueMarkdown); export default { name: 'App', components: { VueMarkdown }, data() { return { markdownContent: '# Example\nThis is a [link](https://example.com).' }; }, methods: { createRenderer(md) { md.renderer.rules.link_open = function (tokens, idx, options, env, self) { const token = tokens[idx]; token.attrPush(['class', 'custom-link-highlight']); return self.renderToken(tokens, idx, options); }; // 使用 highlight.js 对代码块进行高亮处理 md.set({ highlight: function (str, lang) { if (lang && hljs.getLanguage(lang)) { try { return `<pre class="hljs"><code>${ hljs.highlight(str, { language: lang }).value }</code></pre>`; } catch (__) {} } return `<pre class="hljs"><code>${md.utils.escapeHtml( str )}</code></pre>`; } }); } }, mounted() { this.$refs.vueMarkdown.md.use(this.createRenderer); // 应用自定义渲染逻辑 } }; ``` #### CSS样式设置 为了使超链接具有视觉上的高亮效果，需添加相应的CSS类[^2]: ```css .custom-link-highlight { color: blue; /* 设置颜色 */ font-weight: bold; /* 加粗字体 */ text-decoration: underline; /* 下划线 */ } ``` 以上方法实现了对 `vue-markdown` 的增强，使其能够识别并突出显示所有的超链接内容。同时利用了 `highlight.js` 来完成代码片段的语法着色工作。