如何在网页中显示格式化代码

Posted 2023-03-05

【中文标题】如何在网页中显示格式化代码

【英文标题】：How to display formatted code in webpage

【发布时间】：2011-07-07 09:41:28

【问题描述】：

我正在尝试写博客，我想以一种简洁的格式显示 c# 代码。有没有办法。我喜欢完全按照堆栈溢出的方式来做，包括颜色。 :)

【问题讨论】：

我可以建议Github Gists

【参考方案1】：

您有很多选项，但我建议不要使用 javascript 格式化程序。如果用户禁用了脚本，您仍然希望代码看起来不错。

如果您使用的是 Visual Studio，Productivity Power Tools 插件有一个“复制 HTML”选项：http://blogs.msdn.com/b/kirillosenkov/archive/2010/06/07/copy-code-in-html-format-with-visual-studio-2010.aspx

Jon Skeet 提供了一个供公众使用的代码格式化程序：http://csharpindepth.com/CodeFormatterTool.aspx

如果您使用 PHP，GeSHi 是一个不错的服务器端选项：http://qbnz.com/highlighter/

我相信 stack-overflow 使用 google-code-prettify：http://code.google.com/p/google-code-prettify/

SyntaxHighlighter 是另一个不错的客户端解决方案：http://alexgorbatchev.com/SyntaxHighlighter/

【讨论】：

谢谢约翰。在我的博客上发布代码是一件轻而易举的事。我正在使用 Visual Studio 2010，Productivity Power Tool 很快。

在禁用 JavaScript 的情况下，互联网是否有任何部分看起来仍然不错？

没有它，我构建的任何东西看起来都很好。我是“渐进式增强”的忠实拥护者。

@JohnGietzen 三年后你的评论仍然很尴尬

Jon Skeet 不再可用 :(

【参考方案2】：

SO 使用google-code-prettify，即 Javascript + CSS。您应该在该站点上获得所需的所有文档。

另外，如果您不介意使用 php，还有GeSHi。但是客户端可能更好，所以我会使用代码美化器。

【讨论】：

+1 #wow .. 我没有注意到 SO 使用的是 prettify

谢谢雷夫。现在我开始使用 Visual Studio 插件。我今天一定会研究美化。

请告诉我如何在 blogspot.com 上使用 google-code-prettify 进行垂直或水平滚动

【参考方案3】：

您可以根据需要使用第三方：Syntax Highlighter

【讨论】：

谢谢。完全设置后，这个看起来最好，功能也最多。

【参考方案4】：

Syntax Highlighter 和 google-code-prettify 是客户端解决方案，它可能更好，因为它更通用，适用于任何网页（.php | .aspx | .jsp | .html ）。它的缺点是：

最初加载页面时，格式化代码以原始格式显示。 javascript构建代码的语法高亮需要一些时间。

如果禁用了 javascript，则不起作用。

解决方案：预先构建语法格式的代码。 Syntax Highlight Generator 是一个开源在线工具，用于预先构建您的代码。该工具基于 Syntax Highlighter v3.0 库构建。

语法高亮生成器的配置： codeworkout.blogspot.com/2014/07/online-generator-tool-for-code-syntax_18.html

【参考方案5】：

    <blockquote>
             //.....Code
    <blockquote>

【讨论】：

这并不能真正回答问题。尝试添加更多细节，使其更完整。