技術系の記事を書いていると記事内にソースコードを埋め込みたい状況に直面します。
何も考えずに直接打ち込んでしまうとエスケープシーケンスなどの特殊文字がうまく表示させられなかったりhtmlとして誤認してしまいます。
今回は記事内にソースコードを埋め込む方法を紹介していきます。
埋め込みの必要性
私たちが見ているインターネット上のあらゆるページはhtmlというコーディング言語で書かれています。
世の中には様々なプログラミング言語があり、言語ごとに書き方やルールは違うものの、構成を見てみると全てアルファベットと数字と記号の羅列です。
htmlのソースコードを紹介するのはもちろん、html以外の言語でもhtmlと類似している部分があると記事内に表示させるのに不都合が生じます。
今、私は記事内の文字を赤色にするhtmlのコード
「 <font color = "FF0000"> 任意の文字列 </font> 」
を読者に紹介したいとします。
これを直接記事に書き込んでしまうとどんな事が起きるかというと、
このように読者に見せたいコード(ただの文字列)がhtml(プログラム)として認識されてしまうのです。
そのためソースコードを解説や紹介のため本文中に表示させたい場合は、
表示させる為の "場所" を用意する必要があり、その方法は大きく3つに分けられます。
1. htmlのタグを使う
2. 外部ウェブサービスを使う
3. プラグインを導入する
これからこの3つを詳しく紹介していきます。
1. htmlのタグを使う
まずhtmlとは、webサイトの構造を形成するために使用されるコーディング言語です。
コーディング言語と呼ばれるからにはwebサイトの外観(見た目)を整える事ができます。
htmlではタグと呼ばれるマークアップのための目印を使用し、
<○○>(開始タグ)～</○○>(終了タグ) という形を作りその間(〜の部分)に命令を書き実行します。
htmlについても後日詳しく記事を書きたいと思っているのですが、今回は簡単に説明します。
「webサイト上にソースコードを表示させる」という行動は大まかな括りで考えると「webサイトの外観を整える」に当たりますので、htmlにそのような命令のためのタグが存在します。
それが "preタグ" と "codeタグ" です。
これらは若干違う命令を持っており、どちらか一つでも問題はないが合わせて使うとより効果的です。
<pre> …… 半角スペースや改行をそのまま表示する。(テキストとして表示される)
<code> …… プログラムなどのコードであることを示す。(改行やスペースは無視される)
htmlのタグは全て半角で入力します。
preタグのみ、codeタグのみ、preタグ+codeタグ、の3種類を
c言語のHello,World!を例にご紹介します。
preタグ
【筆者目線】
↓↓↓
【読者目線】
#include
int main(void){
printf("Hello, world!\n");
return 0;
}
ぱっとみる感じこれで問題ないかもしれませんが、これ実はテキストとして認識された状態なのです。
次でcodeタグと比較してみますが、preタグだけで違和感無い方はこれだけでもいいかもしれません。
codeタグ
【筆者目線】
↓↓↓
【読者目線】
#include
int main(void){
printf("Hello, world!\n");
return 0;
}
codeタグでは行先頭のスペースやインデントが無視され、文字間のスペースも半角1マス分のみで2マス以上は自動的に1マスの補正されてしまいます。
しかしこれはpreタグとは違い、プログラムコードと認識しているためなんとなく引き締まった感じの文字になっている気がします。
しかしやはりインデントが省略されるのはとても大きなデメリットで、codeタグ単独で使用することは無いかと思います。
preタグ+codeタグ
【筆者目線】
↓↓↓
【読者目線】
#include
int main(void){
printf("Hello, world!\n");
return 0;
}これでやっとインデントやスペースが無視されず、引き締まったメリハリのあるプログラムコードを書く事が出来ました。
2. 外部webサービスを使う
ソースコードを埋め込むための外部webサービスは沢山ありますが、今回は最もポピュラーであろう GitHub の「Gist」というサービスをご紹介します。
GistでC言語のHello,World!を埋め込むとこのような感じになります。
外部サービスを使うとサーバー自体にメディアを保存したり、Wordpressにプラグインを入れる訳では無いのでWordpressが重くならないことや、同じコードをあちこちに使いまわせる事がメリットに挙げられますが、
会員登録が必要であったり、デザインなどのカスタマイズが出来ないなどのデメリットもあります。
私はGistのデザインかなりいいなと思いますし、技術系・解説系ブログでGistでの埋め込みを頻繁に見かけます。
それではGistの使い方を説明していきます。
まずはデメリットの1つ目ですが、GitHubのアカウントを作成します。
こちらからGitHubのホームページに飛び、
Username,Email,Passwordを入力します。
Usernameは後から変更もできますが、既に使われているものは使用できません。
「Sing up for GitHub」を押し次の画面へ進みます。
ここでは料金プランを選べるので、無料プランを選択しましょう。
次のページでは簡単なアンケートがあります。
なんのためにGitHubを使うのか、職業は何か、等ですがスキップもできます。
Submitすればアカウント作成自体は完了です。
サービスを利用するには登録に用いたメールアドレスに送付された確認用メールのリンクを開く必要があるので、メールを確認しましょう。
メールを確認できたらGitHubのログインページからログインをし、右上メニューバーの「New Gist」からGitHubのサービス "Gist" へと移ります。
こちらがGistの画面になります。
①にプログラムコードのタイトル
②にプログラムコードのファイル名
③にプログラムコードの本文
を入力していきます。
中央右側にはインデントの設定ができるプルダウンメニューがあります。
ちなみに②のファイル名ですが、プログラムコードの言語の拡張子を必ずつけましょう。
拡張子をつける事でその言語特有の変数などが自動的に色分けされます。
以下は例としてc言語のコードにhtmlの拡張子でファイル名を付けたものです。
先ほどc言語の拡張子では色分けされていた物が全て黒字に戻ってしまっています。
入力が完了したら右下の「Create public gist」を押しましょう。
こちらが生成されたGistです。
青枠部分のタイトル、ファイル名、プログラムコードを確認しましょう。
先ほどより詳しくc言語の関数名が色分けされていました。
確認が完了したら、
①がwebサイトで公開するための設定「Embed」が選択されているか確認の上、②のボタンを押しましょう。
すぐ左隣のURLがコピーされるので、自分のブログの埋め込みたい箇所に貼り付ければ完成です。
3. プラグインを導入する
WordPressにはプログラムのコードを埋め込むためのプラグインが沢山あります。
プラグインならば最も最適化された効率的な方法でコードを埋め込む事ができます。
htmlのタグは簡単ですが見た目に問題がありました。
外部サービスは見た目が良いのですが手間がかかりました。
2つのメリットを併せたのがプラグインです。
一度Wordpressにインストールしてしまえば、記事を書いてる最中に別のタブで別のサイトを開く必要なく、本文中にhtmlタグと同じ感覚で、プラグインの特殊タグを使うだけで見た目の良いプログラムコードを記事内に埋め込む事ができるのです。
ご紹介するプラグインは数ある中で、
見た目や使いやすさの気に入った "Crayon Syntax Highlighter" です。
この "Crayon Syntax Highlighter" の導入は別記事にまとめるので、そちらをご覧ください。
ここまでかなり長い記事になってしまった上に、プラグインの話だけでここまでと同じくらいの長さの記事になってしまうので別けました。
つい最近までは "SyntaxHighlighter Evolved" という同じシンタックスハイライトのプラグインを使っていたのですが、 "Crayon Syntax Highlighter" の方がカスタマイズ性に富んでおり乗り換えました。
まとめ
今回は技術系ブログや解説系ブログで用いる紹介用プログラムコードを美しく記事に表示させる方法をご紹介しました。
大きく別けて3つの方法を説明しましたが、細かく見ていくと、例えばGitHub以外の外部サービスであったり別のプラグインであったり、本当に様々な方法があります。
それぞれ見た目や使い勝手が違っているので自分に会う方法で埋め込むのが良いでしょう。
とても長い記事になってしまいましたがありがとうございました。
コード埋め込みの為のプラグインについても別記事にまとめてあるので、こちらもよろしくお願いいたします。
