余姚建设局网站,int域名网站有哪些,十堰小程序开发,深圳竞价排名网络推广由markdown-it将文本生成html然后渲染到页面上#xff0c;但是现在你点击里面生成好的链接只能在本标签页打开#xff0c;怎么将其设置为在新标签打开呢#xff1f;
安装markdown-it
npm install markdown-it
使用markdown-it
const mdi new MarkdownIt({html: true,l…由markdown-it将文本生成html然后渲染到页面上但是现在你点击里面生成好的链接只能在本标签页打开怎么将其设置为在新标签打开呢
安装markdown-it
npm install markdown-it
使用markdown-it
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 relnoopener 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;
});其中用到的另外两个辅助包
import mdKatex from traptitech/markdown-it-katex;
import hljs from highlight.js; 说明 使用示例
如果你的 Markdown 文本中包含类似以下内容
mdKatex这是一个 Markdown-it 插件用于在 Markdown 文本中渲染 LaTeX 数学公式。它依赖于 KaTeX 来进行实际的渲染。 作用 支持数学公式允许在 Markdown 文本中嵌入 LaTeX 语法的数学公式。自动渲染将 LaTeX 语法转换为 HTML从而在网页上正确显示数学公式。配置选项可以通过配置选项自定义渲染效果例如设置块级公式的类名、错误颜色等。这是一个公式$$Emc^2$$ 使用 mdKatex 后$$Emc^2$$ 将被渲染为相应的数学公式而不是普通文本。
import hljs from highlight.js; 这行代码的作用是导入 Highlight.js 库它用于语法高亮显示代码块。具体来说
作用
语法高亮自动为多种编程语言的代码提供语法高亮显示使代码更易读。 多语言支持支持多种编程语言可以通过设置来指定代码的语言类型。 定制化允许自定义高亮主题和样式以匹配应用的设计。
Highlight.js 将自动将这段代码高亮显示以便在网页上呈现时更具可读性。
使用示例
在 Markdown 渲染中你可以将代码块用特定的标记包围例如
javascript const a 10;
Highlight.js 将自动将这段代码高亮显示以便在网页上呈现时更具可读性。
