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

B T*_*B T 24 html pretty-print

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

我确信有些图书馆可以做到这一点,但我不能为我的生活找到一个.有没有人有什么建议?

Bli*_*ixt 40

看看Prettify JavaScript库.它是人们通常使用的那个(例如,这是在SO上使用的那个.)

你会像这样使用它:

在你的<head>元素中:

<link href="prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="prettify.js"></script>
Run Code Online (Sandbox Code Playgroud)

在你的<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>
Run Code Online (Sandbox Code Playgroud)

这是为了简单地使用库.如果你在你的页面上使用其他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())); };
Run Code Online (Sandbox Code Playgroud)

像这样使用:

$('#my-code-element').prettify();
Run Code Online (Sandbox Code Playgroud)


Bri*_*kau 11

这是一个老问题,但是因为它首先出现在Google中,我想我会添加另一个选项.虽然Prettify仍然是一个可用的选项,但它显示了它的年龄.我遇到的一个新图书馆是Prism,它看起来效果很好.它更具语义性,可以对如何格式化代码进行更精细的控制.它还支持插件,它的主题看起来比Prettify更好.

  • 通过在我的代码中添加任何称为棱镜的东西,我真的很不安...:p (2认同)

Tia*_*vêa 5

我认为更简单而强大的解决方案是highlight.js。它目前支持 169 种语言和 77 种代码样式(如 Solarized 深色和浅色)。多一点:

  • 自动语言检测
  • 多语言代码高亮
  • 可用于 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>
Run Code Online (Sandbox Code Playgroud)

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>
Run Code Online (Sandbox Code Playgroud)

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