零点博客实战复盘：基于C#与EMLOG开发代码语法高亮工具，含源码、SQL注入防护与接口设计

大家好，我是零点博客的主理人。在做博客开发过程中，我发现很多朋友在展示代码时，普通的文本展示方式很枯燥，尤其是结合EMLOG这类轻量级CMS时，缺乏实时的在线预览功能。于是，我决定结合C#后端开发、HTML/CSS/JS前端以及MySQL数据库，手写一个全栈的实操教程，带大家开发一款支持在线高亮的代码查看器。这篇分享没有废话，全是踩坑后的干货。

一、架构设计与需求拆解

这款工具的核心目标是：在EMLOG文章中嵌入一个iframe，该iframe能通过C#/PHP后端提供的接口，获取并渲染高亮的代码。我们主要涉及以下几个模块：

前端层：负责HTML结构搭建、CSS美化及JS与后端交互。
接口层：C#开发的WebAPI，负责逻辑处理。
数据层：MySQL数据库存储代码片段与配置。

二、后端C#接口开发与JSON处理

首先，我们在.NET Core环境下创建一个控制器。为了保证接口开发的解耦，我们使用RESTful风格返回JSON数据。这里有一个细节要注意：C#处理JSON字符串时，千万不能直接用`JObject.Parse`处理不可信数据，否则可能有风险。

我的做法是编写一个纯JSON/XML解析的辅助类，接收前端传来的格式化后的代码字符串，进行清洗后再返回。比如我们定义一个接口 `GetCodePreview`，前端传文章ID，后端查询数据库并返回格式化后的JSON对象：

public class CodeResponse
{
    public string Html { get; set; } // 返回高亮后的HTML结构
    public string Language { get; set; } // 语言类型，如CSharp, Java
}

三、 MySQL数据库操作与安全防护（核心干货）

很多新手在写MySQL数据库操作时，最容易犯的错误就是拼接SQL。为了防止SQL注入，我强烈建议使用预处理语句。下面是具体的避坑指南：

错误写法（绝对禁止）：

string sql = "SELECT * FROM code_snippets WHERE id = " + id;

正确写法（使用参数化查询）：

using (SqlConnection conn = new SqlConnection(connectionString))
{
    string sql = "SELECT * FROM code_snippets WHERE id = @CodeId";
    using (SqlCommand cmd = new SqlCommand(sql, conn))
    {
        cmd.Parameters.AddWithValue("@CodeId", id);
        conn.Open();
        // 执行查询...
    }
}

这样做不仅安全，还能提高查询效率，是高质量博客代码的标配。

四、前端JS交互与正则表达式应用

拿到后端返回的JSON后，前端的工作是将代码渲染成漂亮的样式。这里我用到了正则表达式来匹配代码块中的关键字。

例如，我们要将纯文本转换为带有样式的``标签：

function highlightCode(text) {
    // 简单的正则替换示例，实际项目建议使用CodeJar等库
    return text.replace(/(function|var|let|const)/g, '$1');
}

五、爬虫开发与在线工具的扩展

除了在博客内使用，我还做了一个彩蛋功能：开发一个简易的爬虫脚本，用于抓取开源社区的代码片段，自动填充到我们的在线工具中。这涉及到对HTML页面的DOM解析，以及数据清洗，对于理解HTML/CSS/JS前端逻辑非常有帮助。

六、总结与避坑指南

通过这个项目，我们完整走了一遍从数据库设计、SQL安全防护到前后端接口联调的全流程。零点博客的初衷就是分享真实的开发经验，希望这篇关于C#、EMLOG及代码预览工具的实操教程能帮到你。

如果你在开发中遇到数据格式解析错误，记得检查一下后端返回的JSON是否使用了UTF-8编码，这一点经常被忽视。祝大家开发愉快！