くぜのメモ

メモのように色々なことを書いていく雑記ブログ

【はてなブログ】ソースコードを貼り付けて分かりやすい表示にカスタマイズする!

はてなブログにHTMLやPythonなど、様々な言語のソースコードを貼り付ける方法を紹介します。

また、「左上に言語名を表示させる」など、表示デザインのカスタマイズについても記載したいと思います。

はてなブログにソースコードを貼り付ける方法

はてなブログにソースコードを貼り付ける方法は、「見たまま」「はてな記法」といった編集モードによって違いがあります。

「はてな記法」もしくは「Markdown」の場合

「はてな記法」もしくは「Markdown」では、コード貼り付け用の記法が用意されています。

はてな記法

スーパーpre記法>|ファイルタイプ| ~~ ||<で記載すると、成形したソースコードが色付けして表示されます。

>||||<は行頭となるように記述すること

>|言語名|
~
~
||<
Markdown

``` ~~ ```で記載すると、形成したソースコードが色付けで表示されます。

```は行頭となるように記述すること

```言語名
~
~
```
対応している言語名について

大抵の言語は対応されています。

表記は、アルファベットはすべて小文字となるようです。(C言語 → c、HTML → html

はてなブログで対応している言語名の詳細については、以下リンクに記載があります。

help.hatenablog.com

「HTML」の場合

preタグ<pre>などを利用して記載します。ただ、色を付けたりなどの設定は自身で行う必要があり、上級者向けなのであまりおすすめはしません。

「見たまま」の場合

「見たまま」はコード貼り付け用の記法が用意されていません

そのため「HTML編集」に切り替えて編集するしかないように見えますが、コピペでソースコードを貼り付けることが可能です。

方法は以下の通り。

1.貼り付けたい記事とは別の記事を作成
2.編集モードを「はてな記法」もしくは「Markdown」に設定
3.コード貼り付け用の記法でコードを記述
4.F12などを押して検証(デベロッパーツール)を開く
5.コードを記述しているHTMLをコピー*1
6.貼り付けたい記事の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;
}

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