Blog中的代码高亮

admin | 2026-04-09 10:05 | 阅读 14 次

在 ASP.NET Core 博客中实现代码高亮，通常不需要在后端（C#）做复杂的处理，而是将这项工作交给**前端（浏览器）**来完成。

这是因为代码高亮本质上是对 HTML 标签添加 CSS 样式。结合你之前使用的 Markdig 解析方案，实现高亮非常简单。

目前业界最主流、效果最好的方案是使用 Highlight.js 或 Prism.js 这两个 JavaScript 库。

以下是具体的实施步骤：

🚀 核心方案：使用 Highlight.js（推荐）

这个库非常成熟，支持 100+ 种语言，并且有几十种配色主题。

第一步：引入资源

在你的博客布局文件（_Layout.cshtml）的 <head> 标签中，引入 Highlight.js 的 CSS 样式和 JS 文件。你可以直接使用 CDN。

<head>
    <!-- 引入高亮样式 (这里以 'atom-one-dark' 深色主题为例，你可以去官网换其他主题) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
    
    <!-- 引入核心库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
</head>

第二步：初始化脚本

在布局文件的 <body> 底部（通常在 @RenderBody() 之后），添加一段简单的脚本来触发高亮。

<body>
    <!-- 你的导航栏等内容 -->
    
    @RenderBody()

    <!-- 初始化高亮 -->
    <script>
        hljs.highlightAll();
    </script>
</body>

📝 配合 Markdown 写作

为了让高亮生效，你在写博客文章（Markdown 源码）时，需要遵循标准的 Markdown 代码块语法：在三个反引号后面加上语言名称。

Markdown 写法示例：

这是一个 C# 代码块：

```csharp
public class Program
{
    public static void Main(string[] args)
    {
        Console.WriteLine("Hello, World!");
    }
}
```

这是一个 Python 代码块：

```python
def hello():
    print("Hello from Python")
```

解析原理：

你输入上面的 Markdown。

Markdig 会将其转换为标准的 HTML：

<pre><code class="language-csharp">...</code></pre>

页面加载时，hljs.highlightAll() 会自动扫描页面上所有带有 language-xxx 类的 <code> 标签，并给里面的关键字加上带有颜色的 <span> 标签，从而实现高亮。

🎨 进阶：自定义样式（可选）

如果你觉得默认的样式（比如字体大小、圆角、行高）不好看，可以在你的 site.css 中覆盖默认样式。

/* 调整代码块的字体和间距 */
pre code.hljs {
    font-family: 'Consolas', 'Monaco', monospace; /* 使用等宽字体 */
    font-size: 14px;
    line-height: 1.5;
    border-radius: 8px; /* 圆角 */
    padding: 15px;
    display: block;
    overflow-x: auto; /* 代码过长时显示横向滚动条 */
}

/* 针对移动端优化 */
@media (max-width: 768px) {
    pre code.hljs {
        font-size: 12px;
        padding: 10px;
    }
}

📊 方案对比

| 方案 | 优点 | 缺点 | 推荐指数 | | :--- | :--- | :--- | :--- | | Highlight.js | 自动检测语言能力强，主题多，配置简单。 | 库文件体积稍大（但可接受）。 | ⭐⭐⭐⭐⭐ | | Prism.js | 模块化设计，体积更小，插件丰富。 | 配置相对复杂一点，需要手动选语言包。 | ⭐⭐⭐⭐ | | 后端生成 | (不推荐) 服务端生成带样式的 HTML。 | 增加服务器负载，HTML 体积巨大，难以维护。 | ⭐ |

💡 总结

下载/引入 highlight.js 的 CSS 和 JS 文件。
在页面底部调用 hljs.highlightAll()。
写文章时记得在 Markdown 的反引号后写上语言标识（如 ```csharp）。

这样，你的 ASP.NET Core 博客就能拥有非常专业的代码阅读体验了。