Ghost博客系列II | 为代码添加语法高亮

写技术博客时，一段优雅的代码展示往往能让文章更具专业性。本文将介绍如何在Ghost博客中实现代码高亮效果，让您的技术文章更加赏心悦目。

基础知识：创建代码块

在Ghost编辑器中，创建代码块非常简单。只需要：

1. 输入三个反引号（```）
2. 紧接着输入编程语言名称（如：```javascript）
3. 按下回车键即可

您也可以在输入代码后，通过点击代码块右上角来选择语言。

如何实现代码高亮

快速代码注入

只需几步，即可实现代码高亮。

1. 在Ghost后台管理界面中，找到【设置】→【代码注入】→【站点头部】
2. 添加Prism的核心代码：

<script src="https://cdn.jsdelivr.net/npm/prismjs/prism.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs/plugins/autoloader/prism-autoloader.min.js" defer></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism.min.css">

完成这些步骤后，您的代码块就会自动应用高亮效果了，需要在文章发布后可以看到效果。

效果预览：

主题深度定制

如果您想要更多的定制空间，可以参考以下步骤：

1. 访问 Prism官网 下载所需文件
   • 选择您需要的主题
   • 勾选需要支持的编程语言
   • 下载生成的JS和CSS文件
2. 将文件集成到主题中
   • 把prism.css放入assets/css目录
   • 把prism.js放入assets/js/lib目录
   • 在screen.css中导入样式：@import "prism.css";
3. 重新打包并上传主题
   • 修改package.json中的主题名称
   • 执行yarn zip或npm run zip打包
   • 在Ghost后台上传新主题

样式美化技巧

想要让代码更有个性？以下是一些实用技巧：

1. 自定义颜色方案

.token.boolean,
.token.number,
.token.function {
     color: #f08d49; /* 可以改成您喜欢的颜色 */
}

1. 使用社区主题

• 访问 Prism主题库
• 选择喜欢的主题
• 替换原有的prism.css内容

扩展功能

Prism还提供了丰富的插件系统，您可以实现：

• 代码行号显示
• 代码复制按钮
• 特定行高亮
• 等更多功能

小结

通过本文介绍的方法，相信您已经掌握了如何让Ghost博客的代码展示更加专业。选择适合自己的方案，让您的技术文章锦上添花！

如果您在使用过程中遇到问题，欢迎讨论交流。