解决markdown-it-prism未能正确加载Languages的BUG

最新推荐文章于 2024-12-18 14:35:09 发布
原创 最新推荐文章于 2024-12-18 14:35:09 发布 · 2.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #GitHub

在尝试渲染C++代码块时，发现markdown-it-prism未能正确加载语言。经过调试，问题出在loadPrismLang函数，直接调用了prism-cpp模块而未处理依赖。提交的Pull Request修复了这个问题，通过prism-components/index.js中的自动处理依赖。虽然在旧版Node.js上测试未通过，但已被项目维护者Merge并添加为测试用例。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

本文首发在我的个人博客：https://jlice.top/p/7vg1g/。欢迎大家前去参观，么么哒~

在hexo博客同步至csdn - 木然轩一文中，我提到了prismjs在尝试渲染C++代码块时不能正确加载node_modules/prismjs/components/prism-cpp.js。于是，我在prismjs的GitHub项目上提交了Pull Request：cpp extend clike by jlice · Pull Request #1914 · PrismJS/prism。不过，prismjs的项目维护者却告诉我，这锅prismjs不背，是markdown-it-prism自己的问题。

其实在提交这个Pull Request时我也觉得奇怪，prismjs的用户基数那么大，而C++也是非常常见的语言，要是出现这种问题早就解决了。不过，我的确是在一顿Debug后找到了出错的位置，但这个出错的位置是错误的果，未必是错误的因。

prismjs

prismjs是一个代码块高亮的库，其作用和highlight.js差不多，有点像Python里的Pygments。大致看了下prismjs的源码，感觉主要就是用正则表达式描述了各编程语言的文法，然后做词法分析，对各种类型的token应用相应的样式。下面是prismjs的目录结构：

最低0.47元/天 解锁文章

200万优质内容无限畅学
prismJS源码解读 - 插件篇 - linehight插件集成markdown-it
m0_74304054的博客
05-08 1233
至此我们的所有功能都实现完毕了。你也可以去扩展更多的功能，比如增加一个表示修改样式的高亮。接下来我打算将prism搁置一段时间，去探索一下codemirror以及扩展自己的博客功能，我仍旧会将自己的心得体会进行分享，请持续关注我！我的博客。
Prism.js 详细教程：从入门到高级应用
最新发布
a181001_的博客
05-22 1207
轻量级：核心文件仅2KB（压缩并gzip后）可扩展：支持通过插件扩展功能，如行号显示、代码复制按钮等多语言支持：内置支持上百种编程语言和标记语言主题丰富：提供多种配色主题，支持自定义高性能：支持Web Workers进行并行处理访问Prism.js 下载页面勾选需要的语言、主题和插件点击下载生成自定义包复制一份现有主题CSS文件修改颜色变量等样式引入自定义主题：代码背景和文字颜色关键字、字符串、注释等语法元素的颜色行号、高亮行等插件相关样式。
Markdown代码块语言类型识别
BXA
11-07 4335
Markdown代码块语言类型识别前言类型说明小结 前言       类型说明 名称 关键字 说明 Shell bash , shell C# c-sharp , csharp CSS css SASS&SCSS sass , scss Erlang erl , erlang Java java...
前端开源库-markdown-it-prism
08-29
前端开源库-markdown-it-prism标记它prism，使用prism在标记它时突出显示代码块。
php prism,prism.js实现wordpress代码高亮+Markdown生成的pre/code免更改
weixin_30015509的博客
03-21 605
这款插件是使用自定义代码，比如 [php] [/php]、[python] [/python] 等方式来实现的。如果是使用默认的编辑器，定义一个按钮还是很方便的。但之后使用的是 Markdown 的方式来编辑文章，复制成 html 后，代码块的表现形式是 的方式来表现的。如果很个都改更，就很麻烦了。就得网上找找有没有自定义 的高亮代码。prism.js将 prism.js 和 prism.c...
markdown-it-prism：使用棱镜突出显示markdown-it中的代码块
02-12
降价棱镜 插件使用突出显示代码块 用法 const md = require ( 'markdown-it' ) ( ) ; const prism = require ( 'markdown-it-prism' ) ; md . use ( prism , options ) ; 该插件会将必要的标记插入所有代码块中。 在HTML中以获取突出显示的代码。 选件 options对象可能包含： 名称 描述 默认 plugins 要加载的数组。 要使用的名称可以在找到。 请注意，某些棱镜插件（尤其是行号）依赖于存在的DOM，因此不能与此包一起使用（请参阅 ）。 [] init 设置棱镜后调用的功能。 将接收棱镜实例作为唯一参数。 对于需要进一步初始化的插件很有用。 () => {} defaultLanguageForUnknown 用于代码块的语言，这些代码块指定Pris
markdown-it-charts:markdown-it图表插件
05-13
markdown-it的图表插件。 快速轻松地扩展markdown-it。 支持chart.js，echarts，highcharts，CHARTIST，c3.js，tauCharts。 安装 node.js和Bower： npm install markdown-it-charts --save bower install markdown-...
vue3-markdown-it::sparkles: 一个很棒的 Vue 3 markdown-it 包装插件，甚至可以支持外部插件！
07-23
:sparkles: vue3-markdown-it :sparkles: 一个很棒的 Vue 3 包装插件，甚至可以支持外部插件！ :magnifying_glass_tilted_right: 安装 npm install vue3-markdown-it 支持的插件 -而其中，一切都开始它 - 添加...
【亲测免费】 探索Prism：一款轻量级的Markdown语法高亮工具
gitblog_00029的博客
04-18 698
探索Prism：一款轻量级的Markdown语法高亮工具 项目简介 是由 Andrea Fabrizi 创建的一个小巧而高效的Markdown语法高亮库。它专注于提供清晰、简洁的代码块高亮，适合任何希望在Markdown文档中增强代码展示效果的开发者或作者。该项目以简单易用和高度可定制性为设计原则，让Markdown的视觉体验更上一层楼。 技术分析 Prism的核心是基于JavaScript实现，...
【vue3优化】markdown-it -- markdown 转换成html
wqm71的博客
03-19 3896
1.首先下载markdown-it包// 除了本体，还要安装type文件2.导入3.使用//假设需要转换的是下面的代码const markdownText = ref('# 巧妹儿的标题!;```console.log("巧妹")```')
前端开源库-markdown-it-highlight-lines
08-29
前端开源库-markdown-it-highlight-lines标记它突出显示行，突出显示代码块中的特定行。
重写了图床神器，支持七牛云和腾讯云
文剑木然的专栏
05-31 359
本文首发在我的个人博客：https://jlice.top/p/7k90b/。欢迎大家前去参观，么么哒~ 前言 用Python重写了图床神器，支持七牛云和腾讯云。用Python写起来感觉顺滑多了～贴一下效果： 项目地址：lpic: 终端图床神器 为什么要想着重写图床神器呢？ 因为，突然发现七牛云的外链不是HTTPS的，然后谷歌浏览器地址栏就没有小绿锁了，标记网站为不安全。而腾讯云的外链是...
安装mitt报错 npm ERR! Unsupported URL Type “link:“: link:./src/types
hua4st的博客
12-12 3654
网上搜出来结果是这个，但是没找到在哪儿改。后面在git上面看到说yarn命令有用。这是因为在NPM的最新版本中，
Ubuntu搭建Ruby on Rails环境
文剑木然的专栏
06-02 459
本文首发在我的个人博客：https://jlice.top/p/6v913/。欢迎大家前去参观，么么哒~ 安装Ruby 由于Ubuntu的apt包管理器的ruby版本过旧，故考虑从源码编译安装。这里以安装ruby2.3.0为例： sudo apt-get install build-essential zlib1g-dev libssl-dev libreadline6-dev libyam...
【前端疑难杂症bug——vue-markdown避坑】
爪爪爪爪哇的博客
02-05 1039
当项目正常使用vue-markdown时，编译的时候会报错。
Prisma Markdown 项目常见问题解决方案
gitblog_00288的博客
12-14 924
Prisma Markdown 项目常见问题解决方案 1. 项目基础介绍和主要的编程语言 Prisma Markdown 是一个用于将 Prisma 数据模型转换为 Markdown 文档的开源工具。该项目的主要目的是帮助开发者更方便地生成和维护数据库模型的文档。Prisma 是一个现代化的数据库工具，支持 TypeScript 和 JavaScript，而 Prisma Markdown 则是基...
Markdown 文档渲染实现方案
毛毛的博客
12-18 912
【代码】Markdown 文档渲染实现方案。
Prism学习(1)---前期准备
Jeffrey侠客
01-10 430
在学习Prism框架之前，我预先写了一个非常简单的计算器解决方案。代码如下：    1         static void Main(string[] args)  2         {  3             while (true)  4             {  5                 string input = Console.
prismjs不支持html,如何在vue中引入Prism.js
weixin_28730403的博客
06-25 433
官网下载Prism.js和Prism.css 分别放在assets/js、assets/css文件夹下(也可以放在同一个文件下，都可以的)可以直接在main.js全局导入,也可以在文章显示的组件下单独导入import prismjs from '@/assets/js/prism'import prismCss from '@/assets/css/prism.css'如何使用：//双指针publ...
使用markdown-it-prism实现Markdown代码块的 Prism.js 突出显示
资源摘要信息:"markdown-it-prism：使用棱镜突出显示markdown-it中的代码块" 知识点详细说明： 1. Markdown-it与Prism.js的结合使用： Markdown-it是一个流行的Markdown解析器，它允许开发者将Markdown文本转换为...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值