なべのみドットコム

ソースコードを綺麗に表示する方法

「Code Prettify」の導入

記事キーワード
【, , , 】

掲載日：2019年6月18日

はじめに

今回はソースコードを綺麗に表示する方法についてご紹介します。

プログラマーの皆さまの中には普段は表に現れないソースコードについての、その書き方を紹介したい時ってありますよね。今回はその方法に関する記事です。

「Code Prettify」導入前

まずはじめに「Code Prettify」というサービスを使わずにソースコードを下に明記してみます。今回はソースコードの例としてHTMLの基本ソースを下に書いてみます。

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>ここにタイトルを入力</title>
    <!-- コメントアウト -->
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h2>見出し</h2>
    <p>ここには文章が入ります。</p>
  </body>
</html>

以上のような白黒のソースコード表記では、タグやコメントアウトはどれなのかが直感的に把握できません。なので「Code Prettify」を導入してタグ、コメントアウトやテキストをそれぞれ色付けしていきましょう。更に背景を黒にすることもできます。

Code-Prettify導入後

そして実際に「Code Prettify」を導入するとどうなるかご紹介します。

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>ここにタイトルを入力</title>
    <!-- コメントアウト -->
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h2>見出し</h2>
    <p>ここには文章が入ります。</p>
  </body>
</html>

上記のソースコードの方が見やすいですね。それでは実際に「Code Prettify」の導入方法についてお話ししていきましょう。

・・・といきたいところですが、「Code Prettify」を導入する前に知っておくべきHTMLタグが存在しますのでご説明します。

導入前に知っておくべきタグ

まずHTMLのタグには”<code>”タグと”<pre>”タグが存在することをご存知ですか？これらはソースコードを明記するために用意されたタグです。

この<pre>タグと<code>タグに対して文字色を付けるのが「Code Prettify」です。なのでこれらタグをまずは把握しましょう。

これらのタグの概要は以下の通りです。

  • <pre>タグ：整形済みテキストであることを表す
  • <code>タグ：ソースコードであることを表す

<pre>タグは整形済みテキストを表すタグで、機能としてソースコード上の空白や改行が反映された状態で表示してくれます。

<code>タグは、タグ内に書かれたテキストがソースコードであることを表し、当タグの中に実際のソースコードを書くことになります。

使い方としては<pre>タグの中に<code>タグを入れてその中にソースコードを書く、というやり方です。まずはこれらタグの概要と使い方を把握しておきましょう。これらタグの使い方は以下の通りです。

<pre>
  <code>
    <!-- ↓ここに表示したいソースコードを記述↓ -->
    <!DOCTYPE html>
    <html lang="ja" dir="ltr">
      <head>
        <meta charset="utf-8">
        <title>ここにタイトルを入力</title>
        <!-- コメントアウト -->
        <link rel="stylesheet" href="style.css">
      </head>
      <body>
        <h2>見出し</h2>
        <p>ここには文章が入ります。</p>
      </body>
    </html>
  <!-- ↑ここまで表示したいソースコードを記述↑ --> 
  </code>
</pre>

それでは本題の「Code Prettify」の導入方法をご紹介します。

Code Prettifyの導入方法

特徴

「Code Prettify」の大きな特徴は以下の通りです。

  • ソースコードの文字色を変更
  • ソースコードの左側に行数を表示
  • 背景色の変更（偶数行のみ、全体など）

それでは実際に導入するわけですが、導入方法は2通りあります。

導入方法の種類

  1. インターネット上からそのまま導入
  2. インターネットから必要データをダウンロードして導入

1.のサービス提供方式は”CDN”と言われておりますが、こういったCDN形式を採用しているサービスは他にもたくさんありますので、それぞれの特徴はまた別の記事でお話しするとして、今回は2.のダウンロードして導入する方法をご紹介します。

ちなみにダウンロードして導入する方が、文字の色や背景色などをカスタマイズすることが容易になります。

必要データをダウンロード

まずは必要データをダウンロードしましょう。どこからダウンロードをするかと言いますと、以下のURLになります。（外部リンク）

Google – GitHub / CodePrettify

上記URLはGoogleが提供している「CodePrettify」のGitHubページです。

github-codeprettify

ページを開いたら、右上に”Clone or Download”という緑のボタンがありますのでクリックしましょう。そうするとタグが開かれ、一番下に2つ項目が現れます。「Open in Desktop」「Download ZIP」のうち、「Download ZIP」を選択しましょう。圧縮フォルダなので解凍もしくは展開することも忘れないでくださいね。

これで必要データがダウンロードされました。

このファイル内にはCode Prettifyのファイルがたくさん入っていますが、そのうち今回必要になるのは、srcフォルダ内の「prettify.css」というファイルです。この中に文字色や背景色を指示するためのセレクタが記述されてますので、あとはこれらプロパティ値を編集するだけです。

必要データは人それぞれでしっかり管理できる場所に保存しておきましょう。

次に実際に編集する箇所を見ていきましょう。

prettify.cssの編集

prettify.cssを開くと21行目以降に下記のコードが見つかるはずです。

/* SPAN elements with the classes below are added by prettyprint. */
.pln { color: #000 }  /* plain text */

@media screen {
  .str { color: #080 }  /* string content */
  .kwd { color: #008 }  /* a keyword */
  .com { color: #800 }  /* a comment */
  .typ { color: #606 }  /* a type name */
  .lit { color: #066 }  /* a literal value */
  /* punctuation, lisp open bracket, lisp close bracket */
  .pun, .opn, .clo { color: #660 }
  .tag { color: #008 }  /* a markup tag name */
  .atn { color: #606 }  /* a markup attribute name */
  .atv { color: #080 }  /* a markup attribute value */
  .dec, .var { color: #606 }  /* a declaration; a variable name */
  .fun { color: red }  /* a function name */
}

上記プロパティが指すHTMLタグのクラスを、あとはブラウザの開発者ツールでコード閲覧して探すと見つかるはずです。

例えば”.tagはHTMLタグを指す”、などです。

最後に結果を反映してみる

prettify.cssを編集した後は、いよいよ編集結果をサイト上に反映してみましょう！

一番最初にお話しした「pre」「code」タグは覚えていますよね？このうち、「pre」タグにclass属性で”prettyprint”と”linenums”の2つの値を付与します。この操作だけでサイト上に文字が綺麗に色分けされ、かつ左側に行数が表示されるのです。いかがでしょう？

↓実際のコード↓

<pre class="prettyprint">
  <code>
    <!-- ↓ここに表示したいソースコードを記述↓ -->
    <!DOCTYPE html>
    <html lang="ja" dir="ltr">
      <head>
        <meta charset="utf-8">
        <title>ここにタイトルを入力</title>
        <!-- コメントアウト -->
        <link rel="stylesheet" href="style.css">
      </head>
      <body>
        <h2>見出し</h2>
        <p>ここには文章が入ります。</p>
      </body>
    </html>
  <!-- ↑ここまで表示したいソースコードを記述↑ --> 
  </code>
</pre>

↓サイトに表示されるコード↓

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>ここにタイトルを入力</title>
    <!-- コメントアウト -->
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h2>見出し</h2>
    <p>ここには文章が入ります。</p>
  </body>
</html>

コードは綺麗に表示され見間違える結果になりました。

あれ？行数が5の倍数しか見えないぞ・・・？

もしかしてこういった現象になっている方もおりますよね？

ではさらに見やすくするためすべての行数も表示してみましょう。先程と同様に「prettify.css」の中に関連する既存の記述があります。

よく見ると、実は5の倍数を除く1~4、6~9・・・の行数には list-style: none;の指示が与えられているのです。これでは5の倍数だけが表示されるはずですよね。今度はこれらを有効にしましょう。要するにnoneをコメントアウトする等で良いという事ですね。それではどうなるか再び見てみてください。上記のような表示結果に今度こそなるはずです。ここら辺からはもう個人の好みになってきます。

終わりに

行数があるだけでとても見やすいコードになるのでぜひ導入することをオススメします。

編集してみた結果はいかがでしょうか。見た目が変わりましたよね？

あとはご自身でお好みの背景色や文字色に編集していきましょう！！

ちなみに私の場合はテキストエディタ風にしたかったので、

  • 全体の背景色に、黒色
  • 偶数行の背景色に、半透明の薄い白色
  • 行数の文字色に、白色
  • タグの文字色に、青
  • 文書型宣言の文字色に、桃色
  • 属性の文字色に、桃色
  • クラス名の文字色に、緑色
  • コメントアウトの文字色に、灰色
  • テキストの文字色に、白色

としました。まさに最初に見ていただいた見た目です。この方がテキストエディタ風ですよね。

おまけ豆知識を一つ

ちなみに豆知識ですが、ここまでのソースコードを綺麗に表示させる行為の事を、「シンタックスハイライト」というので覚えておきましょう。

ということで今回はCode Prettifyの導入方法と、導入前後での見た目の変化についてご紹介しました。

導入することでソースコードの見た目がガラッと変化したことは言うまでもないでしょう。

このように、他にも私と同じような独学プログラマーの方や、初心者及び駆け出しプログラマー向けの記事を書いていく予定なのでよろしくお願いいたします。

以上、なべのみでした。

それではまた今度！！