【はてなブログ】見たまま編集でもソースコードを色付け（シンタックスハイライト）して分かりやすい表示にカスタマイズする！

はてなブログでは「見たまま」「はてな記法」といった編集モードがいくつか用意されています。はてな記法などではコード記述用の記法が用意されており、コードの色付け表示（シンタックスハイライト）が簡単にできるのですが、見たままモードではHTMLを編集するしか方法がありません。

そこで今回は、見たままモードでも、様々な言語をシンタックスハイライトでコード表示する方法を紹介します。また、「左上に言語名を表示させる」など、表示デザインのカスタマイズについても記載したいと思います。

見たままモードでソースコードをシンタックスハイライト表示する方法
- 前提知識：はてな記法、Markdownでソースコードを記述する方法
- 見たままモードでソースコードを記述する方法
はてなブログで表示のカスタマイズ
- テキストが1行に収まらない場合の処理
- 言語名表示

見たままモードでソースコードをシンタックスハイライト表示する方法

今回紹介する方法では、はてな記法、Markdownの書き方を利用するので、前提知識としてこれらの記述方法について紹介します。

前提知識：はてな記法、Markdownでソースコードを記述する方法

はてな記法では、スーパーpre記法>|ファイルタイプ| ～～ ||<で記載すると、成形したソースコードがシンタックスハイライトで表示されます。
※ >||と||<は行頭となるように記述すること

>|言語名|
～
～
||<

Markdownでは、``` ～～ ```で記載すると、形成したソースコードがシンタックスハイライトで表示されます。
※ ```は行頭となるように記述すること

```言語名
～
～
```

言語名について、大抵の言語は対応されており、表記はアルファベットはすべて小文字となるようです。（C言語 → c、HTML → html）はてなブログで対応している言語名の詳細については、以下リンクに記載があります。 help.hatenablog.com

見たままモードでソースコードを記述する方法

見たままモードでシンタックスハイライト表示する方法、それは「コピペで貼り付ける」です。方法は以下の通り。

貼り付けたい記事とは別の記事を作成
編集モードを「はてな記法」もしくは「Markdown」に設定
コード貼り付け用の記法でコードを記述
F12などを押して検証（デベロッパーツール）を開く
コードを記述しているHTMLをコピー*1
貼り付けたい記事のHTML編集でペースト

実は他サイトでも、プレビューなどをコピペする方法が紹介されていますが、そのやり方だとソースコードの表示デザインが崩れます。しかし、今回紹介した方法では、ソースコードの表示デザインを崩すことなく、シンタックスハイライト表示することが可能です。

はてなブログで表示のカスタマイズ

テキストが1行に収まらない場合の処理

テキストが1行に収まらない場合、折り返すか横スクロールする処理が考えられます。当ブログでは横スクロールする処理を実装しています。

折り返す処理を実装したい場合は、white-space: pre-wrap;としてください。（と言ったものの、デフォルトだと折り返す設定だったので、正直何も設定しなくても良いです）

.entry-content .code {
    overflow-x: auto;
    white-space: pre;
}

言語名表示

FOXISMさんのデザインを参考にさせていただきました。リンクを記載しておきます。

現状、言語がHTML、CSS、JavaScriptの時のみ背景色が変わるように設定しており、背景色は各言語のロゴを参考にしています。

foxism.jp

.entry-content .code {
    position: relative;
    padding-top: 2em;
    padding-right: 1em;
    padding-bottom: 1em;
    padding-left: 1em;
}

.entry-content .code::before {
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 0;
    padding-right: 0.8em;
    padding-bottom: 0;
    padding-left: 0.8em;
    background-color: #6666666;
    content: attr(data-lang);
}

.lang-html::before {
    background-color: #ff5d0e;
    color: #ffffff;
}

.lang-css::before {
    background-color: #00a8e3;
    color: #ffffff;
}

.lang-javascript::before {
    background-color: #ffde00;
    color: #ffffff;
}

合わせて読みたい

cxememo.com

*1:コードを記述しているHTMLには、「Elements」タグを選択し、「page-entry」→「container」→「container-inner」→「content」→「content-inner」→「wrapper」→「main」→「main-inner」→「entry」→「entry-inner」→「entry-content」と下っていくと到達できます。