非插件实现Typecho语法高亮

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

你可能感兴趣：
Typecho 代码高亮插件 CodeBox
Typecho 基于 prismjs 的代码语法高亮插件 CodeHighlighter
Typecho 搜索来源关键字高亮插件 highlight
Typecho 代码高亮插件 CodeStyle

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

Prism 是一个轻量级并且简单易用的 JavaScript 类库，压缩版本只有 1.5kb 大小左右，即使添加了语言定义的CSS代码文件，最大也不会超过 2kb，是我目前使用过的最小的代码高亮 JavaScript 类库。
Prism 使用非常简单，只需添加 Javascript 和 CSS 就能够轻易的将其整合进项目中使用。目前它已内置了 HTML\CSS\Javascript 三种语言的高亮支持，你也可以添加新的语法高亮配置文件，只需修改 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等，就可以实现代码高亮展示。