如何在HTML页面中显示代码(特别是C ++)?

时间:2011-04-19 00:14:25

标签: html syntax-highlighting syntaxhighlighter

如何使用HTML在网站中显示代码?基本上,我有一个C ++程序,我想在我的网站上分享,我想在页面中显示它。

除了使用HTML文本之外,还有用HTML显示C ++代码吗?

3 个答案:

答案 0 :(得分:8)

您可以使用SyntaxHighlighter。它将通过针对各种语言的特定语法突出显示来不显眼地增强页面上的代码示例。

这是C ++的一个例子

<head>
  <link href="css/shCore.css" rel="stylesheet" type="text/css" />
  <link href="css/shThemeDefault.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <pre class='brush: cpp'>
  // my first program in C++
  #include <iostream>
  using namespace std;

  int main ()
  {
    cout << "Hello World!";
    return 0;
  }
  </pre>

  <script src="js/shCore.js"></script>
  <script src="js/shBrushCpp.js"></script>
  <script>
    SyntaxHighlighter.all()
  </script>
</body>

答案 1 :(得分:8)

HTML包含a tag called <code>,用于您描述的目的。

规范甚至包括一个示例类名约定,用于指示代码所在的语言:

<pre><code class="language-pascal">var i: Integer;
    begin
        i := 1;
    end.</code></pre>

我不知道任何支持这种约定的网络浏览器(来吧,Chrome),但其他答案中提到的JavaScript语法荧光笔可以用它来发挥它们的魔力。

正如您在示例中所看到的,<code>标记通常包含在<pre>标记中,该标记会保留空格,这通常对代码很重要。

答案 2 :(得分:7)

那里有各种语法荧光笔。 Google Code Prettify非常好。 (无论如何,Stack Overflow都足够好用。)