web-dev-qa-db-ja.com

HTML <code>タグ内の色（構文の強調表示）

次のようなコードフラグメントでは...

class Foo
{
  internal Foo()
  {
    for (int i = 0; i < 42; ++i);
  }
}

...さまざまなキーワードなどは、ブラウザに表示されるときに色分けされています。

「ソースの表示」を実行すると、この色分けを実装するHTMLに特別なものは何も表示されません。

では、この構文固有の色強調表示はどのように、および/またはどこに実装されていますか？たとえば、ブラウザに組み込まれているのでしょうか、それともブラウザ内のDOMを編集するサイト固有のJavaScriptによって実装されているのでしょうか。

これはGoogleにとって難しい質問だと思います。

htmlsyntax-highlightingcolor-coding
25
ChrisW

Stackoverflowは、構文の強調表示を行うために Googleのprettify JSライブラリを使用します。 HTMLがサーバーによって配信された後、クライアント側で実行されます。そのため、生のHTMLソースには表示されません。 FireBug などのブラウザプラグインを使用している場合は、prettifyが魔法をかけた後にDOMを検査できます。

25
Asaph

これはJavascriptライブラリです。そこにはかなりの数があり、最も人気があるのは SyntaxHighlighter です。私の個人的なお気に入りは チリ ですが。

4
David Brown

Meta.SEには、優れたFAQ 構文の強調表示とは何ですか？ 以上のものがあります。

便宜上、ここで完全に引用していますが、サポートされている言語のリストの更新については、元の投稿を確認することをお勧めします。

シンタックスハイライトとは何ですか？

構文の強調表示により、投稿内のコードを記述された言語に基づいて強調表示し、読みやすくすることができます。

それはどのように機能しますか？

Stack Exchangeには、独自の構文強調表示エンジンがありません。Google Code Prettify を使用します。したがって、構文の強調表示に関するバグや機能のリクエストはStack Exchangeで処理できず、Google CodePrettifyの背後にあるチームに転送する必要があります。

構文の強調表示は、投稿を作成または編集するときに、5秒間入力を停止するとすぐにプレビューに割り当てられます。

Prettify 強調表示できる コア言語 のリストをサポートします（C/C++、C＃、Java、JavaScript/CoffeeScript、Perl、Python、Ruby、Regex、Bash、HTMLを含む） 、XML）、およびdefaultほとんどのCのような言語とHTMLのようなマークアップ言語で問題なく機能する汎用ハイライター。追加の言語は 拡張子 （各lang-*.jsファイル）として実装されます。

コードが正しく強調表示されないのはなぜですか？

投稿に正しい強調表示がない場合は、サポートされていない可能性があります。 Prettifyがサポートする言語のリスト をご覧ください。言語がリストにない場合は、Stack Exchangeで展開する前に、Prettifyプロジェクト内で言語を作成する必要があります。

タグに適用できる言語がすでにリストにあるが、Stack Exchangeで使用されていない場合は、ここMetaで機能リクエストを発生させて、ネットワークにデプロイしてください。

バグを報告したり、新しい言語をリクエストしたりするにはどうすればよいですか？

シンタックスハイライト自体のバグである場合は、 issues list をチェックして、すでに報告されているかどうかを確認してください。そうでない場合は、遠慮なく報告するか、 プロジェクトに参加 そして自分で修正を送信してください。提起した問題を迅速に修正したい場合は、レポートに修正を含めることをお勧めします。修正がPrettifyによってすでに実装されているが、ここでまだ機能しない場合は、Metaで機能要求を発生させて、新しいバージョンのPrettifyの展開を要求してください。

同じ問題リスト に新しい言語を追加するリクエストを送信することもできます。 Stack Exchange しないこの構文ハイライトを維持し、バグレポートやそれに関する機能リクエストをここMetaに投稿しても、修正または実装されないことに注意してください。

何かをする前に、正しい強調表示がオンになっていることをsureにしてください。

シンタックスハイライトの言語をどのように決定しますか？

舞台裏では、Stack Exchangesは 質問のタグ を使用して、使用している言語を推測します。構文が強調表示されているタグが複数ある場合は、デフォルトを使用して、Prettifyに使用するのに最適な言語を推測させます。

タグに言語のヒントがあるかどうかを知りたい場合は、すべてのユーザーがそのタグのwikiページにアクセスして確認できます。そのタグに現在使用されている言語ヒント（ある場合）は、ウィキのボタンの下の一番下に表示されます。

Code language (used for syntax highlighting): lang-Java

コードブロックの上に言語ヒントを指定することで、選択した言語で使用されている強調表示を 明示的にオーバーライド することができます。

<!-- language: lang-or-tag-here -->

    code goes here

言語ヒントで言語コードまたはタグの名前を使用して、構文の強調表示をアクティブにすることができます。 prettifyでサポートされている言語コードの完全なリストについては、以下を参照してください。

例えば：

Here is a code block with language code as hint:

<!-- language: lang-js -->

    function greet(person) {
        return "Hello " + person;
    }
    var user = "John Doe";
    alert(greet(user));

Here is a code block with tag name as hint:

<!-- language: TypeScript -->

    var arr = [0, 1, 2];

構文を強調表示したくない場合は、lang-none言語を使用できます。

<!-- language: lang-none -->

投稿内のallコードブロックに言語ヒントを適用することもできます（したがって、各ブロックの前にヒントを追加する必要はありません）。

<!-- language-all: lang-or-tag-here -->

ヒント：言語コード

これは、構文を強調表示するための言語ヒントで使用できるすべての識別子の完全なリストです。

芯：

  • デフォルト：Prettifyにコードを解釈させて推測させる
    default
  • なし：構文の強調表示を明示的に使用しない
    lang-none
  • Bashおよびその他のシェルスクリプト
    lang-bash、lang-bsh、lang-csh、lang-sh
  • C、C++、Objective-Cなど
    lang-c、lang-cc、lang-cpp、lang-cxx、lang-cyc、lang-m
  • C＃
    lang-cs
  • CoffeeScript
    lang-coffee
  • HTML、XML、XSLなど
    lang-html、lang-xml、lang-xsl
  • Java
    lang-Java
  • JavaScript
    lang-js、lang-javascript
  • [〜＃〜] json [〜＃〜]
    lang-json
  • Perl
    lang-pl、lang-Perl
  • Python
    lang-py、lang-python、lang-cv
  • 正規表現
    lang-regex
  • ルビー
    lang-rb、lang-Ruby
  • Rust
    lang-rc、lang-rs、lang-Rust

拡張機能：

ヒント：タグ

サイトに存在する任意のタグを指定でき、そのタグに現在関連付けられている言語コードを使用します（null（ヒントなし）、defaultのいずれか）。 、またはspecific language-code）。

デフォルトでは、すべてのタグは言語コードとしてnoneで始まることに注意してください。言語コードとしてnoneが指定されているタグは無視され、defaultに戻ります。

上記のlang-noneコードを使用するのと同様に、プレーンなnoneキーワードを使用して、構文の強調表示を手動で指定しないこともできます。

編集者への注意：

100％確実に存在する場合を除いて、上記のリストに追加しないでください。何かを入力してそれを入力したからといってlooks =正しく強調表示されているようにしないは、識別子が実際にシステムに存在することを意味します。無効な識別子はdefaultに戻ることに注意してください。 リストに新しいヒントを追加するときに、編集サマリーにヒントが存在することを確認するメタ質問にリンクしてください。

コメント投稿者への注意：

これに関するコメントFAQは、FAQで理解できない可能性があることについて、修正できるように説明を求めるためのものです。どうぞ特定の言語が将来サポートされるかどうかを尋ねないでくださいそれはnot私たちができる質問ですStack Exchangeはこのハイライターを維持していないため、回答してください。言語サポートについては、 Google Code Prettify にアクセスしてください。

2
Aaron Thoma