非插件实现Typecho语法高亮

关于Typecho的代码高亮TypechoTips君给大家分享过几款插件了,今天TypechoTips君给大家带来的是非插件实现Typecho语法高亮的代码,大家只要跟着TypechoTips君的操作流程就可以学会这个技能了。

我们今天要实现的代码高亮是通过prism高亮代码库来实现的,首先打开Prism官网:https://prismjs.com/

Prism 是一个轻量级并且简单易用的 JavaScript 类库,压缩版本只有 1.5kb 大小左右,即使添加了语言定义的CSS代码文件,最大也不会超过 2kb,是我目前使用过的最小的代码高亮 JavaScript 类库。
Prism 使用非常简单,只需添加 Javascript 和 CSS 就能够轻易的将其整合进项目中使用。目前它已内置了 HTMLCSSJavascript 三种语言的高亮支持,你也可以添加新的语法高亮配置文件,只需修改 Javascipt 和 CSS 文件就行。除此之外,它也提供了额外的插件功能,让你可以新增其它功能,比如自动转换链接等,你也可以自己撰写插件。
目前 Prism 唯一的缺点就是不支持 IE8,看作者的博客介绍,也不想支持 IE8。

进入Prism官方页面的Download下载页,并在下载页面中选中你想要实现语法高亮的语言,如下图所示:

下载js文件(prism.js)和css文件(prism.css)如下图所示:

将下载的js和css文件上传到Typecho的主题目录,即“usr/themes/主题名”目录下,如下图所示:

登陆进入Typecho的后台,点击“控制台” -> “外观” —> "编辑当前外观"

编辑“header.php”,在"<heand></head>"标签中插入如下代码

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

在使用Markdown写文章时,只要在代码块标记`标记后面添加你的代码的语言名,如php, javascript等,就可以实现代码高亮展示。

广告栏+++++++蜜糖商店|大哥云| 搬瓦工JMS|红莓网络| Mielink|萌喵加速| 飞鸟云

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注