Typecho文章代码高亮功能

一种不使用插件来实现几乎所有语言的语法高亮的方法

前言

Typecho是一款由国人开发的博客程序，它的特点是简洁小巧，扩展性强，并且内置支持Markdown语法写作，因而很受技术博客作者的欢迎。但是默认的Typecho没有自带语法高亮，要实现语法高亮就要使用Typecho相应的插件，而Typecho的插件安装和调试都比较难，这里就将介绍一种不使用插件来实现几乎所有语言的语法高亮的方法。

PrismJs

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

官网传送门:https://prismjs.com/

1. 下载

1.1 进入下载页面

↓点击 DOWNLOAD 进入下载页面↓

1.2 根据需求进行选择

• 核心代码（必选）
• 主题（我选择的是“贵族黑”，别问我为什么这么叫，任性）
• 语法包（是不是很多，随便选，随便挑，反正不要钱）
• 插件（我用了复制按钮，其他的没试过，自行挖掘）

插件解读

插件是扩展Prism功能的附加脚本（和CSS代码）

• 线条突出显示 - Line Highlight
• 行号 - Line Numbers
• 显示隐形 - Show Invisibles
• Autolinker - Autolinker
• Web平台文档 - WebPlatform Docs
• 自定义类 - Custom Class
• 文件突出显示 - File Highlight
• 显示语言 - Show Language
• JSONP亮点 - JSONP Highlight
• 突出显示关键字 - Highlight Keywords
• 删除初始换行符 - Remove initial line feed
• 预览器 - Previewers
• 自动加载磁带机 - Autoloader
• 保持标记 - Keep Markup
• 命令行 - Command Line
• 非转义标记 - Unescaped Markup
• 规范化空白 - Normalize Whitespace
• 数据URI突出显示 - Data-URI Highlight
• 工具栏 - Toolbar
• 复制到剪贴板按钮 - Copy to Clipboard Button

1.3 下载 css js 文件

↓点击 DOWNLOAD 进行下载↓

2. 配置

2.1 上传 css js 文件

↓把下载下来的js和css文件上传到Typecho的主题目录↓

↓即“usr/themes/主题名”目录下↓

2.2 配置header.php文件

↓进入Typecho的后台，点击“控制台” -> “外观”↓

↓点击“编辑当前外观” -> “header.php”，在左边的代码框中找到 /head ↓

↓在它之前输入如图中的代码↓

↓代码↓

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

3. 使用

↓在使用Markdown写文章时，只要在代码块标记```↓

↓标记后面添加你的代码的语言名，如php, javascript等，就可以实现代码高亮展示↓

↓展示↓

function test()
{
    $s = "string";
}