nobee

update:　1726view

ソースコードの装飾は便利すぎる「code-prettify」が使えます！

ソースコードの装飾は便利すぎる「code-prettify」が使えます！

ソースコードの装飾

htmlやcss、javascript、php、C言語などなど。
ソースコードの公開や記述の説明をするときに装飾があるのとないのとでは歴然！です。

短いステップ数というか行数であれば装飾がなくても読めますが長いとわかりづらくなってきます。

見やすさ。読みやすさ。大事です。そして書いてる方もわかりやすい！

こんな感じ

そこで使ったのがGoogleの無料ライブラリ「code-prettify」です。
当サイトでも初導入♪

めっちゃ便利なんですが、実は1点使い方をミスっていて...全然そこに気付けず、なんで？どうしてちゃんと表示されないの？？となったので、ミスった点も含めて使い方を説明いたします。

code-prettifyの使い方

ソースコードを判別して装飾するcode-prettifyは２通りの設置方法があります。

オートローダはscriptタグを埋め込むだけで使えますが、カスタマイズができないので個人的にはダウンロードがオススメです。
ダウンロードといっても、たったの2ファイルです。しかも軽量です！

ダウンロード版の使い方

下記URLの「prettify-small.zip」をダウンロードします。

ダウンロード⇒https://github.com/googlearchive/code-prettify/tree/master/distrib

ダウンロードしてみます

クリックすると下記画面になるので「View raw」をクリックでzipファイルがダウンロードできます。

「View raw」をクリック

zipファイルを展開し、以下のファイルを使います。

・google-code-prettify/prettify.css
・google-code-prettify/prettify.js

使用したいページ内の<head>タグ内にcssファイルとjsファイルを読み込ませます。

<link href="/css/prettify/prettify.css" rel="stylesheet" media="all">
<script src="/js/prettify/prettify.js"></script>

パスはディレクトリに合わせてご変更くださいね。

ファイルを読み込ませたら<body>タグ内でonloadハンドラーを使用し関数を実行させます。

<body onload="PR.prettyPrint()">

オートローダー版の使い方

こちらはめっちゃシンプルです。scriptタグにファイルを読み込むだけ！です。

<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>

ソースコードを装飾させてみよう

<pre>タグ内にソースコードを記述するだけです。

<pre class="prettyprint">
//ソースコードをここに記述します
</pre>

基本はこれだけです。とても簡単ですよね。

装飾デザインが選べます！

装飾のテーマが選べるのでサイトに合わせたテーマに変更できるんです。

テーマは下記URLから見れます。
https://raw.githack.com/google/code-prettify/master/styles/index.html

当サイトではSons-Of-Obsidianを使用しています。

こんな感じ

装飾テーマを変更したい場合はダウンロード版の場合は、ダウンロードしたzipファイルの「skins」フォルダにテーマのcssファイルがあるのでそちらを読み込ませます。

<link href="/css/sons-of-obsidian.css" rel="stylesheet" media="all">

オートローダー版は読み込み時にskinパラメーターをつけてテーマを指定します。

<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?lang=css&skin=sunburst"></script>

テーマの指定がない場合はDefaultが使用されます。

行番号を付けたいとき

各行に行番号を付けると赤枠の部分が入るということです。

こんな感じの行番号

行番を付けたいときはlinenumsクラスを付与するだけです。

<pre class="prettyprint linenums">
//ソースコードをここに記述します
</pre>

では、何を私はミスっていたかというと。

全然ソースコードの表示がされなくて...
jsファイルの読み込みが間違っていたのか？最初は原因がわからなかったんです...

原因は、javascriptの記述を説明していたので<script>タグを<pre>タグ内に入れていたんです。そう、特殊文字の変換が必要だったんです。

特殊文字「<」「>」「&」を「&lt;」「&gt;」「&amp;」に変換をして記述することが必要、というわけです。

特殊文字の変換

&
&amp;
<
&lt;
>
&gt;
"
&quot;
'
&apos;

ソースコードの装飾が必要なわけ

簡単に装飾ができることがわかりましたが果たして必要性はあるのかを検証してみます。
早速見比べると...

装飾されていると見やすい

ちょっとーー見づらいですかね。右側が装飾ありで左側の装飾なし、ですが。
装飾がないと目がおかしくなるほどで読む気も失せてしまいます。入ってくるものも入ってきません程！

色分けでメリハリがつくと読む気もグンと上がります！
読みやすそう！わかりやすそう！になりますもん。

記事を読んでいる時でも同じことがいえます。

文字の大きさや改行や行間、太字・赤字や下線をつけるなど装飾されてると読みやすいですもんね。

share

人気記事