はじめに
はじめに
Getting Started
あなたは、webページでコードを強調するために、Prettifyスクリプトを読み込むことができます。
それは、コード・スニペットに、スタイルを追加します。そのため、トークンの境界が、際立ちます。 そして、あなたの読者は、左から右の解析を実行する必要なく、心で、あなたのコードの主旨を得ることができます。
コード・セクションを指定する
Marking code sections
prettyprinterは、prettyprintクラスで<pre>、<code>または<xmp>要素を探します。：
<pre class="prettyprint">
source code here
</pre>source code here
そして、キーワード、文字列、説明を色付けする<span>と他のトークン型を追加します。
あなたが、Markdownや一部の他のHTMLジェネレーターを使用している場合、それは、クラスを追加しません。 あなたは、このような処理命令を優先することで、代わりに、飾りをコードの対象に要求することができます。：
<?prettify?>
<pre class="prettyprint">
code here
</pre>code here
自動ローダー
あなたは、１つのURLを通して飾り立てるために、JavaScriptとCSSを読み込むことができます。
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>全体のシステムを読み込み、そして、ページ読込で実行する飾りを予定に入れます。追加で利用できる、さまざまなオプションがあります。 あなたは、ランナを設定するために、（CGI引数として）指定することができます。
| CGIパラメータ | Default | 意味 |
|---|---|---|
| autoload=(true, false) | true | ページの読み込み時に、自動的に実行されます。 |
| lang=... | none | 指定された言語のための言語ハンドラを読み込みます。 それは、通常、その言語のためのソースファイルのためのファイル拡張子です。 言語ハンドラのインデックスを参照してください。 複数回（？lang=css&lang=ml）指定される場合、すべてが、読み込まれます。 |
| skin=... | none | スキン・ギャラリーを参照してください。複数回指定された場合、うまく読み込まれた最初のものが、使用されます。 |
| callback=js_ident | prettyprintingが完了するとき、window.exports["js_ident"]が、呼び出されます。複数回指定される場合、すべてが、呼び出されます。 |
例えば、
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=css&skin=sunburst"></script>また、CSS言語拡張機能を読み込むために、langパラメータ、そして、sunburstスキンを読み込むスキン・パラメータを指定します。
あなた独自のJSとCSSを供給する
Serving your own JS & CSS
あなたは、スクリプトとスタイルをダウンロードすることができます。そして、それらをあなた自身に供給します。スクリプトとスタイルシートの両方が含まれていることを確認してください。：
そして、その次に、一旦、あなたのページが、読み込みを完了すると、prettyPrint関数を実行します。これを行う1つの方法は、このように、onloadハンドラを使用する方法です。：
<body onload="prettyPrint()">スタイル
Styling
prettifierは、クラスを一つだけ追加します。;それは、正確な色やフォントを指定するものではありません。 このように、あなたは、コードを飾る方法を変更する、異なるスタイルシートに交換することができます。
あなた独自のスタイルシートを作成する最も簡単な方法は、スタイル・ギャラリーから始めて、それを微調整することです。
あなたは、スタイルを指定するために、CSS @media規則を使用することができます。誰かが、それを印刷しようとしたとき、プリンターで上手く動作します。(たとえば、白い背景に暗いテキスト）
言語ヒント
Language Hints
prettifyは、言語を推測するために、最高の効果をもたらします。 しかし、Cのような、そして、HTMLのような言語で、最もうまく動作します。その他のために、特別な言語ハンドラがあります。 それは、言語ヒントに基づいて選択されます。
<pre class="prettyprint lang-scm">(friends 'of '(parentheses))</pre>コードが、Schemeコードであることを指定するために、lang-scmヒントを使用します。
<?prettify lang=scm?>
<pre>(friends 'of '(parentheses))</pre>(friends 'of '(parentheses))
また、動作します。
行の番号付け
Line Numbering
以下の中のLinenumクラス
<pre class="prettyprint linenums">
Many
lines
of
code
</pre>Many lines of code
あなたが、行番号を取得するように、各々の行のまわりに、<ol>要素と<li>要素を挿入するためにprettyprinterに伝えます。 ほとんどのスタイルシートは、5行目ごとを除いて行番号を隠します。 あなたがコードのより大きく、かなりの量を抜粋している場合、linenums：40は、40行目から、行を番号付けを開始します。そして、
<?prettify linenums=40?><pre>lots of code</pre>lots of code
原文最終更新日 2015年5月17日
