27

我正在寻找一种方法来自动设置我在 HTML 文档中编写的格式和颜色代码。我知道维基百科会这样做，例如在页面上：http ://en.wikipedia.org/wiki/Nested_function

我敢肯定那里有图书馆可以做到这一点，但我一辈子都找不到，找到一个。有没有人有什么建议？

4

3 回答 3

44

看看Prettify JavaScript库。它是人们通常使用的一种（例如，它是在 SO 上使用的一种。）

你会像这样使用它：

在你的<head>元素中：

<link href="prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="prettify.js"></script>

在你的<body>元素中：

<body onload="prettyPrint()">
  <!-- any HTML you like here... -->
  <pre class="prettyprint">
def say_hi():
    print("Hello World!")
  </pre>
  <!-- any HTML you like here... -->
</body>

这是为了简单地使用库。如果您在页面上使用其他 JavaScript，我会推荐其他方法来启用 Prettify 库（即，不要使用元素的onload属性<body>。）例如，如果您使用的是 jQuery，我编写了这个 jQuery 插件我通常使用语法高亮某些元素：

// Extend jQuery functionality to support prettify as a prettify() method.
jQuery.fn.prettify = function () { this.html(prettyPrintOne(this.html())); };

像这样使用：

$('#my-code-element').prettify();
于 2009-08-13T05:51:48.997 回答
11

这是一个老问题，但当它首先出现在谷歌中时，我想我会添加另一个选项。虽然 Prettify 仍然是一个可用的选项，但它有点显示它的年龄。我遇到的一个较新的库是Prism，它似乎工作得很好。它更具语义性，并且可以对如何格式化代码进行更细粒度的控制。它还支持插件，而且它的主题看起来比 Prettify 的更好。

于 2013-12-01T05:59:41.710 回答
6

我认为更简单而强大的解决方案是highlight.js。它目前支持 169 种语言和 77 种代码样式（如 Solarized dark 和 light）。多一点：

  • 自动语言检测
  • 多语言代码高亮
  • 可用于 node.js
  • 适用于任何标记
  • 兼容任何js框架

快速设置：

1 - 在 HTML 头中：

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

2 - 在您的 HTML 内容中

<pre>
   <code class="html">
      <p>This is your HMTL sample</p>
      <p>You can use classes like "html", "php", "css", "javascript" too..</p>
   </code>
</pre>

您可以在此处查看语言和样式。

于 2017-01-22T14:51:03.253 回答