当前位置: 首页 > news >正文

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

由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" 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;
});

其中用到的另外两个辅助包:

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

http://www.lryc.cn/news/442771.html

相关文章:

  • linux在工作中常用命令
  • 828华为云征文|部署知识库问答系统 MaxKB
  • 数据结构之算法复杂度
  • Python用TOPSIS熵权法重构粮食系统及期刊指标权重多属性决策MCDM研究|附数据代码...
  • 【例题】lanqiao4403 希尔排序模板题
  • 【C/C++】速通涉及string类的经典编程题
  • MySQL:库表的基本操作
  • JS领域的AI工程利器分享
  • 2024/9/20 使用QT实现扫雷游戏
  • 09.20 C++对C的扩充以及C++中的封装、SeqList
  • Git提交类型
  • C++速通LeetCode简单第18题-杨辉三角(全网唯一递归法)
  • Redis作为单线程模型,为什么效率高、速度快呢?
  • 人工智能——猴子摘香蕉问题
  • 对ViT 中Patch Embedding理解
  • Redis基本命令详解
  • Java之线程篇四
  • 计算机毕业设计之:基于微信小程序的校园流浪猫收养系统
  • SpringBoot:关于Redis的配置失效(版本问题)
  • halcon 快速定义字典
  • Sublime text3怎么关闭提示更新
  • 生成式语言模型技术栈
  • 进程分析工具Process Explorer使用
  • vue 中如何实现鼠标拖动出发滚动条的跟随移动?
  • 【Java EE】文件IO
  • 使用 React、Material-UI、Spring、MySQL、MyBatis 以及高德 API 模拟实时位置信息
  • UniApp一句话经验: px -> rpx动态转换和动态元素区域的获取
  • Python基于flask框架的智能停车场车位系统 数据可视化分析系统fyfc81
  • 海外服务器哪个速度最快且性能稳定
  • C/C++通过CLion2024进行Linux远程开发保姆级教学