HTML
code CSS Google Code Prettify HTML pre prettyprint Web アスキーアート

preとcodeとソースコードとエスケープ処理とWordPressとGoogle Code Prettifyに加えてアスキーアートも【HTML】

2020.09.02

preとcodeとエスケープ処理の概要

注意 ※バージョンや環境によっては正常に動作しない可能性があります。

ブログにソースコードを掲載する際の、ハイライト表示などを調べた時に学んだことのまとめです。

良く使うHTMLタグのpreとcode、ソースコードを掲載する際に重要なエスケープ処理について言及しています。

また、便利なツールのGoogle Code Prettifyについても少しメモしておきます。

preとスタイルシートを併用することで、ブログにアスキーアートを意図通りに表示しやすくなります。

<pre></pre>タグについて

基本的に<pre></pre>で囲むと、スペースや改行等を、入力したそのままの形でブラウザに表示してくれます。

ソースコードの掲載によく使用されます。

アスキーアートの表示にも利用されます。

ソースコードを囲むときは<pre><code></code></pre>を使う、といろんな所で良く見ますが、preの目的はあくまでスペースや改行などをそのまま表示することです。

<pre>
</pre>

上のボックスは、preとcodeで囲んで<pre></pre>を囲んでいます。

実際は下のようにエスケープ処理をして書いています。

<pre><code>&lt;pre&gt;
&lt;/pre&gt;
</code></pre>

<code></code>タグについて

<code></code>はソースコードを表すタグです。このタグ内に、htmlやcssの記述を書くことで、ソースコードを記述していることを伝えます。

codeをpreで囲むのは、ソースコード自体が改行やスペースが入っていないと非常に見づらいからでして、そのままの形で表示するために、この二つのタグを併用することが多いのです。

Google Code Prettifyを使うと、preにクラス指定をするので、あんまり出番のないタグだったりします。

Google Code Prettifyの公式のgithubでも、preかcodeにクラスをつける、という書き方でした。

Google Code Prettifyでpreとcodeを併用すると、実際に整形されて出力されるコードが変な形になります。

エスケープ処理

「<」や「>」のような記号は、htmlのタグを囲むのに使っている記号でもあります。これをhtmlファイルの中でそのまま書いてしまうと、タグとして処理されてしまうので、ブラウザに表示することができません。

その際に必要になるのが「エスケープ処理」です。

直接書けないので、代替えで別の書き方をします。

「<」は「&lt;」、「>」は「&gt;」と書きます。

このページで「<pre></pre>」と表記する場合には、「&lt;pre&gt;&lt;/pre&gt;」とファイル内には記載されています。

今回は単純に表示という話でエスケープ処理をしていますが、コメント欄など外部からの入力が可能な機能には、自動でエスケープ処理されるように対策するのが普通です。

外部からコードを埋め込もうとしても、文字列として表示だけする、という形ですね。エスケープ処理はそういった場合にも使われます。

実際の表示

<pre>
</pre>

htmlファイル内での書き方

<pre><code>&lt;pre&gt;
&lt;/pre&gt;
</code></pre>

WordPressのpreとcode

WordPressでのpreタグ使用は少し注意が必要です。

旧エディターで書く場合、基本はタグの通りに動きます。デザインはテーマによって違いますが、基本はpreで囲むと背景が変わったり枠線がついたりすることが多いですね。

旧エディターでは普通にコードを書くだけですが、「Gutenberg（グーテンベルグ）」には「整形済みテキスト」というものが用意されていて、この動作には自動でのエスケープ処理が追加されています(WordPress 5.5で確認)

「整形済みテキスト」ブロック内に記述したものは「pre」で囲まれるのですが、特殊文字が自動でエスケープ処理されます。

preは基本的には整形するだけなので、pre内にhtmlコードを書くことは普通は可能なのですが、このブロック内に書くと、エスケープ処理がされてしまい、実際に動作させたいHTMLタグではなく、文字列として処理されてしまいます。（バージョン5.5の時点）

codeタグを使う場合は、整形済みテキストではなく「コード」ブロックを選ぶと自動でcodeタグが入ります。

いくつかのテーマで試しましたが、大体のテーマは旧エディターでpreタグを使えば自動のエスケープ処理はきかないので、旧エディタで使う場合は問題ないことが多いです。google-code-prettifyをプラグイン無しで使いたい場合も、旧エディターで自分で書いた方が楽です。

中には旧エディターで書いてもpreに自動でエスケープ処理がされるものもあります。有料のテーマなどの購入を検討する場合は、更新履歴などをきちんと確認しておくのが良いでしょう。

WordPressとGoogle Code Prettify

このサイトではソースコードの表示にGoogle Code Prettifyを使っています。

Google Code Prettifyはpreタグだけ、もしくはcodeタグだけで機能します。各タグにクラスを追加する形で使用できます。

ただ、codeタグだけで使おうとするとcssが適用されないスキンがあったりするので、そのあたりは試しながら、といった感じでしょうか。自分が探した限りでは、preタグのみで囲う使い方をしている人が多かったです。

<div class="information-box">補足情報1</div>
<div class="question-box">補足情報2</div>
<div class="alert-box">注意喚起文</div>
<div class="memo-box">メモボックス</div>
<div class="comment-box">コメントボックス</div>

上のコードは、preタグのみでコードを囲って、そのpreにclass「pretteyprint」を適用しています。また、スクリプトとして、以下を読み込んでいます。

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

「skin=sunburst」は用意されているスキンの1つを反映するためのパラメータです。つけない場合はデフォルトのデザインが反映されます。

「lang=css」は、cssもハイライト表示をしたいよ、というのを明示しています。基本的には自動で言語を判定して、ハイライト表示してくれるのですが、cssはどうも明示しないとうまく表示されないのです。バグですかね。cssの場合は、スクリプトの読み込みで明示し、設定するコードにもlang-cssをクラス指定することで、ハイライト表示されます。

実際の記述は以下です。

<pre class="prettyprint">&lt;div class=&quot;information-box&quot;&gt;補足情報1&lt;/div&gt;
&lt;div class=&quot;question-box&quot;&gt;補足情報2&lt;/div&gt;
&lt;div class=&quot;alert-box&quot;&gt;注意喚起文&lt;/div&gt;
&lt;div class=&quot;memo-box&quot;&gt;メモボックス&lt;/div&gt;
&lt;div class=&quot;comment-box&quot;&gt;コメントボックス&lt;/div&gt;</pre>

Google Code PrettifyはGitHubにコードが全部置いてあるので、ここを見て色々設定すると良いでしょう。

ワードプレスのテーマによっては、デフォルトでソースコードのハイライターを導入していたりするので、そういったテーマを使用するのも一つの手です。プラグインもあります。

ワードプレスでアスキーアートとpre

以下、ワードプレス上でアスキーアートを貼るとどうなるかの例です。

インターネット老人会所属なので、とても古いアスキーアートで例をあげます。

アスキーアートをそのままHTMLファイルに書いている例

　　　　　　　 ＿＿＿_
　 　 　 　 ／　　　　　＼
　　　　 ／　 　⌒　　⌒ ＼　　 何言ってんだこいつ
　　　／　 　 （●） 　（●） ＼
　 　 |　 　､”　ﾞ)（__人__）”　　）　　　 _＿＿＿＿＿＿＿＿＿_
　　　＼　 　 　 ｡｀ ⌒ﾟ:j´　,／　jﾞ~~| | |　　　　　　　　　　　　　|
＿＿／　　　　　　　　　　＼　 |_＿| | |　　　　　　　　　　　　　|
| |　/　　 ,　 　 　 　 　 　 　 ＼ｎ||　 | |　　　　　　　　　　　　　|
| | /　　 /　　　　　　　　　r.　 （ こ） | |　　　　　　　　　　　　　|
| | |　⌒ ーnｎｎ 　 　 　 　|＼ (⊆ｿ .|_|_＿＿＿＿_＿＿＿＿_|
￣ ＼＿_､(“二）￣￣￣￣￣ｌ二二ｌ二二　 ＿|_|＿_|＿

ただ貼り付けるだけで意図通りにAAが表示されることはほぼ無いと思います。

使っているワードプレステーマで設定しているフォント、フォントサイズ、行の高さで表示されます。

ワードプレスの記事はデフォルトで、勝手にPタグとbrタグが入ってしまう仕様になっています。

そのため、自動で全体がpタグで囲まれて、行が変わる部分にも自動でbrタグが挿入されています。またスペースも反映されているようです。

そういった機能が無ければ、一行の文字列として表示され、スペースの表示もうまくいかない可能性があります。

divで囲ってフォントやフォントサイズを指定している形

　　　　　　　 ＿＿＿_
　 　 　 　 ／　　　　　＼
　　　　 ／　 　⌒　　⌒ ＼　　 何言ってんだこいつ
　　　／　 　 （●） 　（●） ＼
　 　 |　 　､"　ﾞ)（__人__）"　　）　　　 _＿＿＿＿＿＿＿＿＿_
　　　＼　 　 　 ｡｀ ⌒ﾟ:j´　,／　jﾞ~~| | |　　　　　　　　　　　　　|
＿＿／　　　　　　　　　　＼　 |_＿| | |　　　　　　　　　　　　　|
| |　/　　 ,　 　 　 　 　 　 　 ＼ｎ||　 | |　　　　　　　　　　　　　|
| | /　　 /　　　　　　　　　r.　 （ こ） | |　　　　　　　　　　　　　|
| | |　⌒ ーnｎｎ 　 　 　 　|＼ (⊆ｿ .|_|_＿＿＿＿_＿＿＿＿_|
￣ ＼＿_､("二）￣￣￣￣￣ｌ二二ｌ二二　 ＿|_|＿_|＿

divタグで括り、そのdivタグに以下のスタイルシートを反映しています。

ワードプレスの自動整形で、アスキーアート全体はpタグで囲まれ、改行ごとにbrが入っています。

自動整形がきいているので、環境によってはきちんと表示されますが、同じ機能がない場合は、HTMLファイルにこれと同じ書き方をしても、上手く表示されないことが多いです。

ワードプレスの自動整形と、以下のスタイルシートが上手くかみ合っていると、意図した表示になります。

ただ、表示領域の幅が狭くなると表示が崩れます。画面幅の狭いスマートフォンなどで見ると、自動整形が利いたとしても、上手く表示されないはずです。

ここはoverflowでautoを設定すると、横スクロールバーを出すことができます。

.entry-content .ascii-art {
    font-family: 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    font-size: 16px;
    line-height: 18px;
}

preで囲っただけ



　　　　　　　 ＿＿＿_
　 　 　 　 ／　　　　　＼
　　　　 ／　 　⌒　　⌒ ＼　　 何言ってんだこいつ
　　　／　 　 （●） 　（●） ＼
　 　 |　 　､"　ﾞ)（__人__）"　　）　　　 _＿＿＿＿＿＿＿＿＿_
　　　＼　 　 　 ｡｀ ⌒ﾟ:j´　,／　jﾞ~~| | |　　　　　　　　　　　　　|
＿＿／　　　　　　　　　　＼　 |_＿| | |　　　　　　　　　　　　　|
| |　/　　 ,　 　 　 　 　 　 　 ＼ｎ||　 | |　　　　　　　　　　　　　|
| | /　　 /　　　　　　　　　r.　 （ こ） | |　　　　　　　　　　　　　|
| | |　⌒ ーnｎｎ 　 　 　 　|＼ (⊆ｿ .|_|_＿＿＿＿_＿＿＿＿_|
￣ ＼＿_､("二）￣￣￣￣￣ｌ二二ｌ二二　 ＿|_|＿_|＿

preタグで囲っただけの表示です。

preで囲ったため、ワードプレスの自動整形は入っていません。pタグやbrタグは入っていないのですが、preタグの機能のおかげで、スペースや改行がそのまま生きています。

上下の改行がわかりやすいと思いますが、divで囲った場合も上下二行の改行が入っていますが、divでは反映されず、preでは反映されています。

個別のスタイルシート設定はしていないので、ワードプレステーマのデフォルトのフォント等で表示されています。表示は意図した形にはなりません。

使用しているテーマは、preタグに背景色と枠線が設定されているので、それが反映されてグレー背景とグレー枠線が表示されています。

overflow autoが設定されているので、幅が狭くなっても表示が崩れず、横スクロールバーがでます。

preで囲ってスタイルシート設定



　　　　　　　 ＿＿＿_
　 　 　 　 ／　　　　　＼
　　　　 ／　 　⌒　　⌒ ＼　　 何言ってんだこいつ
　　　／　 　 （●） 　（●） ＼
　 　 |　 　､"　ﾞ)（__人__）"　　）　　　 _＿＿＿＿＿＿＿＿＿_
　　　＼　 　 　 ｡｀ ⌒ﾟ:j´　,／　jﾞ~~| | |　　　　　　　　　　　　　|
＿＿／　　　　　　　　　　＼　 |_＿| | |　　　　　　　　　　　　　|
| |　/　　 ,　 　 　 　 　 　 　 ＼ｎ||　 | |　　　　　　　　　　　　　|
| | /　　 /　　　　　　　　　r.　 （ こ） | |　　　　　　　　　　　　　|
| | |　⌒ ーnｎｎ 　 　 　 　|＼ (⊆ｿ .|_|_＿＿＿＿_＿＿＿＿_|
￣ ＼＿_､("二）￣￣￣￣￣ｌ二二ｌ二二　 ＿|_|＿_|＿

preタグで囲って、preにクラス指定で、先ほどのスタイルシートを反映しています。

preで改行やスペースをそのまま残し、ワードプレスの自動整形を無効化し、スタイルシートの設定でフォントを設定、フォントサイズと行の高さを調整して、表示しています。

アスキーアートを使う際は、HTMLの特殊文字を使用することもあるので、一応エスケープ処理もしています。

幅が狭くなっても、overflowが設定されているので、横スクロールバーが表示され、崩れることはありません。きちんとレスポンシブ対応をするのであれば、Viewport と Mediaで細かくサイズを調整するぐらいでしょうかね。

実際のコードは以下です。

実際の入力

<pre class="ascii-art ">


　　　　　　　 ＿＿＿_
　 　 　 　 ／　　　　　＼
　　　　 ／　 　⌒　　⌒ ＼　　 何言ってんだこいつ
　　　／　 　 （●） 　（●） ＼
　 　 |　 　､&quot;　ﾞ)（__人__）&quot;　　）　　　 _＿＿＿＿＿＿＿＿＿_
　　　＼　 　 　 ｡｀ ⌒ﾟ:j´　,／　jﾞ~~| | |　　　　　　　　　　　　　|
＿＿／　　　　　　　　　　＼　 |_＿| | |　　　　　　　　　　　　　|
| |　/　　 ,　 　 　 　 　 　 　 ＼ｎ||　 | |　　　　　　　　　　　　　|
| | /　　 /　　　　　　　　　r.　 （ こ） | |　　　　　　　　　　　　　|
| | |　⌒ ーnｎｎ 　 　 　 　|＼ (⊆ｿ .|_|_＿＿＿＿_＿＿＿＿_|
￣ ＼＿_､(&quot;二）￣￣￣￣￣ｌ二二ｌ二二　 ＿|_|＿_|＿


</pre>

.entry-content .ascii-art {
    font-family: 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    font-size: 16px;
    line-height: 18px;
}

フォントに関してはモナーフォントなどを設定しても良いかと思います。

調べていた時に、Saitamaarというフォントがまとめサイトで使われていたので、そのあたりのフォントを使用している人用に設定をしてもよいかもですね。

基本はMS P ゴシックを設定しておけば、かなりの範囲をカバーできるかなと思います。MSPゴシックは基本windowsで、macとかunixだと…というのがあるので、何がしか別のフォントを設定しておくほうがよいのかな、とは思いますが。

以下のような記事もありました。

AA表示用の軽量なフォント(43KB)を作った - Qiita
どうも@scrpgilです。AAHubというまとめzipビューワーやAA箱を作っているAAエンジニアです。さて私は基本Webサービスを作ることが多いんですが、そこで問題になるのがAA対応の日本語…
qiita.com

アスキーアートってまだまだ愛好家の中で残っていきそうな感じたな～と思います。

まとめ

この記事は、ワードプレスで手っ取りばやくソースコードの表示を実現する方法はないかな～と思って調べた一連の事をメモした備忘録です。

自分が一番好きな見た目にできたのがGoogle Code Prettifyでした。なのでGoogle Code Prettifyを採用しています。

ソースコードとは少し違いますが、cocoonというワードプレステーマは、各記事ごとに追加でスタイルシートとJavaScriptを記述できるのが便利ですね。動作を載せて、そのソースコードをそのまま載せる、というのがやりやすくて、いいテーマだな～と思います。

ワードプレスはテーマによってはこのpreとcodeが予測できない挙動をする時があるので、良いテーマがあって良かったです。

ソースコードをワードプレスで記載する際の何かの参考になればと思います。

アスキーアートに関しても、preタグを使うと便利なので記載しました。ただ、アスキーアートに関しては環境に大きく左右され、万能な設定というのはなかなか難しいのかな～と思います。

タイトルとURLをコピーしました