当前位置：文江博客话题详情

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

发布于 2024-08-02 04:28:24 字数 232 浏览 13 评论 0原文

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

若水微香 2024-08-09 04:28:25

查看美化 JavaScript 库。这是人们通常使用的一种（例如，SO 上使用的就是这种。）

您可以这样使用它：

在您的元素中：

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

在您的元素中：

<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 属性）元素。）例如，如果您使用 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();

Have a look at the Prettify JavaScript library. It's the one generally used by people (it's the one being used here on SO, for example.)

You would use it like this:

In your <head> element:

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

In your <body> element:

<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 onload attribute 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:

// 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();

回复收藏 0 原文

椒妓 2024-08-09 04:28:25

这是一个老问题，但由于它首先出现在谷歌中，我想我应该添加另一个选项。虽然 Prettify 仍然是一个可用的选项，但它已经有点过时了。我遇到的一个较新的库是 Prism，它似乎工作得相当好。它更具语义性，并且可以更细粒度地控制如何格式化代码。它还支持插件，而且它的主题看起来比 Prettify 的开箱即用更好。

回复收藏 0 原文

少跟Wǒ拽 2024-08-09 04:28:25

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

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>

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

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:

automatic language detection
multi-language code highlighting
available for node.js
works with any markup
compatible with any js framework

Quick setup:

1 - In HTML head:

<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

<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.

回复收藏 0 原文

~没有更多了~