markdown-it使用markdown-it-link-attributes 插件来更新<a>标签在打开一个新的标签
·
测试在测试的时候,给我提了一个优化的点,希望如果是网址的话,点击链接能够新开一个标签页面,我就使用了 markdown-it-link-attributes插件
安装必要的依赖
首先,确保你安装了 `markdown-it` 和 `markdown-it-link-attributes` 插件:
npm install markdown-it markdown-it-link-attributes
示例代码
展示如何配置 `markdown-it` 以确保所有链接都在新标签页中打开:
import markdownit from "markdown-it";
import linkAttributes from "markdown-it-link-attributes"
import texmath from "markdown-it-texmath";
import katex from "katex";
const md = markdownit({
html: true,
breaks: true,
linkify: true,
typographer: true
});
// 使用 texmath 插件,并配置引擎和分隔符
md.use(texmath, {
engine: katex,
delimiters: [
"dollars", "brackets" // 支持美元符号和方括号作为分隔符
]
})
// 使用 linkAttributes 插件,并配置目标属性和 rel 属性
md.use(linkAttributes, {
pattern: /https?:\/\/(www\.)?/i, // 匹配所有 HTTP/HTTPS 链接
attrs: {
target: '_blank', // 设置所有链接在新标签页打开
rel: 'noopener' // 增加这个属性可以提高安全性
}
})
//省略其他代码
//最终使用
return md.render(markdown);

更多推荐
所有评论(0)