Blogger では定番かもしれない『Google Code-Prettify』。プログラムのコードをキーワードや構文などにより色分けして表示する機能 (シンタックスハイライト) を簡単に実装できます。ここでは、その Google Code-Prettify の紹介です。
This repository has been archived and is no longer maintained.
googlearchive / code-prettify (GitHub)
と、GitHub のリポジトリページに書かれているので、今後、開発／メンテナンスは行われない (したがって、新しいプログラミング言語が出てきても対応してもらえない？) …ということみたいですね。ちょっと残念…。
Google code-prettify は Auto-Loader で導入可能です。以下のような script タグで導入します。
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
Auto-Loader を使わずに、必要なファイルをダウンロードすることでも導入できるようです。
『Default』『Desert』『Sunburst』『Sons-Of-Obsidian』『Doxy』といったデザインテーマ (skin って呼んでるみたいです) があり、『Gallery of themes for code prettify』で、そのサンプルをみることができます。ちなみに、このブログでは『Doxy』を採用しています。
『Default』skin を使う場合には、上記の script タグのような記述になります。
『Desert』『Sunburst』『Sons-Of-Obsidian』『Doxy』の skin を使う場合には、それぞれ、script タグの src 属性の URL に GET パラメータ (『Getting Started』のページでは、CGI parameter だとか CGI arguments とかと呼ばれているもの) に指定することで使えるようになります。例えば『Doxy』skin を使う場合には、
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?skin=doxy"></script>
といった書き方をします。
デフォルトでは、ファイル拡張子が、"bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html", "java", "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh", "xhtml", "xml", "xsl" となっているプログラミング言語のものはサポートされています。
それ以外の『index of language handlers』にあるプログラミング言語リスト (lang-xxxx.js の形で表されるファイル群。xxxx がそのプログラミング言語のファイル拡張子になってます) のものを使用したい場合には、Auto-Loader の GET パラメータで ?lang=xxxx のように指定します。複数のプログラミング言語を指定することもできます (?lang=css&lang=ml みたいな感じ)。
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?lang=css&skin=doxy"></script>
基本的には、pre タグを記述するときに、プログラミング言語の指定をしなくても、自動的に判別するようになっているのですが、class 属性で明示的にプログラミング言語の指定をすることもできます。
class 属性で html と css を明示的に指定する場合には、
<pre class="prettyprint lang-html lang-css"> ... </pre>
のように pre タグを記述します。
行番号を振りたい場合には、pre タグの class 属性に linenums を追加します。デフォルトの style では 5 行おきに行番号が表示されます。1行ごとに行番号を表示するには style タグで css を指定します。
<style type="text/css">
/* Google-code-prettifyの行番号を1行ずつ表示する */
pre.prettyprint.linenums li{ list-style-type: decimal; }
</style>
結局のところ、
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>basic template</title>
</head>
<body>
...contents...
</body>
</html>
のように表示させたい場合には、次のようなコードを書きます。head タグ内に1行ごとに行番号を表示する css を書き、body タグ内の終わりのほうに Auto-Loader (script タグ) を記述します。
<head>
...
<style type="text/css">
/* Google-code-prettifyの行番号を1行ずつ表示する */
pre.prettyprint.linenums li{ list-style-type: decimal; }
</style>
...
</head>
<body>
...
<pre class="prettyprint lang-html linenums">
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>basic template</title>
</head>
<body>
...contents...
</body>
</html></pre>
...
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?lang=css&skin=doxy"></script>
</body>
次回、『ソースコードを表示させたい。Google Code-Prettify を使う方法。その2。』というタイトルで、Google Code-Prettify を使うときの、縦または横のスクロールバー表示について書けたらな、と思います。
[今読んでる本↓] ※アフィリエイト広告です。
 | すぐそこにあるサイバーセキュリティーの罠 [ 勝村 幸博 ] 価格:1980円 |
0 件のコメント:
コメントを投稿