Home > TagScript > html、css、Java > シンタクックスハイライト

「google-code-prettify」のドキュメント「README.md」を翻訳する

新規作成日 2016-12-26
最終更新日

Javascriptによるコードの修飾

Javascript code prettifier

HTMLで、より素晴らしく、ソースコード・スニペットを埋め込むことができるスクリプトです。

例を参照

設定

Setup

  • あなたのドキュメントに、下記のスクリプト・タグを入れます。

    <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

  • 必要なオプションを使用してURLを設定するには、「はじめに」を参照してください。
  • スキン・ギャラリーを確認し、あなたが気に入るスタイルを選択します。

使用法:

Usage

<pre class="prettyprint">... </pre>、 あるいは、<code class="prettyprint">... </code>内に、コード・スニペットを配置します。そして、それは、自動的に、素敵に出力されます。

<pre class="prettyprint">class Voila {
public:
  // Voila
  // 出来上がり!
  static const string VOILA = "Voila";

  // will not interfere with embedded <a href="#voila2">tags</a>.
  // 組み込まれた<a href="#voila2">tags</a>に干渉しません。
}</pre>
class Voila {
public:
  // Voila
  // 出来上がり!
  static const string VOILA = "Voila";

  // will not interfere with embedded tags.
  // 組み込まれたtagsに干渉しません。
}

議論

Discussion

議論、提案と一般的な意見のに付いては、以下の公式サポート・グループを使用してください。:

FAQ

FAQ

それは、どの言語で動作しますか?

For which languages does it work?

prettify.jsの説明は、信頼できるものですが、しかし、字句解析器は、 Cとその仲間、Java、Python、Bash、SQL、HTML、XML、CSS、Javascript、MakefileとRustを含む、多くの言語で動作するはずです。

それは、Ruby、PHP、VBとawkとPerlとRubyの適切なサブセットで、まずまず、動作しますが、 コメント記法のため、言語拡張なしでは、Smalltalk、OCamlなどでは動作しません。

他の言語は、拡張機能を通してサポートされます。:

Apollo; Basic; Clojure; CSS; Dart; Erlang; Go; Haskell; Lasso; Lisp, Scheme; Llvm; Logtalk; Lua; Matlab; MLs: F#, Ocaml,SML; Mumps; Nemerle; Pascal; Protocol buffers; R, S; RD; Rust; Scala; SQL; Swift; TCL; Latek; Visual Basic; VHDL; Wiki; XQ; YAML

あなたが、お気に入りの言語のための拡張を追加したい場合、src/lang-lisp.jsを確認し、pull リクエストを送信ししてください。

コードの言語を指定するには、どうすればよいですか?

How do I specify the language of my code?

PR.prettyPrint()が推測するので、言語を指定する必要はありません。 あなたは、prettyprintクラスと一緒に言語拡張機能を指定することで、言語を指定することができます。:

また、あなたは、language-javaスタイルのクラスを使用して、PREにコード要素を組み込んで、HTML5記法を使用することができます。

<pre class="prettyprint lang-html">
  The lang-* class specifies the language file extensions.
  File extensions supported by default include
    "bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html",
    "java", "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh",
    "xhtml", "xml", "xsl".
</pre>
  The lang-* class specifies the language file extensions.
  File extensions supported by default include
    "bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html",
    "java", "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh",
    "xhtml", "xml", "xsl".

それは、<難読化されたコードサンプル>では動作しませんか?

It doesn't work on <obfuscated code sample>?

はい。難読化されたコードを飾り立てることは、ブタに口紅をやるようなものです。-すなわち、このツールの範囲外です。

どのブラウザで動作しますか?

Which browsers does it work with?

IE 6、Firefox 1.5&2、Safari 2.0.4からテストされています。テストを見て、ブラウザで動作するかどうかを確認してください。

何が変更されたのですか?

What's changed?

変更ログを参照してください。

WordPressで、文字列のPrettyprintingが動作しないのはなぜですか?

Why doesn't Prettyprinting of strings work on WordPress?

見たところ、wordpressは、閉じる引用符を変更する「スマートな引用」をします。これにより、閉じる引用符は、開いた引用符と一致しません。

これは、コード・サンプルのコピーと貼り付けと同様に飾り立てを分割します。 コード・スニペットのスマートな引用を止める方法については、WordPressヘルプセンターを参照してください。

コードに行番号を挿入するにはどうすればよいですか?

How do I put line numbers in my code?

あなたは、linenumsクラスを使用して行番号を付けることができます。 あなたのコードが、行番号1で開始しない場合、あなたは、linenums:52のように、そのクラスの最後にコロンと行番号を追加することができます。

例えば、

<pre class="prettyprint linenums:4">// This is line 4. これは、行4です。
foo();
bar();
baz();
boo();
far();
faz();
</pre>
// This is line 4. これは、行4です。
foo();
bar();
baz();
boo();
far();
faz();

マークアップの一部が、コードとしてマークされないようにするにはどうすればよいですか?

How do I prevent a portion of markup from being marked as code?

あなたは、nocodeクラスを使用して、コードでないマークアップの範囲を識別することができます。

<pre class=prettyprint>
int x = foo();  /* This is a comment  <span class="nocode">This is not code</span>Continuation of comment */
int y = bar();
</pre>
int x = foo();  /* This is a comment  This is not codeContinuation of comment */
int y = bar();

より完全な例は、issue22のテストケースを参照してください。

私はエラーメッセージ "aは、関数ではありません"、あるいは、"opt_whenDoneは、関数ではありません"を取得します。

I get an error message "a is not a function" or "opt_whenDone is not a function"

あなたが、イベント・ハンドラで、prettyPrintを呼び出す場合、それを関数でラップします。行う代わりに、

addEventListener('load', PR.prettyPrint, false);

以下のようなクロージャでラップします。

addEventListener('load', function (event) { PR.prettyPrint() }, false);

そのため、ブラウザは、混乱させるPR.prettyPrintに、イベントオブジェクトを渡しません。

自分のコードの色とスタイルをカスタマイズするにはどうすればいいですか?

How can I customize the colors and styles of my code?

Prettifyは、コードの種類を記述するクラスで<span>を追加します。あなたは、これらのクラスに一致させるために、CSSスタイルを作成することができます。

例については、テーマギャラリーを参照してください。

私は、コードにクラスを追加することができません(なぜなら、それは、Markdownなどに由来します)

I can't add classes to my code (because it comes from Markdown, etc.)

<pre class="prettyprint ..." >の代わりに、あなたは、処理命令を持続する、 コメントや処理命令を使用することができます。:<?prettify ...?>は、「はじめに」で説明したとおりに動作します。

私は、どのように、5行おきではなく、毎行に、行番号を配置するのでしょうか?

Prettifyは、HTMLのリスト要素に行を配置します。そのため、行番号は、コピー・ペーストによって捕えられません。 そして、行の番号付けは、デフォルトのスタイルシートprettify.cssのCSSによって制御されています。

<style>
li.L0, li.L1, li.L2, li.L3,
li.L5, li.L6, li.L7, li.L8
{ list-style-type: decimal !important }
</style>

他の行のために、行の番号付けを戻す必要があります。

ライセンス

Apacheライセンス2.0

Home Editor Tools Operation TagScript HPSpace

Copyright (C) 2011 Horio Kazuhiko(kukekko) All Rights Reserved.
kukekko@gmail.com
ご連絡の際は、お問い合わせページのURLの明記をお願いします。
「掲載内容は私自身の見解であり、所属する組織を代表するものではありません。」