语法高亮方法

Question

我想高亮一些css代码，但我不想使用pre标签。我见过很多基于pre标签的方法，但我不想使用那个标签。还有什么其他方法可以用来高亮语法。

谢谢。

Answer 1

您尝试过语法荧光笔吗？
它有很多功能可以帮助您进行语法突出显示。

顺便问一下，为什么你不想使用

<pre>

标签？它是 HTML 中唯一保留空格等语法的标签。

语法荧光笔也可以与

<script>

标签一起使用，请参阅此处。

Answer 2

在头部添加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。

Answer 3

pre

元素与语法突出显示无关。您可以在该元素内使用文本级标记（通常还使用 CSS）来突出显示。例如，您使用的任何工具也可以在

div

元素内部使用，或者

p

或

blockquote

。

pre

元素用于预格式化文本，因为它保留空格和换行符。为了达到同样的效果，您可以在 CSS 中使用

white-space: pre

。作为副作用，

pre

还会导致使用等宽字体；为此，您还可以使用 CSS，例如

font-family: Consolas, Courier New, monospace

，或 HTML 标记，例如....或者您可能认为没有令人信服的理由在 CSS 代码中使用等宽字体。

Answer 4

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

您可以将代码片段放入

<code>...</code>

标签而不是

<pre>...</pre>

标签内，使用起来非常简单。