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

embedded/2024/11/13 16:09:17/
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 将自动将这段代码高亮显示,以便在网页上呈现时更具可读性。


http://www.ppmy.cn/embedded/114587.html

相关文章

油烟机制造5G智能工厂物联数字孪生平台,推进制造业数字化转型

油烟机制造5G智能工厂物联数字孪生平台&#xff0c;是智能制造与信息技术的深度融合产物。数字孪生工业互联平台通过部署在工厂各个环节的传感器和设备&#xff0c;实时采集、分析和处理生产过程中的海量数据&#xff0c;构建出高度逼真的数字孪生模型。这一模型不仅能够真实反…

在 Mac 中设置环境变量

目录 什么是环境变量&#xff0c;为什么它们重要&#xff1f;什么是环境变量&#xff1f;举个例子 如何查看环境变量如何设置和修改环境变量1. 临时设置环境变量2. 永久设置环境变量3. 修改现有环境变量 环境变量在开发中的应用在 Node.js 项目中使用环境变量在 Python 项目中使…

前端页面访问url完整过程解析

前端页面访问URL的完整过程是一个复杂但有序的流程&#xff0c;它涉及到多个层面的技术和协议。以下是该过程的详细讲解&#xff1a; 1. 用户输入URL并按下回车 当用户在浏览器的地址栏中输入一个URL并按下回车时&#xff0c;浏览器开始处理这个请求。 2. 浏览器查找缓存 浏…

基于MTL的多任务视频推荐系统

多任务学习&#xff0c;也就是MTL(Multi-task Learning)&#xff0c;现在已经被用在很多领域了&#xff0c;比如处理自然语言、搞计算机视觉&#xff0c;还有语音识别这些领域。MTL在大规模的推荐系统里也玩得挺溜&#xff0c;尤其是那些做视频推荐的大家伙。 MTL的玩法就是&a…

vue3 自定义el-tree树形结构样式

这里样式设置主要用到了 windcss 实现效果 模拟数据 这里也可以用模拟的数据,下面用的是后端请求的真实数据 [{"id": 5,"rule_id": 0,"status": 1,"create_time": "2019-08-11 13:36:09","update_time": "…

AI免费UI页面生成

https://v0.dev/chat v0 - UI设计 cursor - 编写代码 参考&#xff1a;https://www.youtube.com/watch?vIyIVvAu1KZ4 界面和claude类似&#xff0c;右侧展示效果和代码 https://pagen.so/

科技与艺术完美融合的LED异形创意圆形(饼/盘)显示屏横空出世

随着LED技术的飞速发展&#xff0c;这款集科技与艺术于一体的异形创意圆形&#xff08;饼/盘&#xff09;显示屏&#xff0c;不仅以其独特的形态打破了传统显示屏的界限&#xff0c;更在视觉呈现上开启了前所未有的新篇章。它不再仅仅是信息传递的载体&#xff0c;而是成为了空…

ceph简介

ceph存储简要概述&#xff1a; 通过将文件分解成固定大小对象&#xff0c;然后存放于pool中&#xff0c;每个pool中 可包含多个pg&#xff0c;每个pg中又可包含多个osd 通过crush算法 最终数据落盘到osd中去。 一、ceph 删除osd 步骤1 修改osd数据操作权重值 ceph osd crush r…