ソースコードを記事中に表示させるために必要なことは？簡単にソースコード変換ができるサイトやプラグインEnlighter – Customizable Syntax Highlighterも紹介

プログラミング関連

ソースコードを記事中に表示させるために必要なことは？簡単にソースコード変換ができるサイトやプラグインEnlighter – Customizable Syntax Highlighterも紹介

プログラミング関連, 記事関連, 関連スキル
Enlighter – Customizable Syntax Highlighter, ソースコード
コメント: 0

ソースコードを記事中に表示させるために必要なこと

ですのでコードをそのまま表示させるためには
「これは掲載用のソースコード」であると認識をさせるための処理を行わなくてはなりません。

その必要な処理とは以下の3つです。
この3つの処理を行うことで、ソースコードをそのままテキストとして表示させることができます。

それぞれを説明していきます。

`code`要素

computer codeの略で、プログラムのコードであることを示すものです。
単語とか一行の短いセンテンスに<code>～</code>というふうにcode要素を使ってタグではなく文字列であることを明示します。

今表示しているcodeはテキストでは
<code>code</code>
と記述しています。

つまり
<code> ここにそのまま表示させたいソースコードを記述 </code>
と書けば良いということです。

`pre`要素

Preformatted Textの略で、
複数行に渡るテキストはpre要素をつかってソースコードを整形済みテキストとして表示させます。
この要素を使うと要素内の空白文字や改行がそのまま反映されて表示されます。

例えば以下のような感じです。

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>sample</title>
</head>
<body>
<iframe width=”560″ height=”315″ src=”sample.mp4″ frameborder=”0″ allowfullscreen></iframe>
</body>
</html>

実際にテキストの記述は以下のようになっています。

&lt;!DOCTYPE html&gt;<br />
&lt;html&gt;<br />
&lt;head&gt;<br />
&lt;meta charset=”utf-8″&gt;<br />
&lt;title&gt;sample&lt;/title&gt;<br />
&lt;/head&gt;<br />
&lt;body&gt;<br />
&lt;iframe width=”560″ height=”315″ src=”sample.mp4″ frameborder=”0″ allowfullscreen&gt;&lt;/iframe&gt;<br />
&lt;/body&gt;<br />
&lt;/html&gt;

これは二重に変換をしたためにたくさん記述があるんですが。

一般的には要素と同じで、 <pre>～</pre>で囲んだ「〜」部分に入れれば表示されます。

特殊文字のエスケープ処理

エスケープ処理とは、マークアップ言語やプログラミング言語、スクリプト言語等で文字列を扱う際に、その言語にとって特別な意味を持つ文字や記号を、別の文字列に置き換えることです。

例えばHTMLでは、タグの記述に「<」「>」という記号（文字）を使用します。これらの記号をHTMLの中で使うと、Webブラウザはこれらを「タグ記述の記号」とみなすため、文字として表示することができません。そこで「<」を表示する場合には「<」、「>」を表示する場合には「>」という文字列を、HTMLの中に記述します。Webブラウザはこれらのエスケープ文字列を、表示の際に「<」「>」に置き換えて表示します。この処理をエスケープ処理とよびます。

引用で恐縮ですが内容は理解できるかと思います。
エスケープ処理をするのは以下。

右のように入力すると左のように表示されます。

先程の記述で赤で表示した部分がエスケープ処理がなされたものです。

簡単にソースコード変換ができるもの

先程見たようにこのエスケープ変換はいちいち手作業でやると面倒くさいです。
エスケープ変換だけでなくても様々なコードをWeb用に変換するのは結構手間です。

なのでそれを自動で変換してくれるサイトもいくつかあります。

私が利用しているのは以下

WEBサイト・ブログの為のHTMLソースコード変換

HTMLで< & ” >を < & ” > にエスケープ・エンコードしてくれて。
WEB用に置換変換してくれます。
そのままコピー＆ペーストできるので非常に便利です。

元のソースを貼り付け「変換する」ボタンを押すと。

以下のように変換されます。

オプションには様々あり。
改行するかしないか、空白をそのまま表示するかしないかなど。
選べますので使い勝手は良いです。

Enlighter – Customizable Syntax Highlighterというプラグインの導入

ワードプレスを活用している方であれば
Enlighter – Customizable Syntax Highlighterというプラグインを導入すれば
簡単にかつきれいにコードが表示できます。
もっとも有名なプラグインであるCrayon Syntax Highlighterはワードプレスのバージョン 5.0.以降では利用ができなくなっていたりします。
このプラグインはその後継に当たるもので、「使用中の WordPress バージョンと互換性あり」とあります。

インストール

WordPress管理画面 →プラグイン → 新規追加
→右上の検索ボックスに「Enlighter – Customizable Syntax Highlighter」と入れて検索します。
すると以下のプラグインが出てきますのでインストールをし、インストールが完了したら「有効化」します。

Enlighterの設定

有効化すると「設定」のところに「Enlighter」と表示されます。

これをクリックして出てきた画面の上部のタブで切り替えながら設定をしていきます。

なお今回インストールしたところ

Enlighter Plugin Error: Plugin “Crayon Syntax Highlighter” is enabled – it may take over the Enlighter pre elements – highlighting will not work!
というエラー表示が出てきまして。
Enlighterプラグインエラー：プラグイン “Crayon Syntax Highlighter”が有効になっています – Enlighterのpre要素を引き継ぐかもしれません – 強調表示は機能しません！

ということです。
そのため以下説明するもののうち「テーマ」がうまく機能しないんですが。

まあいいかということにして話を先に進めます^^;

Appearance

「Appearance」のタブをクリックすると以下の画面が出てきます。

それを図のように設定します。

以下その仕組を解説します。

Theme

デフォルトで使用するテーマを決定すしますが、
記事内で何も選択しなかった場合はEnlighterになります。

Default Language

デフォルトで使用する言語を決定します。
HTMLやCSSを使うことが多い方はそれを。
PHPをよく使う方はPHPを選べばよいです。

Code-Intend

コードをコピペした時、タブのスペース分を何に置き換えるか、を設定します。
タブスペースをそのままで残したい場合、No modification (keep tabs)（変更なし）を選択。

Show Linenumbers

左側に行数を表示するかの設定。表示されていたほうが見やすいのでオンにしておきます。

Mouseover on codelines

コードにマウスオーバーするとハイライト（強調表示）されるようになります。
私の場合はエラーが出て強調表示が出来ませんが大丈夫な方はオンがおすすめ。

RawCode on dbclick

コード上でダブルクリックすると元のコードが表示されるようになりますが必要なし

。
Raw-Codebutton

コードにマウスオーバーすると右上に元コードとトグルするボタンが現れます。
必要であればオン、邪魔な場合はオフ。

Window-button (new Window)

オンにするとコードを「新しいウィンドウで開くボタン」が現れますが、必要なし。

Info-button

プラグイン制作元へのリンクがボタンで表示されまが、これも必要なし。

以上の設定で見かけはとりあえず整うので他のタブについては基本いじる必要がある方が限られるので割愛します^^;

使い方

投稿画面のビジュアルエディタにボタンが追加されていますのでそれをクリック。

するとポップアップ画面が出てきますのでそこにコードを入れます。

すると以下のように投稿画面に表示されます。

それがプレビュー画面ではこのように表示されます。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>sample</title>
  </head>
  <body>
    <video controls autoplay loop><source src="sample.mp4"></video>
  </body>
</html>

更にこれをクリックすると以下のように右上に詳細設定のボタンが出てきますのでそれをクリックします。