JavaScriptを使用した構文強調コード[終了]


109

HTMLの<code>ブロックを構文で強調表示するために推奨できるJavaScriptライブラリはどれですか。

(回答ごとに1つの提案をしてください)。


回答:


103

StackOverflowはPrettifyライブラリを使用します。


私はこれを2番目にします。Google Codeは、独自に作成したリポジトリの強調表示にそれを使用し、言語を自動的に検出します。
Karan、

言語を「自動的に」検出するものを使用すると、クライアントのマシン/ブラウザにより多くの重みが
James

2
あなたがそれを知っているなら、あなたはPrettifyに言語を与えることができます、それはパフォーマンスを改善します。言語が多いため、StackOverflowでは使用されません。
ヴィンセントロバート

これを私のWebサイトに追加しただけで、とても簡単に使用できます。
ローレンスドル

@Vincent:パフォーマンス以上の改善;-)
SamB

44

最近、レインボーというものを開発しました。

主な設計目標は、コアライブラリを非常に小さくして、開発者が簡単に拡張できるようにすることでした。

http://rainbowco.deを参照してください。


2
今日Rainbowに出くわしました。Prettifyよりも細かく識別できるように見えます(たとえば、いつrdf:typeが要素として使用され、いつ属性であるかを識別できる)。
Roger_S

3
これは上に行く必要があります、クレイグ。他のすべてのソリューションを試したところ、RainbowだけがPythonを正しく処理し、読みやすいテーマスタイルシートがありました。素晴らしいプラグイン!
Blender


15

jQuery Syntax Highlighterは、GoogleのPrettifyをベースにした新しいものです-本当に本当に本当に人気のあるプレーンなJavaScriptシンタックスハイライターです。

それはのようなものをサポートcodeし、pre同様にクラス名を使用することができ、ブロックをlanguage-javascript我々はハイライトと同様に、ワードラップにそれをしたい示すために。他の多くのように未加工のビューを開かなくても、コードを通常どおり選択してコピーして貼り付けることができます。HTML5データ属性を使用するdata-shか、初期化時にオプションを指定することにより、さらにカスタマイズできます。定期的に更新される非常に安定した選択肢。


著者は、実際には、SyntaxHighlighterではなく、GoogleのPrettifyに基づいていると述べています。ただし、SyntaxHighlighter 3のように見えますが、設定に必要な作業ははるかに少ないようです。リンクをありがとう!
Tieson T.

15

Lea Verou氏によるPrismについてはどうでしょう。

6月(2012)の彼女のブログ投稿発表から:

  • 小さいです。コアは、わずか1.5KBに縮小およびgzipされています。
  • それは信じられないほど拡張可能です。新しい言語を追加するのは簡単です(これは、最近のすべての構文強調表示機能で提供されています)だけでなく、既存の言語を拡張することもできます。
  • 特定の場合にパフォーマンスを向上させるために、Webワーカーによる並列処理をサポートしています。
  • Prism固有のマークアップを使用する必要はありません。Prism固有のクラス名でさえ使用する必要はありません。とにかく使用する必要がある標準のマークアップのみを使用してください。したがって、しばらく試してみて、気に入らなければ削除して、跡を残さないようにすることができます。

これは、新しい言語定義を簡単に追加できるため、私にとってすべての回答の中で最良の選択肢となりました。
Mike Grace


5

jQueryを使用している場合は、Chilliがあります。

http://code.google.com/p/jquery-chili-js/

あなたがしなければならないすべてはjquery-chili.jsとrecipes.jsを含み、そしてハイライトを行うことです

$("code").chili();

言語自体を理解する必要があります。


そのページの例へのリンクはすべて、広告でいっぱいの期限切れのドメインにつながるため、この蛍光ペンがどのように見えるかを理解するのは少し難しいです。
Nathan Osman

5

SHJSにとても満足しています。さまざまな言語をサポートしており、かなり高速で正確です。

これが私がブログで使用する例です。Codaの構文強調表示をシミュレートする独自のカスタムCSSファイルを使用しています。使用したい場合は私にメールしてください。


4

jQuery.Syntaxは、非常に高速で軽量な構文ハイライターです。構文ソースファイルの動的読み込みがあり、CSSまたはモードラインを使用して問題なく統合されます。

これは、ギャップを埋めるために特別に開発されました。つまり、高速でクリーンなクライアント側構文パーサーです。


残念ながら、標準のFpMLメッセージはスパムであると考えていました:)
ehosca

@ehosca、あなたは私にあなたが抱えている問題についていくつかの説明を与えることができますか?
ioquatix 2011

私は中XML貼り付けるときgoo.gl/PPcDxgoo.gl/qSqm9それは無効なコンテンツを言うと、スパムのように見えます。お役に立てれば。
ehosca

テキストに改行を含める必要があります。そうしないと、リンクスパムのように見えます。私が使用した正確な式を思い出せませんが、1行に複数のURLがある場合、テキストはスパムと見なされます。これは、ボットのヒープがシステムにスパムを送信していたためです(syntax-highlighing.com)。
ioquatix 2011


3

私は議論の余地はありませんが、CMSまたはブログプラットフォームを使用している場合は、バックエンドの蛍光ペンを使用する方が明白な理由で優れていることを言及する価値があると思いました— Geshihttp://qbnz.com/highlighter/)興味がある場合。実際、バックエンドテクノロジーを介してHTMLコンテンツを解析するようにサーバーを設定することもできます。そのため、JS蛍光ペンはまったく必要ありません。(それらが追加する唯一の機能は、[swfを使用して]印刷/コピーする機能です。)


2
それは私には明らかではありません。なぜバックエンドハイライターを使うほうが良いのですか?
Evan P.

1
ええ、私も、クライアントに大きな応答を送信することを好むことについて、「明白」なことを本当に知りたいと思っています...
ZenMaster

1
私は、JSが有効になっていないデバイスにも構文の強調表示が存在することを好みます。さらに、クライアント側の蛍光ペンには実行時のコストがかかり、強調するコードがたくさんある場合にはかなりの負担になります。そうは言っても、それは特定のユースケースに依存します:)
James

JSが有効になっていないデバイスは何ですか?
ジャックギフィン2018年


弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.