Question

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

我确信有些图书馆可以做到这一点，但我不能为我的生活找到一个。有没有人有任何建议？

Answer 1

查看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();

Answer 2

这是一个老问题，但正如我在Google首先提出的那样，我想我会添加另一个选项。虽然Prettify仍然是一个可用的选项，但它显示了它的年龄。我遇到的一个较新的库是Prism，它似乎工作得相当好。它更具语义性，可以对如何格式化代码进行更精细的控制。它还支持插件，其主题看起来比Prettify更好。

Answer 3

我认为更简单，更强大的解决方案是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>

您可以查看语言和样式here。

如何在html / css / js / php中格式化代码

3 个答案: