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

server/2024/9/23 6:10:35/
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/server/120004.html

相关文章

springboot+redis+缓存

整合 添加依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId> </dependency> 连接redis&#xff0c;配置yml文件 主机 端口号 数据库是哪一个 密码 配置类 p…

MySQL5.7中增加的JSON特性的处理方法JSON_EXTRACT和JSON_ARRAY_APPEND以及MYSQL中JSON操作的方法大全

一、MySQL5.7中增加的JSON特性的处理方法JSON_EXTRACT和JSON_ARRAY_APPEND 数据库中有些字段的存储可能是json字符串&#xff0c;在MYSQL5.7之前直接使用sql不好操作&#xff0c;但在mysql5.7中增加了对json处理的一些函数&#xff0c;比如JSON_EXTRACT分解JSON 并查询以及JSON…

【d44】【Java】【力扣】160.相交链表

思路 先把a链表都放进 一个hashSet集合 再遍历B链表&#xff0c;逐个放进hashSet集合 如果无法放进&#xff0c;说明这个节点就是相交节点 代码 import java.util.HashSet;public class Main {public static void main(String[] args) {}public class ListNode {int val;Li…

HarmonyOS开发者基础认证试题

文章目录 一、HarmonyOS介绍二、DevEco Studio的使用三、ArkTS语法介绍四、应用程序框架基础五、从简单的页面开始六、构建更加丰富的页面七、从网络获取数据八、保存应用数据 一、HarmonyOS介绍 判断题&#xff1a; 1.“一次开发&#xff0c;多端部署”指的是一个工程&#x…

安卓玩机工具-----多设备同时投屏操控的安卓手机设备投屏工具 工作室推荐

多设备QtScrcpy投屏工具 对于安卓设备较多的机型。在电脑端实时操作必备工具。他可以同时投屏连接到当前电脑端的安卓设备&#xff0c;而且可以同时操作。对于工作室或者多安卓设备玩家推荐使用。 工具特点 QtScrcpy是一款在Scrcpy的基础上新增功能的安卓手机投屏工具&#xff…

【北京迅为】《STM32MP157开发板嵌入式开发指南》- 第一章 安装虚拟机VM软件

iTOP-STM32MP157开发板采用ST推出的双核cortex-A7单核cortex-M4异构处理器&#xff0c;既可用Linux、又可以用于STM32单片机开发。开发板采用核心板底板结构&#xff0c;主频650M、1G内存、8G存储&#xff0c;核心板采用工业级板对板连接器&#xff0c;高可靠&#xff0c;牢固耐…

力扣 16.最接近的三数之和

文章目录 题目介绍解法 题目介绍 解法 设 snums[i]nums[j]nums[k]&#xff0c;为了判断 s 是不是与 target 最近的数&#xff0c;我们还需要用一个变量 minDiff 维护 ∣s−target∣ 的最小值。分类讨论&#xff1a; 如果 starget&#xff0c;那么答案就是 s&#xff0c;直接返…

Rust GUI框架 tauri V2 项目创建

文章目录 Tauri 2.0创建应用文档移动应用开发 Android 前置要求移动应用开发 iOS 前置要求参考资料 Tauri 2.0 Tauri 是一个构建适用于所有主流桌面和移动平台的轻快二进制文件的框架。开发者们可以集成任何用于创建用户界面的可以被编译成 HTML、JavaScript 和 CSS 的前端框架…