搜索 - 腾讯云开发者社区-腾讯云

文章/答案/技术大牛

发布

来自专栏卓越笔记
html prism.js 代码前端高亮、代码美化
ckeditor/plugins/prism/lib/prism/prism_patched.min.js' %}"></script> <script src="{% static 'js/<em>prism.js</em>
4.3K51编辑于 2023-02-18
来自专栏网络日志
Prism.js动态加载所需语言包
前言 Prism是一款非常好用的前端代码高亮插件，很多开发者搭建的文章、博客分享网站中都使用到了prism.js来做代码高亮，但是在官网的下载网站选完了主题和插件后却犯了难：如果选择语言包，如果全选那么体积将近形式保存的语言包对象上有没有对应的属性，没有的话在components.json中进行查找所有语言的require属性，看看是否可以和前端需要的语言匹配，如果找到了是前端返回的语言别名，那就改成标准名称，否则说明Prism.js
4K20编辑于 2022-07-06
来自专栏沈唁志
使用 Prism.js 实现漂亮的代码语法高亮
为什么选择 Prism.js ？极致易用引用 prism.css 和 prism.js，使用合适的 HTML5 标签（code.language-xxxx），搞定！许多网站都在使用 Prism，如果你是前端开发者，那你一定十分熟悉这些网站：这些网站在使用 Prism.js 连 JavaScript 之父 Brendan Eich 也在个人博客上使用！如何使用：你只需要在页面上引入 prism.css 和 prism.js 文件： <!DOCTYPE html> <html> <head> ... <script src="<em>prism.js</em>"></script> </body> </html> 遵循 HTML5 标准，Prism 使用语义化的
```
 元素和  元素来标记代码区块： 原创文章采用CC BY-NC-SA 4.0协议进行许可，转载请注明：转载自：使用 Prism.js 实现漂亮的代码语法高亮
```
5.2K30发布于 2018-05-24
来自专栏老蒋专栏
利用Prism.js脚本工具实现网页代码高亮效果
在这篇文章中老蒋要分享的是Prism.js小工具可以实现页面的代码高亮效果。 Prism.js，是一款轻量的可以定制的代码插件效果工具。我们可以使用Prismjs 可以快速为网站添加代码高亮功能。 Prism.js 脚本可以自定义下载，支持超过 100 多种编程语言，还支持很多种插件，这个就不仅仅局限适合哪个CMS，所有的网站页面都可以使用只要我们引用对应的JS文件。 prismjs.com/download.html PrismJS目前支持8种主题样式，我们选择 Themes，Languages，Plugins，点击底部的下载按钮，会得到 prism.css 和 prism.js <script src="images/<em>prism.js</em>"></script> </body> </html> 这个根据我们网站的目录路径然后实际将两个文件丢到我们网站目录中引用。第三、如何使用案例效果：https://prismjs.com/examples.html 本文出处：老蒋部落 » 利用Prism.js脚本工具实现网页代码高亮效果 | 欢迎分享
7.4K20编辑于 2021-12-27
来自专栏独立观察员博客
在 .NET 应用程序中运行 JavaScript
在本节中，我将展示如何使用 prism.js 高亮一小段代码，并在一个控制台应用程序中运行。例如，我从 Prism.js 的官网下载了 prism.js 文件，并将 C# 添加到默认支持高亮的语言集。在把文件放到项目文件夹的根目录后，我把文件更新为嵌入资源。 -- Make prism.js an embedded resource --> <ItemGroup> <None Remove="<em>prism.js</em>" /> <EmbeddedResource Include="<em>prism.js</em>" /> </ItemGroup> </Project> 剩下的就是编写代码，在我们的程序中运行脚本。下面的代码段设置了 JavaScript 引擎，从程序集中加载嵌入的 prism.js 库，并执行它。
4.6K10编辑于 2022-12-06

来自专栏沈唁志

`纯代码给 WordPress 文章编辑器上增加 Prism.js 代码高亮的快捷按钮`

之前发过文章说过：使用 Prism.js 实现漂亮的代码语法高亮，本博客也使用的是它直接写代码发布的话，灰茫茫一片，很丑，所以有了 Prism.js 引用的代码片段就变得有了好看的样式 <? 每篇文章基本上都会有代码，而 Prism 使用语义化的

 元素和  元素来标记代码区块，每次都要手动敲的话还是很麻烦的
所以这篇文章就是一个小技巧，怎么在 WordPress 文章编辑器上增加 Prism.js admin_print_footer_scripts', 'appthemes_add_quicktags' );
然后保存，这样一来，我们在编辑文章的时候，切换到文本模式
纯代码给 WordPress 文章编辑器上增加 Prism.js 原创文章采用CC BY-NC-SA 4.0协议进行许可，转载请注明：转载自：纯代码给 WordPress 文章编辑器上增加 Prism.js 代码高亮的快捷按钮

2.8K10发布于 2018-12-12

来自专栏CMS建站教程
基于prismjs的Typecho代码高亮插件CodeHighlighter
="share"代码高亮效果/scode var wl = 'hello,world'; alert(wl); 支持的代码语言类型：可以选择下载自己想要代码语言的js和css文件，然后分别替换插件的prism.js 文件和css文件，路径如下： prism.js：/CodeHighlighter/static/prism.js css文件：/CodeHighlighter/static/styles/改为对应的风格名
2K20编辑于 2022-02-18
来自专栏后端开发随笔
使用3-hexo主题时无法正常渲染html代码
首先，重新下载prismjs插件对应的css文件和js文件，重命名为：prism.css和prism.js。并分别放置到3-hexo主题目录路径下，即：themes/3-hexo/source/css/prism.css和themes/3-hexo/source/js/prism.js。 prism.css： <link rel="stylesheet" href="/css/prism.css"> 在themes/3-hexo/layout/_partial/footer.ejs中引入prism.js ： <script src="/js/<em>prism.js</em>" async></script> 最后，根据具体需要再次细调相应文件中的css样式即可。
1.9K40编辑于 2022-12-29
来自专栏CY
Vue3(Vite) 通过 prism.js 实现代码高亮并实现Mac风格
prismjs漂亮的代码语法高亮插件极致易用：引用 prism.css 和 prism.js，使用合适的 HTML5 标签（code.language-xxxx），搞定！
3.4K60编辑于 2023-05-10
来自专栏Frost's Blog
代码高亮分词对比
根据分词进行在前端或者后端，本次参加对比的选手有：前端分词：Highlight.js, Prism.js，送到 HTML 中的是未标注的代码段 Python 后端分词：Pygments，送到 HTML Highlight.js Prism.js Pygments Vim VSCode PyCharm 区分 built-in ✔️1 ✔️ ✔️ ✔️ ✔️ ✔️ 识别 operator ✔️ ✔️ 区分 self 与参数 ✔️ ✔️ 区分 class 与 identifier ✔️ ✔️ ✔️ ✔️ ✔️ 区分 annotation3 ✔️ 总结我们可以看到三个对比者中 Prism.js 和 Pygments 不相上下，Prism.js 只差一点，但 Pygments 毕竟是 Python 实现所以可以理解。考虑到 Prism.js 已经能有比较好的表现了，我首推 Prism.js 做博客的代码高亮。而三个产品距离专业的代码编辑器都还有很大的距离。
79140编辑于 2023-10-19
借助 CodeBuddy，我打造了一个打光动画加持的代码演示工具
于是我对 CodeBuddy 发了个请求：用 Vue3 + Prism.js + iframe 做一个代码演示工具，支持：左侧写代码、右侧预览、多主题、打字动画、一键导出。接着安装 Prism.js： npm install prismjs 这些步骤我都没参与，等我点开项目文件夹时，结构已经清清爽爽，开发环境就绪。左边写代码，右边直接看效果很快，CodeBuddy 新建了一个叫 CodeEditor.vue 的组件，功能很集中：三栏切换（HTML / CSS / JS）每输入一段代码，就有高亮动画使用 Prism.js
47910编辑于 2025-05-25
来自专栏小徐学爬虫
Python 代码语法高亮工具库比较
Prism.js 的优点在于轻量级、易于使用，而且可以通过 CSS 来自定义样式。此外，Prism.js 还提供了一个在线演示工具，可以方便地对代码进行高亮并预览效果。
79310编辑于 2024-07-05
来自专栏WordPress果酱
Prism：轻量级的 Javascript 代码高亮库
添加 PHP 代码高亮，在 prism.js 添加如下代码： Prism.languages.php = { 'comment': { pattern: /(^|[^\])(/*[wW]*? 允许在 PHP 代码中内嵌 HTML 代码，在 prism.js 文件添加如下代码： if (Prism.languages.markup) { Prism.languages.insertBefore
1.2K20编辑于 2023-04-14
CodeSnippetBox：我与 CodeBuddy 合作打造的代码片段管理器
反正我 Vue3 用得挺熟，就拿它来写个前端；再加上 Prism.js 实现代码高亮，搭个黑色极简风界面，顺便练下组件设计。打开 CodeBuddy，我直接和它讲清楚了需求：我想做个叫 CodeSnippetBox 的工具，用 Vue3 + Prism.js，支持代码片段的添加、语法高亮（多语言），分类管理（按项目/语言） Prism.js 的接入也很利落，直接引入样式文件： import Prism from 'prismjs' import 'prismjs/themes/prism-tomorrow.css' 它还帮我把常用的语言都预置了
29900编辑于 2025-05-25
来自专栏繁依Fanyi 的专栏
CodeSnippetBox：我与 CodeBuddy 合作打造的代码片段管理器
既然我在用 Vue3 比较熟悉，不如用它来做前端；再加上 Prism.js 实现多语言高亮，外加黑色极简风 UI，听起来就很酷不是吗？我打开了 CodeBuddy，对它说：我要用 Vue3 + Prism.js 制作 CodeSnippetBox，支持添加代码片段（支持多语言语法高亮）；按项目、语言分类管理；支持搜索、收藏和导出代码接着，它配置了 Prism.js，并展示了如何在组件中引入： import Prism from 'prismjs' import 'prismjs/themes/prism-tomorrow.css'
34210编辑于 2025-05-19
来自专栏裴大头的专栏
聊一聊我的文本编辑器
需要注意的是，默认是md格式内容，this.html里才是html代码好了，这下就可以使用了然后前端展示的代码格式可以根据之前的 => 代码块高亮也可以使用下面的方式，是我的网友凡蜕博客推荐的prism.js 使用方法参照如何在vue中引入Prism.js 今天就分享这些，欢迎大家留言交流
76110编辑于 2022-01-17
来自专栏繁依Fanyi 的专栏
借助 CodeBuddy，我打造了一个打光动画加持的代码演示工具
于是，我跟 CodeBuddy 提了个请求：我要用 Vue3 + Prism.js + iframe 制作一个代码演示工具 CodeMotionShow，支持：左侧代码编辑（HTML/CSS/JS 紧接着，它立刻安装了 Prism.js： npm install prismjs 我几乎没怎么插手，所有依赖管理、项目初始化和结构清理都是它一手包办的。此时目录已经干净整洁，准备进入开发状态。编写核心组件：一个左编右显的动效编辑器 CodeBuddy 先创建了一个名为 CodeEditor.vue 的组件，里面实现了：三个可切换的文本框（HTML、CSS、JS）每次输入都触发打光动画使用 Prism.js
51510编辑于 2025-05-18
来自专栏泽泽社
pjax(InstantClick)常用的重载函数
== 'undefined'){ MathJax.Hub.Queue(["Typeset",MathJax.Hub]); } Prism.js语法高亮 if (typeof Prism
44610编辑于 2023-04-17
来自专栏Article
PHP 字节单位大小转换
查看 Prism.js 的源代码发现作者居然是 css secrets 的作者，666。
1.1K20编辑于 2022-06-14
来自专栏小狐狸说事
WordPress 代码高亮插件 io code highlight
一为博客作者写的一款代码高亮插件，使用的是 prism.js 的方案。插件支持经典编辑器和古腾堡区块编辑器。如果给我一个选择它的理由，就是使用比较轻量和简单，省去了很多自己部署的工作。
1.1K30编辑于 2022-12-05

第 2 页第 3 页

点击加载更多

html prism.js 代码前端高亮、代码美化

Prism.js动态加载所需语言包

使用 Prism.js 实现漂亮的代码语法高亮

`利用Prism.js脚本工具实现网页代码高亮效果`

`在 .NET 应用程序中运行 JavaScript`

`纯代码给 WordPress 文章编辑器上增加 Prism.js 代码高亮的快捷按钮`

`基于prismjs的Typecho代码高亮插件CodeHighlighter`

`使用3-hexo主题时无法正常渲染html代码`

`Vue3(Vite) 通过 prism.js 实现代码高亮并实现Mac风格`

`代码高亮分词对比`

`借助 CodeBuddy，我打造了一个打光动画加持的代码演示工具`

`Python 代码语法高亮工具库比较`

`Prism：轻量级的 Javascript 代码高亮库`

`CodeSnippetBox：我与 CodeBuddy 合作打造的代码片段管理器`

`CodeSnippetBox：我与 CodeBuddy 合作打造的代码片段管理器`

`聊一聊我的文本编辑器`

`借助 CodeBuddy，我打造了一个打光动画加持的代码演示工具`

`pjax(InstantClick)常用的重载函数`

`PHP 字节单位大小转换`

`WordPress 代码高亮插件 io code highlight`

`社区`

`活动`

`圈层`

`关于`

`腾讯云开发者`

`热门产品`

`热门推荐`

`更多推荐`