如何在网页上显示代码示例，并使用类似 Stack Overflow 的漂亮语法样式？

Posted 2023-02-22

技术标签:

【中文标题】如何在网页上显示代码示例，并使用类似 Stack Overflow 的漂亮语法样式？【英文标题】：How do I Display Code Samples On Web Pages With Nice Syntax Styling Like Stack Overflow Does? 【发布时间】：2010-10-19 10:49:34 【问题描述】：

我希望能够从数据库中提取一些代码示例和/或将文本嵌入到网站中，然后在屏幕上以类似代码的方式格式化示例。虽然屏幕上的文字本身就很棒，但格式会让它更加用户友好。这是怎么做到的？

我想要这个： public string MyString = "示例文本";

看起来像：

public string MyString = "The Sample Text";

用答案编辑 我接受了Gortok's 的建议并调查了Prettify.js，它的表现正是我所希望的。这是如何实现的。

<head runat="server">
    <script src="Scripts/prettify.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
    <link href="Scripts/prettify.css" rel="stylesheet" type="text/css"></link>
</head>
<body>
    <code class="prettyprint"> 
        public String HelloString = "New String"; 
    </code>  
    <script language="javascript"> 
        $().ready(function()  
            prettyPrint(); 
        ); 
    </script> 
</body>

【问题讨论】：

【参考方案1】：

Stack Overflow 使用来自 Google 的 prettify.js。

【讨论】：

@Gortok- +1 完美！谢谢先生。【参考方案2】：

我使用 Alex Gorbatchev 的 SyntaxHighlighter

http://alexgorbatchev.com/wiki/SyntaxHighlighter

在 Yahoo Developer Network 上使用

http://developer.yahoo.com/yui/animation/

【讨论】：

【参考方案3】：

这会有帮助吗：