Html 如何格式化html/css/js/php中的代码
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1270221/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to format code in html / css / js/ php
提问by B T
I'm looking for a way to automatically format and color code I write in an HTML document. I know wikipedia does it, for example on the page: http://en.wikipedia.org/wiki/Nested_function
我正在寻找一种方法来自动格式化我在 HTML 文档中编写的颜色代码。我知道维基百科这样做，例如在页面上：http: //en.wikipedia.org/wiki/Nested_function
I'm sure there are libraries out there to do this, but I can't for the life of me, find one. Does anyone have any suggestions?
我确信那里有图书馆可以做到这一点，但我一生都无法找到一个。有没有人有什么建议？
回答by Blixt
Have a look at the Prettify JavaScriptlibrary. It's the one generally used by people (it's the one being used here on SO, for example.)
查看Prettify JavaScript库。它是人们通常使用的一种（例如，它是在 SO 上使用的一种。）
You would use it like this:
你会像这样使用它：
In your <head>element:
在您的<head>元素中：
<link href="prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="prettify.js"></script>
In your <body>element:
在您的<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>
That's for simple use of the library. If you're using other JavaScript on your page I would recommend other methods for enabling the Prettify library (i.e., don't use the onloadattribute of the <body>element.) For example, if you're using jQuery, I wrote this jQuery plugin that I usually use to syntax highlight certain elements:
这是为了简单使用库。如果您在页面上使用其他 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())); };
Used like this:
像这样使用：
$('#my-code-element').prettify();
回答by Brian Moeskau
This is an old question, but as it came up first in Google for me, I thought I'd add another option. While Prettify is still a serviceable option, it's showing its age a bit. A newer library I ran across is Prism, and it seems to work rather well. It's more semantic and gives finer-grained control over how to format your code. It also supports plugins and its themes look nicer out of the box than Prettify's.
这是一个老问题，但当它首先出现在 Google 中时，我想我会添加另一个选项。虽然 Prettify 仍然是一个有用的选择，但它有点显示它的年龄。我遇到的一个较新的库是Prism，它似乎工作得很好。它更具语义性，并且对如何格式化代码提供更细粒度的控制。它还支持插件，它的主题开箱即用比 Prettify 更好看。
回答by Tiago Gouvêa
I think a simpler and powerful solution are highlight.js. It support 169 languages at this time and 77 code styles (like Solarized dark and light). Some more:
我认为更简单而强大的解决方案是highlight.js。它目前支持 169 种语言和 77 种代码样式（如 Solarized 深色和浅色）。多一点：
- automatic language detection
- multi-language code highlighting
- available for node.js
- works with any markup
- compatible with any js framework
- 自动语言检测
- 多语言代码高亮
- 可用于 node.js
- 适用于任何标记
- 兼容任何js框架
Quick setup:
快速设置：
1 - In HTML head:
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 - In your HTML content
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>
You can check the languages and styles here.
您可以在此处查看语言和样式。
