Google-Code-Prettifyの使い方
ソースコードを自動で判別してハイライト表示をしてくれるGoogle-Code-Prettify(Javascriptライブラリ)の使い方です。Syntax Highlighterと比べると初心者でも簡単に設置可能です。
この記事で紹介している「googlecode.com」は2016年1月で終了します。その代わりに「GitHub」で公開されるようですのでそちらの方も参照してください。
設置方法
Google-Code-Prettifyを自分の環境に設置する方法もありますが、転送量が増えてしまいますのでHTMLのscriptタグで「googlecode.com」から読み込む方法を取り上げたいと思います。Google-Code-Prettifyを読み込ませる方法はheadタグ内で下記のようにするだけで設置完了です。
<head> <script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script> </head>
ソースコードをハイライト表示させるにはpreタグをこのようにする必要があります。
<pre class="prettyprint"> ... ここにソースコードを記述する </pre>
これだけで自動でソースコードをハイライト表示してくれます。
応用編
ソースコードに行番号を表示させてCSSのスタイルを指定するにはscriptタグに「?lang=css」を追加してpreタグのclassに「linenums lang-css」を追加します。
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?lang=css"></script>
<pre class="prettyprint linenums lang-css"> ... ここにソースコードを記述する </pre>
prettyprint
ハイライト表示をさせる(必須項目)
linenums
行番号を表示させる(任意項目)
lang-css
ハイライト表示にCSSを指定する(任意項目)
※CSSの部分をpascalなどに変更も可能
公式サイト
もっと詳細な事を知りたい方は公式サイト(英語)をご覧下さい。
このブログで使用されているハイライト表示のようにするには？
・Google-Code-PrettifyをSyntax Highlighterのようなデザインにする
・Google-Code-Prettifyのソースコピー問題の対応方法
スポンサーリンク
関連記事
公開日：2015年01月07日 最終更新日：2015年12月02日
記事NO：00083
この記事を書いた人
 | 💻 ITスキル・経験 サーバー構築からWebアプリケーション開発。IoTをはじめとする電子工作、ロボット、人工知能やスマホ/OSアプリまで分野問わず経験。 画像処理/音声処理/アニメーション、3Dゲーム、会計ソフト、PDF作成/編集、逆アセンブラ、EXE/DLLファイルの書き換えなどのアプリを公開。詳しくは自己紹介へ |
| プチモンテ代表、アーティスト名：プチモンテ | |
| 🎵 音楽制作 BGMは楽器(音源)さえあれば、何でも制作可能。歌モノは主にロック、バラード、ポップスを制作。歌詞は叙情詩、叙情的な楽曲が多い。楽曲制作は2023年12月中旬 ～ | |
オリジナル曲を始めました✨
YouTubeで各楽曲を公開しています🌈
https://www.youtube.com/@petitmonte
