ソースコードを記事中に表示させようと思ってブログの入力画面にそのまま貼り付けても
コードがそのままの状態で貼り付けられるわけなので当然コードとして認識されてしまいます。
そのため改行してしまったり、貼り付けたソース部分が丸々表示されずに空白になってしまったりして
コードがそのまま記事中に反映されることは出来ません。
ソースコードを記事中に表示させるために必要なこと
ですのでコードをそのまま表示させるためには
「これは掲載用のソースコード」であると認識をさせるための処理を行わなくてはなりません。
その必要な処理とは以下の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用に変換するのは結構手間です。
なのでそれを自動で変換してくれるサイトもいくつかあります。
私が利用しているのは以下
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>
更にこれをクリックすると以下のように右上に詳細設定のボタンが出てきますのでそれをクリックします。
詳細設定
設定編集のポップアップ画面
各項目の解説
Mode
Block-Codeが基本なのでそのまま。
言語
言語を選びます。
Theme
テーマを選びます。選んだテーマによって見た目が違います。
Show Linenumbers
行数の表示有無。チェックが入っているのでOK。
Point out Lines
強調したいところの行だけ背景を別の色に変更据える仕様。
複数行の場合は、1-3などのようにハイフンで指定していきます。
Linenumbers offset
行の頭の数字を変更します。６行目から始めたい場合は６と入力します。
以上でこの項は終了です。
この記事へのコメントはありません。