胖蒜

分享有价值的资源

Typecho 使用 Prism.js 来实现代码高亮

胖蒜网之前基本没有代码高亮,代码这块的处理就是简单的写在CSS的几行样式和一个JS文件,虽能实现,总感觉体验不好。今天去网上搜索了一下,发现 Prism 挺适合的,简单,小巧,个人博客用足够了。

Prism 是一个轻量级、可扩展的语法高亮库,使用现代化的 Web 标准构建。使用 Prism.js 可以快速为网站添加代码高亮功能,支持超过上百种编程语言,还支持多种插件,是简洁、高效的代码高亮解决方案。

为什么选择 Prism.js

简单易用 引用 prism.css 和 prism.js,使用合适的 HTML5 标签(code.language-xxxx),搞定!
天生伶俐 语言的 CSS 类是可继承的,所以你只需定义一次就能应用到多个代码片段。
轻如鸿毛 核心代码压缩后只有 2KB。每添加一个语言平均增加 0.3-0.5KB,主题样式在 1KB 左右。
快如闪电 如果可能,支持通过 Web Workers 实现并行。
轻松扩展 定义新语言或扩展现有语法,或者新增功能都非常简单。
丰富样式 所有的样式通过 CSS 完成,并使用合理的类名如:.comment, .string, .property 等。

如何使用

导入引擎和样式

<link rel="stylesheet" href="<?php $this->options->themeUrl('css/prism.css'); ?>">
<script src="<?php $this->options->themeUrl('js/prism.js'); ?>" ></script>

上面代码请根据实际情况修改一下,prism.js和prism.css你都可以自己在 https://prismjs.com/download.html 上选择配置,支持的语言有很多,选择你自己需要的语言;也有很多插件,比如行号,代码复制,代码预览,代码语言等,都可以自行选择。官方也提供多种主题配色,选择适合自己的。
选择好之后下载对应的 js 和 css 来引用到你的项目中。

在文章中插入代码

在Typecho编辑器中,使用对应语句包裹代码,就可以实现代码高亮的效果。
" ` "符号又称为抑音符,可在英文输入状态下按键盘左上方"~"输入。

转义Prism中的尖括号 < >

假如发表类似html代码,会有尖括号 < >,直接使用会有问题,需要进行转义,需要使用 &lt;&gt; ,而不是 <>

使用中存在的问题?

我个人因为不注重这块,所以在之前的代码中没有加上对应语言,所以代码高亮一直没有显示,后来发现是这个问题,这个不好的习惯以后得改正。

感觉很棒,欢迎点赞 OR 打赏~

分享到:

评论 (0)

立即登录评论
可联系QQ744272645咨询
马上咨询 自媒体号