markdown-it:将Markdown文本转换为HTML格式,展示在页面,怎么自定义里面的a标签设置为在新标签页打开

由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 将自动将这段代码高亮显示,以便在网页上呈现时更具可读性。

相关推荐
贵沫末1 分钟前
React——基础
前端·react.js·前端框架
每天开心5 分钟前
深入理解 CSS 选择器:从基础到高级
css·html·ai编程
aklry13 分钟前
uniapp三步完成一维码的生成
前端·vue.js
Rubin9320 分钟前
判断元素在可视区域?用于滚动加载,数据埋点等
前端
爱学习的茄子20 分钟前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js
用户38022585982421 分钟前
使用three.js实现3D地球
前端·three.js
程序无bug23 分钟前
Spring 面向切面编程AOP 详细讲解
java·前端
zhanshuo23 分钟前
鸿蒙UI开发全解:JS与Java双引擎实战指南
前端·javascript·harmonyos
JohnYan23 分钟前
模板+数据的文档生成技术方案设计和实现
javascript·后端·架构
撰卢1 小时前
如何提高网站加载速度速度
前端·javascript·css·html