语法高亮方法答案

【问题标题】：Syntax highlighting methods语法高亮方法
【发布时间】：2012-06-02 08:23:58
【问题描述】：

我想突出显示一些 css 代码，但我不想使用 pre 标记。我见过很多基于 pre 标记的方法，但是我不想使用那个标记。可以使用哪些其他方法突出显示语法。

谢谢。

【问题讨论】：

标签： css syntax-highlighting

【解决方案1】：

你试过Syntax Highlighter吗？
它有很多功能可以帮助您进行语法高亮显示。

顺便问一下，你为什么不想使用<pre> 标签？它是 HTML 中唯一保留空格等语法的标记。

语法荧光笔也可以与<script> 标签一起使用，请参阅here。

【讨论】：

该插件使用
```
 标签。
```
链接坏了:(

【解决方案2】：

pre 元素与语法高亮无关。您在该元素内使用文本级标记，通常还使用 CSS 来突出显示。无论您在那里使用什么工具，也可以在 div 元素中使用，例如，p 或 blockquote。

pre 元素用于预格式化文本，因为它保留了空格和换行符。为了达到同样的效果，您可以在 CSS 中使用white-space: pre。作为副作用，pre 也会导致使用等宽字体；为此，您还可以使用 CSS，例如font-family: Consolas, Courier New, monospace，或 HTML 标记，例如.... 或者您可能认为没有令人信服的理由为 CSS 代码使用等宽字体。

【讨论】：

【解决方案3】：

在头部添加CDN

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.1/styles/default.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

最后在页面中添加

<pre>
  <code class="C#"> 
    public ActionResult Index() {
        return View();
    }
 </code>
</pre>

这就是你不需要css下载，只要你的网站在互联网上。

【讨论】：

【解决方案4】：

您可以使用与 StackOverflow 相同的库：google-code-prettify。

您可以将您的代码 sn-ps 放在 <code>...</code> 标签中，而不是 <pre>...</pre> 标签中，使用起来非常简单。

【讨论】：