2009-08-13 9 views
20

HTML書類に書いた書式と色を自動的に書式設定する方法を探しています。私はウィキペディアがこれを行うことを知っています。たとえば、次のページにあります。http://en.wikipedia.org/wiki/Nested_functionhtml/css/js/phpの書式設定方法

私は、これを行うライブラリがあると確信していますが、私は人生のためには見つけられません。誰にも何か提案はありますか?

答えて

37

Prettify JavaScriptライブラリをご覧ください。あなたの<head>素子において

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

それは一般の人が使用する1(。それは例えば、SOにここで使用されている一つだ)

だあなたはこのようにそれを使用します

<body onload="prettyPrint()"> 
    <!-- any HTML you like here... --> 
    <pre class="prettyprint"> 
def say_hi(): 
    print("Hello World!") 
    </pre> 
    <!-- any HTML you like here... --> 
</body> 

T:あなたの<body>要素でライブラリの簡単な使用のための帽子。あなたのページで他のJavaScriptを使用している場合は、Prettifyライブラリを有効にするための他の方法をお勧めします(例えば要素のonload属性を使用しないでください)。たとえば、jQueryを使用している場合、これは古い質問ですが、それは私のためにグーグルに最初に来たとして、私は「考え

$('#my-code-element').prettify(); 
+2

Spot on!よく働く!ありがとう。 –

6

:このように使用

// Extend jQuery functionality to support prettify as a prettify() method. 
jQuery.fn.prettify = function() { this.html(prettyPrintOne(this.html())); }; 

:私は通常、特定の要素を強調構文に使用したプラグインd別のオプションを追加します。 Prettifyはまだサービス可能なオプションですが、その年齢は少しです。私が遭遇した新しいライブラリはPrismであり、かなりうまくいくようです。よりセマンティックで、コードの書式設定方法を細かく制御できます。プラグインもサポートしており、そのテーマはPrettifyのものよりも優れた外観をしています。

+2

私はプリズムと呼ばれるものを私のコードに追加することで本当に不安になるでしょう...:p –

+0

OMYGOSH SO GOOD!それに感謝! – Adam

1

シンプルで強力な解決策はhighlight.jsだと思います。現時点では169の言語をサポートしており、77のコードスタイル(暗黙の暗闇のような)をサポートしています。いくつかのより: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を確認することができます。