hhd*_*fdg 12 html syntax-highlighting syntaxhighlighter
如何使用HTML在网站中显示代码?基本上,我有一个C++程序,我想在我的网站上分享,我想在页面中显示它.
无论如何,除了使用HTML文本之外,还有用HTML显示C++代码吗?
您可以使用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>
Run Code Online (Sandbox Code Playgroud)
HTML包含一个名为的标记<code>,用于您描述的目的.
规范甚至包括一个示例类名约定来指示代码所在的语言:
<pre><code class="language-pascal">var i: Integer;
begin
i := 1;
end.</code></pre>
Run Code Online (Sandbox Code Playgroud)
我不知道任何支持这种约定的网络浏览器(来吧,Chrome),但其他答案中提到的JavaScript语法荧光笔可以用它来发挥它们的魔力.
正如您在示例中所看到的,<code>标记通常包含在<pre>标记中,这样可以保留空白区域,这通常对代码很重要.