拾光分享网 | 一个有趣的IT资源分享网

Typecho 添加 Prism.js 实现代码高亮

最近试用了几个 Typecho 代码高亮插件,感觉都不太满意,特别是它们对手机端的支持不是特别理想。今天我索性自己动手配置了 Prism 来实现 Typecho 的代码高亮显示。Prism 是一款优秀的、轻量、可扩展的代码语法高亮库,是通过现代化的 Web 标准来构建的。

文件下载 https://prismjs.com/download.html
先从 Prism 的 官网 选择你所需要的主题、语言和扩展插件,选完之后点页面最下方的 Download JS 和 Download CSS。

20200206199802.PNG

接下来把刚才下载的 prism.css 和 prism.js 分别插入 Typecho 主题下的 header.php 和 footer 文件中。

// header.php
// 把prism.css 放在 </head> 之前

<head>
...
<link href="prism.css" rel="stylesheet" />
</head>
// footer.php
// 把 prism.js 放在 </body> 之前

<script src="prism.js">
</body>
</html>

如何使用 (Usage)
20200206199803.PNG

欢迎您的转载:拾光分享网 | 一个有趣的IT资源分享网 » Typecho 添加 Prism.js 实现代码高亮


评论 抢沙发

  • 昵称*
  • 邮箱 (必填)
  • 网址