Typecho 原生 Markdown 编辑器仅负责代码块写入，Prism 代码高亮需在前端主题或插件层配置，通过引入 prism.js 和 prism.css 文件实现渲染。

快速处理思路

实现代码高亮主要有无插件手动引入和安装插件两种路径，根据是否愿意修改主题文件选择。

方案一（无插件）：下载 Prism 文件上传至主题目录，修改 header.php 引入资源。

方案二（插件）：下载 CodeHighlighter 或 ColorHighlight 插件，上传至 usr/plugins 目录并在后台启用。

特殊情况：若主题开启 PJAX，需在 footer.php 添加重载函数防止高亮失效。

为什么会这样

Typecho 默认支持 Markdown 语法写入代码块，但原生程序不包含前端语法高亮渲染逻辑。

Markdown 编辑器在后台仅负责将 ```php 等标记解析为 HTML 的 pre 和 code 标签，颜色高亮需要浏览器执行 JavaScript 库（如 Prism.js）对这些标签进行 DOM 操作和样式注入。

因此配置重点不在后台编辑器设置，而在主题前端资源的加载。

分步处理

以下操作基于手动引入 Prism.js 方案，插件方案仅需上传启用即可。

步骤 1：获取高亮文件

访问 Prism.js 官网下载页面，选中需要的编程语言和主题风格，下载 prism.js 和 prism.css 文件。

步骤 2：上传文件

将下载的两个文件上传到 Typecho 主题目录，路径通常为 usr/themes/主题名/。

步骤 3：修改主题头文件

登录 Typecho 后台，进入控制台 - 外观 - 编辑当前外观，打开 header.php 文件。

在标签之前插入以下代码引入资源：

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

步骤 4：撰写文章

在后台编辑器使用 Markdown 写入代码时，必须在代码块标记后指定语言名，例如 ```javascript 或 ```php。

怎么验证是否生效

打开前台任意包含代码块的文章页面，查看代码区域是否有背景色和关键字颜色区分。

右键页面选择查看源代码，搜索 prism.css 确认样式文件已成功加载。

检查浏览器控制台 Console 面板，确认没有 prism.js 相关的 404 错误或未定义变量报错。

常见坑

PJAX 导致高亮消失：若主题支持 PJAX 无刷新加载，点击链接进入文章页后高亮可能失效，需在 footer.php 添加 PJAX 重载函数调用 Prism.highlightAll。

文件路径错误：themeUrl 函数依赖文件实际存放位置，若上传目录不对会导致 404 无法加载。

忘记标记语言：Markdown 代码块若只写 ```而不加语言名，Prism 无法识别语法类型，不会应用高亮样式。

常见问题

后台编辑器里能看到高亮吗

默认看不到，Typecho 原生后台编辑器仅支持 Markdown 语法预览， Prism 高亮仅在前台文章页生效。

安装插件后还需要改代码吗

不需要，CodeHighlighter 等插件会自动注入所需资源，但需确保插件设置中启用了高亮功能。

为什么首页代码不高亮

部分主题在首页摘要页会过滤掉 pre 标签或 JS 资源，需检查主题设置是否允许首页加载高亮脚本。

参考来源

非插件实现 Typecho 语法高亮（2018 年 7 月 22 日）

基于 prismjs 的 Typecho 代码高亮插件 CodeHighlighter（2022 年 2 月 18 日）

Typecho prism 等高亮代码 pjax 重载函数（2023 年 5 月 11 日）

Typecho 怎么实现无插件语法高亮（2017 年 7 月 3 日）