web-dev-qa-db-ja.com

html / css / js / phpでコードをフォーマットする方法

HTMLドキュメントに書き込んだコードを自動的にフォーマットして色付けする方法を探しています。私はウィキペディアがそれをしていることを知っています、例えばページで： http://en.wikipedia.org/wiki/Nested_function

これを行うためのライブラリがそこにあると確信していますが、私は一生の間、それを見つけることができません。誰か提案がありますか？

htmlpretty-print
24
B T

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ライブラリを有効にするための他の方法をお勧めします（つまり、<body>要素の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();
42
Blixt

これは古い質問ですが、私にとって最初にGoogleで出てきたので、別のオプションを追加したいと思いました。 Prettifyはまだサービス可能なオプションですが、その時代を少し示しています。私が遭遇した新しいライブラリは Prism であり、かなりうまく機能しているようです。これはよりセマンティックであり、コードのフォーマット方法をよりきめ細かく制御できます。また、プラグインをサポートしており、そのテーマはPrettifyのものよりも箱から出して見栄えがします。

11
Brian Moeskau

より単純で強力な解決策は highlight.js だと思います。現時点では169の言語と77のコードスタイル（Solarized dark and 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>

言語とスタイルを確認できます ここ 。

4
Tiago Gouvêa