UEの森の一筋

Unreal Engineを深く理解していく上で学んだ知見を整理したいと考えています.

【はてなブログ】はてなブログに於けるソースコードの表記について

目的

Unreal Engineやそれに関連する話題を記述していく中で,ソースコードを美しく記述することが肝要と考えています.そのためブログ記事に於いてソースコードを正しく表示する方法を調べたので,これを備忘録として記録します.

本記事の構成

本記事は次の通りの構成になっています.

  1. 理論:はてなブログに於ける編集モード
  2. 理論:はてなブログに於けるはてな記法スーパーpre記法
  3. 実践:スーパーpre記法(シンタックスハイライト付き)を使ってみる
  4. 理論:はてなブログに於けるMarkdown記法とスーパーpre記法

接頭辞「理論:」を用いている節を理論部,接頭辞「実践:」を用いている節を実践部と呼ぶことにします(以下で一度ずつ用いています).

理論:はてなブログに於ける編集モード

はてなブログは,ウェブページ上でブログ記事を編集するためのエディターをサービスとして提供しています.はてなブログが提供しているサーバに直接HTMLファイルなどをアップロードする方法は標準では提供されていないため,通常はこのエディタを利用することになります.そこで今回の目的を達成する上で,第一に各編集モードごとにソースコードの表記をよしなに変更できるかを調べるのがよいでしょう.
このように考えると,まずは編集モードを総覧するところから始めるのがよく,実際こちらは参考記事で挙げているはてなブログ公式のヘルプに記述されています.具体的には,はてなブログのエディタ上では原理的に四つの編集モードが選択できます.

このうち,はてなブログ公式のヘルプによるとHTML記法はpro版でのみ利用できるようです.(但し,後述する通り任意のCSSjavascriptを使用できるので,ブログ記事を表示端末のブラウザ側でDOMノードを書き換える処理を走らせる方法を採れば任意の表示が実現できると思います.特別なページで特別な装飾をしたい場合などはこの手法が有効かもしれません.)
そこで,本記事では簡単かつ無料で実現する方法として,はてな記法およびMarkdown記法を用いる場合を検討することにします.尚,編集モードの変更方法などは参考記事として挙げているはてなブログ公式のヘルプを参照するか,後述する実践部までお待ちください.

理論:はてなブログに於けるはてな記法スーパーpre記法

前節までではてなブログに於ける編集モードを確認し,はてな記法Markdown記法を用いる場合に実現する方法が存在するという事実を述べました.本節でははてな記法を用いた場合に実現する方法を説明します.はてなブログ公式のヘルプを参照すると,はてな記法は大別して次の四つの機能を提供していることが分かります.

今回の目的を達成するためには,入力支援記法のうち,「スーパーpre記法」と呼ばれるものを利用します.これを説明する上で,恐らく「pre記法」から説明する方が座りがよいと思われるので,本記事ではこちらから説明します.
「pre記法」の機能としては,はてなブログ公式のヘルプに於いて「整形したテキストをそのまま表示します(pre)」と説明されており,具体的には>| <テキスト>|<と記述することで「<テキスト>」部をテキストとしてそのまま表示することができます.この機能を用いると,テキスト「これはテストです.」や「<div>これはテストです.</div>」を次のように表示可能です.*1

これはテストです.
 
これはテストです.

このように単にpre記法を用いるのみだと,htmlタグなどはhtmlタグとして処理されてしまいます.これでは本来の目的は達成できないのですが,この欠点は次のスーパーpre記法を用いることで解決することができます.
尚,若干蛇足の感が否めませんが,pre記法の開始を意味する記号>|で一度改行しないとpre記法として認識されないように思われました.一方でpre記法の終端を意味する記号|<の前では改行は必ずしも必要ではないようですが,次に紹介するスーパーpre記法との一貫性を保つためにも改行するように努めるのがよいように思われます.但し,はてなブログの公式のヘルプに於いては明記されていないため,断言するにはもう少し調査が必要です.間違いが含まれている可能性がございますので,そのことをご了解いただけたら幸いです.

スーパーpre記法」の機能としては,はてなブログ公式のヘルプに於いて「整形したHTMLなどのソースをそのまま表示します(pre)」と説明されており,具体的には>|| <テキスト> ||<と記述することで「<テキスト>」部をそのまま表示することができます.
pre記法と異なる点は,スーパーpre記法の開始を意味する記号>||>|html|のように記述することで,テキストの「<テキスト>」部がどの言語で記述されているかを明記することができる点にあります.以下ではスーパーpre記法の開始を意味する記号>||の二つのパイプ記号|の間に記述する文字列をスーパーpre記法のオプションと呼ぶことにします.
スーパーpre記法ではテキストの「<テキスト>」がオプションで設定した言語として認識されるため,htmlタグなどもブラウザでレンダリングする際に文字列として処理されるように適切にエスケープされますし,更には言語ごとに適切にパースし,ハイライトしてくれるようです.試しにpre記法を試した際の「<div>これはテストです.</div>」をスーパーpre記法を用いて再度表示してみましょう.順にオプションはhtml,csspythonになります.

<div>これはテストです.</div>
<div>これはテストです.</div>
<div>これはテストです.</div>

htmlのみ期待された通りの表記がなされていることが分かります.オプションを正しく設定することが肝要になるため,オプションとして使える文字列のリストへのリンクを再度掲載しておきます.

実践:スーパーpre記法(シンタックスハイライト付き)を使ってみる

さて,以上ではてなブログに於いてはてな記法を使う場合にソースコードを美しく表示する方法を述べました.ここでは具体的な手順を手続き的に述べておきます.

  1. はてなブログのブログ記事の編集画面に移動する
  2. ブログ記事の編集画面に於いて,次の画像の通りとなるように[編集]をクリックし,[はてな記法]を選択する.

 f:id:UE_skr:20211120030236p:plain

  1. ブログ記事の編集画面に於いて,実際に次の写真のように記述する.

 f:id:UE_skr:20211120030344p:plain

  1. ブログ記事の編集画面に於いて,[プレビュー]をクリックするとf:id:UE_skr:20211120030611p:plainのように記述されていたら成功.

尚,この画像では各行に数字が表示されているが,これは行番号に数字を振っているからであり,参考記事に挙げているものを適切に参照して設定してください.

理論:はてなブログに於けるMarkdown記法とスーパーpre記法

次にMarkdown記法を用いた場合に如何にソースコードを美しく表示するかを説明します.こちらはバッククオート(`)を3つ続けた```で囲まれたコードブロックを作成することでpre記法を実現できます.更に先頭のバッククォートの最後にファイルタイプを指定することでスーパーpre記法を実現できます.
Markdown記法を利用する方の多くは実践部が必要ないと思いますので,こちらについては省略いたします.よって,本質的な内容は以上になります.

実際の経緯

既に述べた通り本質的な内容は前節で終わっています.本節はおまけです.どのようにこの情報に辿り着いたかを記録しておきます.

  1. はてなブログ コード 記述方法」を鍵語にGoogleで検索しました.
  2. はてなブログでソースコードを表示させる方法 - コンサルでデータサイエンティストに辿り着き,この手順でソースコードのハイライトができることを確認しました.
    • このブログ記事により,はてなブログの編集モードをはてな記法にし,謎の記法を用いるとよいことが分かりました.
    • 謎の記法の正体が分からないと気持ちが悪いので,前項で太文字にした事柄を調べることにしました.
    • その際,まずは記事中の参考記事をあたることにしました.
  3. ソースコードを色付けして表示する(シンタックスハイライト) - はてなブログ ヘルプに辿り着き,はてなブログ公式のヘルプに詳細な解説がある可能性に気づきました.
  4. 次にソースコードはてなブログ上で試験的に表示できることを確認しました.
    • 特に問題なく成功しました.
    • この時点でもともと書こうとしていた記事の執筆に戻ったのですが,執筆中に行数の勘定をするのが面倒であることに気づき,行数の表示をする方法を探すことにしました.
  5. はてなブログ コード 記述方法 行数を表示」を鍵語にGoogleで検索しました.
  6. 【はてなブログ】コード部分に行番号を表示するカスタマイズ - そういうのがいいブログに辿り着き,この通りに実践しました.
    • 特に問題なく成功しました.
    • 実装していることも特に問題なく理解できました.
    • ついでにCSSJavascriptを自由に弄れることが分かったのは思わぬ収穫でした.
  7. 今回の目的は達成されたのですが,引用されている記事を辿っておくことにしました.結果,今回参考にした記事は曾孫引きに当たることが分かりました(なので本記事は玄孫引きにあたります).
  8. 一通り読み終えたので,備忘録がてら本記事を執筆しました.

*1:尚,ここでdivタグを文字列として記述するために執筆時には<をエスケープ処理して&lt;と記述しています.基本的に適切なブラウザによって適切にレンダリングがされているならば,表示されている通りの文字列を入力していると思って差し支えありません(細かいことを言い出すと,この脚注の中でもエスケープ処理を行っているため話がややこしくなります).