Google Code Prettifyでコードを美しく！シンタックスハイライト導入

Google Code Prettifyは、ウェブサイトにシンタックスハイライトを導入するためのJavaScriptライブラリです。このライブラリを使用することで、コードスニペットの可読性が大きく向上し、視覚的に魅力的な表示が可能になります。シンタックスハイライトは、プログラマーがコードを理解しやすくするために色やフォントスタイルを適用する手法で、多くの開発者にとって欠かせないツールとなっています。本記事では、Google Code Prettifyを使用してウェブページにシンタックスハイライトを追加する方法を詳しく解説します。

Google Code Prettifyでコードを美しく！シンタックスハイライト導入

Google Code Prettifyは、ウェブ上でコードを美しく表示するためのライブラリです。コードのシンタックスハイライト機能を簡単に導入でき、さまざまなプログラミング言語に対応しています。この記事では、Google Code Prettifyを使用してコードを美しく表示する方法を詳しく解説します。

Google Code Prettifyとは？

Google Code Prettifyは、Googleが開発したオープンソースのライブラリであり、ウェブページ上でコードのシンタックスハイライトを行うことができます。このライブラリはJavaScriptで記述されており、CSSを使って色やスタイルをカスタマイズすることができます。導入は簡単で、ウェブページに少量のスクリプトを追加するだけで利用可能です。

Google Code Prettifyの導入方法

Google Code Prettifyを導入するには、以下の手順を実行します。

1. CDNからスクリプトを読み込む：Google Code PrettifyのCDNを使用して、スクリプトをHTMLファイルに追加します。
2. コードブロックにクラスを追加する：コードを表示するHTML要素に<pre><code>タグを使用し、class=prettyprintを追加します。
3. ページの読み込み時にPrettifyを呼び出す：ページの読み込みが完了したときに、`prettyPrint();`関数を呼び出すスクリプトを追加します。

これで、ウェブページ上でコードがシンタックスハイライトされます。

サポートされているプログラミング言語

Google Code Prettifyは、以下のプログラミング言語をサポートしています。

言語	シンタックスハイライト例
JavaScript	<pre><code class=lang-js>var x = 5;</code></pre>
Python	<pre><code class=lang-py>def hello(): print(Hello, World!)</code></pre>
Java	<pre><code class=lang-java>public class Main { public static void main(String[] args) { System.out.println(Hello, World!); } }</code></pre>
C	<pre><code class=lang-c>include <stdio.h> int main() { printf(Hello, World!); return 0; }</code></pre>
SQL	<pre><code class=lang-sql>SELECT FROM users WHERE age > 18;</code></pre>

Google Code Prettifyのカスタマイズ

Google Code Prettifyの表示をカスタマイズするには、CSSを用います。以下は、基本的なカスタマイズの例です。

 pre.prettyprint { background-color: f4f4f4; border: 1px solid ccc; padding: 10px; border-radius: 5px; font-size: 14px; line-height: 1.4; } .prettyprint .str { color: 080; } / 文字列 / .prettyprint .kwd { color: 008; } / キーワード / .prettyprint .com { color: 800; } / コメント / .prettyprint .typ { color: 606; } / 型 / .prettyprint .lit { color: 066; } / 文字列リテラル / .prettyprint .pun { color: 660; } / 演算子 / .prettyprint .pln { color: 000; } / 普通のテキスト / .prettyprint .tag { color: 008; } / HTMLタグ / .prettyprint .atn { color: 606; } / 属性名 / .prettyprint .atv { color: 080; } / 属性値 / 

このCSSを追加することで、コードの表示をより見やすくすることができます。

Google Code Prettifyの高度な機能

Google Code Prettifyには、以下のような高度な機能も用意されています。

• 邋遢なコードのフォーマット：邋遢なコードを自動的に整形することができます。
• カスタムテーマの作成：独自のテーマを作成し、特定の色やスタイルを適用できます。
• ランタイムでの言語検出：自動的にコードの言語を検出し、適切なシンタックスハイライトを適用します。
• 行番号の表示：コードの各行に番号を付けることができます。
• コードの折りたたみ：長いコードブロックを折りたたむことで、ページの読みやすさを向上させます。

これらの機能を活用することで、より高度なコード表示が可能になります。

よくある疑問

Google Code Prettifyとは何ですか？

Google Code Prettifyは、コードのシンタックスハイライトを行うためのJavaScriptライブラリです。このツールを使用することで、ウェブページ上のコードスニペットを読みやすく、視覚的に魅力的な形に表示することができます。特にコードを共有したり、ドキュメンテーションを作成する際に非常に役立ちます。Google Code Prettifyは様々なプログラミング言語をサポートしており、簡単に導入できるため、多くの開発者が利用しています。

Google Code Prettifyを導入する方法は？

Google Code Prettifyを導入するには、まずはJavaScriptファイルとCSSファイルをウェブページにリンクする必要があります。これらのファイルは、GoogleのCDNから直接リンクできます。次に、ハイライトしたいコードブロックにpreタグまたはcodeタグを使用し、クラス属性にprettyprintを追加します。これにより、ページが読み込まれたときにコードが自動的にシンタックスハイライトされます。詳しくは公式ドキュメントを参照してください。

Google Code Prettifyはどのプログラミング言語をサポートしていますか？

Google Code Prettifyは、幅広いプログラミング言語をサポートしています。主なサポート対象には、JavaScript, Python, Ruby, HTML, CSS, XML, Java, C, C++, C, PHP, SQL, Bash, Perl, Go, Rust, Swiftなどが含まれます。これらの言語の構文を認識し、適切にハイライトすることで、コードの可読性を大幅に向上させることができます。

Google Code Prettifyでカスタマイズはできますか？

はい、Google Code Prettifyは非常にカスタマイズ可能です。デフォルトのスタイルを変更したり、新しい言語やキーワードを追加することができます。カスタムスタイルシートを作成することで、文字色、背景色、フォントサイズ、フォントファミリーなどを自由に設定できます。また、特定の言語や構文要素に対して異なるスタイルを適用することも可能です。これらの設定は、CSSファイルに直接記述することで実現できます。