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.rhkb.cn/news/428743.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

第十二周:机器学习笔记

第十二周周报 摘要Abstract机器学习1. Recurrent Neural Network&#xff08;下&#xff09;1.1 RNN的Loss Function怎么求&#xff1f;1.2 RNN奇怪的特性1.3 如何解决 RNN 梯度消失或者爆炸1.4 RNN 其他应用 Pytorch学习1. 现有的网络模型使用以及其修改1.1 在VGG16模型添加Mo…

python-3n+1数链/233

一&#xff1a;3n1数链题目描述 在计算机科学上&#xff0c;有很多类问题是无法解决的&#xff0c;我们称之为不可解决问题。然而&#xff0c;在很多情况下我们并不知道哪一类问题可以解决&#xff0c;哪一类问题不可解决。现在我们就有这样一个问题&#xff0c;问题如下&#…

win11 wsl2安装ubuntu22最快捷方法

操作系统是win11&#xff0c;wsl版本是wsl2&#xff0c;wsl应该不用多介绍了&#xff0c;就是windows上的虚拟机&#xff0c;在wsl上可以很方便的运行Linux系统&#xff0c;性能棒棒的&#xff0c;而且wsl运行的系统和win11主机之间的文件移动是无缝的&#xff0c;就是两个系统…

第二十节:学习Redis缓存数据库实现增删改查(自学Spring boot 3.x的第五天)

这节记录下如何使用redis缓存数据库。 第一步&#xff1a; 先在服务器端安装redis&#xff0c; 下载地址&#xff1a;Releases tporadowski/redis GitHub。 第二步&#xff1a; 安装redis客户端可视化管理软件redisDesktopmanager Redis Desktop Manager - Download 第…

C++ tracy性能分析(二)

环境搭建 项目根目录下 git clone https://github.com/wolfpld/tracy cmake 配置 add_definitions("-DTRACY_ENABLE") add_subdirectory(tracy) include_directories(${TRACY_PUBLIC_DIR}) target_link_libraries(project TracyClient) test.cpp //#define TRACY_C…

完整版:NacosDocker 安装

第一步&#xff1a;先直接通过命令安装 Nacos docker run --name nacos2.2.3 -d -p 8848:8848 -e MODEstandalone f151dab7a111 第二步&#xff1a;创建 Docker 挂载目录 # 创建 log 目录 mkdir -p /root/nacos 第三步&#xff1a;将 Docker 容器的文件复制到挂载目录中 …

[Linux] Linux进程PCB内部信息的深入理解

标题&#xff1a;[Linux] Linux进程PCB内部信息的深入理解 个人主页&#xff1a;水墨不写bug &#xff08;图片来自网络&#xff09; 目录 一.查看进程 二.认识并了解进程的关键信息 I&#xff0c;PID/PPID II&#xff0c;exe III&#xff0c;cwd 三、fork&#xff08;&…

LeetCode[中等] 215. 数组中的第 K 个最大元素

给定整数数组 nums 和整数 k&#xff0c;请返回数组中第 k 个最大的元素。 请注意&#xff0c;你需要找的是数组排序后的第 k 个最大的元素&#xff0c;而不是第 k 个不同的元素。 你必须设计并实现时间复杂度为 O(n) 的算法解决此问题。 思路&#xff1a;基于快排改进的快速…

【云原生安全篇】一文掌握Harbor集成Trivy应用实践

【云原生安全篇】一文掌握Harbor集成Trivy应用实践 目录 1 概念 1.1 什么是 Harbor 和 Trivy&#xff1f; 1.1.1 Harbor 1.1.2 Trivy 1.2 Harbor 与 Trivy 的关系 Trivy 在 Harbor 中的作用&#xff1a; 1.3 镜像扫描工作流程 2 实战案例&#xff1a;在Harbor 配置 Trivy …

初识模版!!

初识模版 1.泛型编程1.1 如何实现一个交换函数呢&#xff08;使得所有数据都可以交换&#xff09;&#xff1f;1.2 那可以不可以让编译器根据不同的类型利用该模子来生成代码呢&#xff1f; 2.模版类型2.1 模版概念2.2 函数模版的原理2.3 函数模板的实例化2.4 模板参数的匹配原…

Windows上创建批处理.bat文件并且注册为开机自启(Python-web微服务)

1. winodws桌面点击创建文本文件 &#xff08;文件名称.txt&#xff09; 2. 将如下代码写入txt文件中 echo off if "%1""h" goto begin start mshta vbscript:createobject("wscript.shell").run("""%~nx0"" h"…

(七)使用SoapUI工具调用WebAPI

1.调用一个无参数的GET请求 [HttpGet(Name "GetWeatherForecast")]public IEnumerable<WeatherForecast> Get(){return Enumerable.Range(1, 5).Select(index > new WeatherForecast{Date DateTime.Now.AddDays(index),TemperatureC Random.Shared.Next(…

科研绘图系列:R语言箱线图(boxplot)

文章目录 介绍加载R包导入数据画图1画图2合并图形系统信息介绍 箱线图展示不同分组的数据分布差异。 加载R包 library(here) library("tidyverse") library("ggpubr") library("scales")

【工具】Windows|两款开源桌面窗口管理小工具Deskpins和WindowTop

总结 Deskpins 功能单一&#xff0c;拖到窗口上窗口就可以置顶并且标记钉子标签&#xff0c;大小 104 KB&#xff0c;开源位置&#xff1a;https://github.com/thewhitegrizzli/DeskPins/releases WindowTop 功能完善全面强大&#xff0c;包括透明度、置顶、选区置顶等一系列功…

如何查看Android设备的dpi

adb shell getprop ro.sf.lcd_density adb shell cat /system/build.prop > build_prop.txt shell cat system/build.prop 结果&#xff1a;参考&#xff1a; 如何查看Android设备的dpi_安卓 查看手机dpi-CSDN博客

ElementUI 用span-method实现循环el-table组件的合并行功能

需要把指定列的相同数据合并起来&#xff08;项目中用的是updateTime&#xff09; 后端返回的数据格式&#xff1a; html&#xff1a; <el-tab-pane label"执行记录概览" name"fourth" v-loading"loading"><el-timeline v-if"re…

windows安装Anaconda教程

一、简介 Anaconda 是一个开源的 Python 和 R 语言的分发平台&#xff0c;专为科学计算和数据分析设计。它包含了包管理器 Conda&#xff0c;可以方便地安装和管理库、环境和依赖项。此外&#xff0c;Anaconda 还附带了许多数据科学工具和库&#xff0c;如 Jupyter Notebook 和…

Ubuntu截图工具flameshot

最近在使用香橙派做一些东西&#xff0c;有些内容需要截图记录&#xff0c;这里记录一下截图工具的安装和使用过程&#xff0c;方便以后查阅。 Ubuntu截图工具flameshot flameshot 简介flameshot 安装flameshot 相关命令 flameshot 简介 linux系统里面最好用的截屏工具支持图形…

el-table的树形结构结合多选框使用,实现单选父子联动,全选,反选功能

<template><div><el-table:data"tableData":row-key"rowKey":default-expand-all"defaultExpandAll":tree-props"treeProps"><!-- 开启树形多选 --><el-table-column v-if"showSelection" width…

[Matplotlib教程] 02 折线图、柱状图、散点图教程

基于MFCC和CNN的语音情感识别 2 折线图、柱状图、散点图2.1 折线图2.1.1 简单折线图2.1.1 线形和Markevery2.1.2 带误差棒的折线图2.1.3 区间填充和透明度 2.2 柱状图2.2.1 分组柱状图2.2.2 堆叠柱状图2.2.3 横向柱状图 2.3 散点图 我们的网站是 菜码编程&#xff0c;我们的q群…