一種不使用插件來實作幾乎所有語言的文法高亮的方法
前言
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";
} 複制