如何在HTML中正确格式化展示T-SQL代码 实现语法高亮效果

前端实时渲染方案 #

• 支持SQL、C#等上百种开发语言的语法高亮，可自定义配色主题完全对齐SSMS默认显示效果，仅需引入对应JS和CSS静态资源即可使用，无需依赖后端服务
• 所有渲染逻辑都在前端本地执行，不需要调用第三方在线接口，完全避免复制粘贴到外部网站的操作
• 支持批量处理页面内所有代码块，仅需一行初始化代码即可自动识别并渲染所有被<pre><code>标签包裹的内容，可手动指定代码语言为SQL或C#，也可开启自动识别
• 本身无jQuery依赖，也提供兼容jQuery的扩展版本，性能足够支撑单页数十至上百个代码片段的渲染，不会明显拖慢页面加载速度

静态预转换方案 #

• 可以使用本地命令行工具，批量将你本地存储的SQL、C#代码片段直接转换为带样式标签的HTML代码，直接嵌入静态页面中
• 预生成的HTML自带样式类，可自定义CSS规则匹配你的博客现有主题，也可以完全复刻SSMS的配色方案
• 支持批量扫描指定目录下的所有代码文件，自动输出对应HTML片段，适合需要批量处理大量历史代码的场景

基础使用参考 #

代码块书写格式如下：

<pre><code class="language-sql">
SELECT Id, UserName, CreateTime 
FROM dbo.Users 
WHERE Status = 1 AND CreateTime >= '2024-01-01'
</code></pre>

渲染后会自动将SQL关键字、表名、字符串、数值等元素按照SSMS的风格高亮显示，切换为C#只需要将类名修改为language-csharp即可。

内容的提问来源于stack exchange，提问作者BVernon