htmledit_views">
由markdown-it将文本生成html然后渲染到页面上，但是现在你点击里面生成好的链接只能在本标签页打开，怎么将其设置为在新标签打开呢？
安装markdown-it
npm install markdown-it使用markdown-it
javascript">const mdi = new MarkdownIt({
html: true,
linkify: true,
highlight(code, language) {
const validLang = !!(language && hljs.getLanguage(language));
if (validLang) {
const lang = language ?? '';
return highlightBlock(hljs.highlight(lang, code, true).value, lang);
}
return highlightBlock(hljs.highlightAuto(code).value, '');
},
});
// 自定义链接渲染--这个才是关键
mdi.renderer.rules.link_open = (tokens, idx) => {
const href = tokens[idx].attrGet('href');
return `<a href="${href}" target="_blank" rel="noopener noreferrer">`;
};
// 使用 KaTeX
mdi.use(mdKatex, { blockClass: 'katexmath-block rounded-md p-10', errorColor: '#cc0000' });
const text = computed(() => {
const value = props.text;
if (!props.inversion && !props.error) return mdi.render(value);
return value;
});
其中用到的另外两个辅助包：
javascript">import mdKatex from '@traptitech/markdown-it-katex';
import hljs from 'highlight.js';
说明：
使用示例
如果你的 Markdown 文本中包含类似以下内容：
- mdKatex：这是一个 Markdown-it 插件，用于在 Markdown 文本中渲染 LaTeX 数学公式。它依赖于 KaTeX 来进行实际的渲染。
-
作用
- 支持数学公式：允许在 Markdown 文本中嵌入 LaTeX 语法的数学公式。
- 自动渲染：将 LaTeX 语法转换为 HTML，从而在网页上正确显示数学公式。
- 配置选项：可以通过配置选项自定义渲染效果，例如设置块级公式的类名、错误颜色等。
这是一个公式：$$E=mc^2$$使用
mdKatex后，$$E=mc^2$$将被渲染为相应的数学公式，而不是普通文本。
import hljs from 'highlight.js'; 这行代码的作用是导入 Highlight.js 库，它用于语法高亮显示代码块。具体来说：
作用
语法高亮：自动为多种编程语言的代码提供语法高亮显示，使代码更易读。 多语言支持：支持多种编程语言，可以通过设置来指定代码的语言类型。 定制化：允许自定义高亮主题和样式，以匹配应用的设计。
Highlight.js 将自动将这段代码高亮显示，以便在网页上呈现时更具可读性。
使用示例
在 Markdown 渲染中，你可以将代码块用特定的标记包围，例如：
```javascript const a = 10;
Highlight.js 将自动将这段代码高亮显示，以便在网页上呈现时更具可读性。
