はてなブログでコードブロックの背景色(シンタックスハイライトの色など)を変更したときのメモ
設定を追加したきっかけ
コマンドなどを記事に入れる際、白背景だと見づらい…
以前より、コマンドなどを挿入するこの部分 ↓
が現在の使用しているデザインだと
白背景でちょっと見づらいのが気になっていました。
自分で変更できることなら変えようと思ったのがきっかけです。
設定手順
シンタックスハイライト自体は変更できるようだったので
今回気になっていた背景色を変更することにしました。
デザインの画面を開く
[ダッシュボード]->[デザイン] を選択
カスタマイズの画面を開く
[デザイン]から遷移した画面より[カスタマイズ] を選択
デザインCSSに設定内容を追記する
[カスタマイズ]の中から画面下部へスクロールし、[デザインCSS] を選択
すると、CSSの入力画面が出力されるので、以下の内容を追記
.entry-content pre.code {
background-color: #073642;
color: #93a1a1;
}
.synSpecial { color: #dc322f }
.synType { color: #b58900 }
.synComment { color: #657b83}
.synPreProc { color: #cb4b16 }
.synIdentifier { color: #268bd2 }
.synConstant { color: #2aa198 }
.synStatement { color: #859900 }
配色は以下のような設定となっており、
対応しているclassの値に入っているカラーコードの変更により
自在にカスタム可能となっています。
| Purpose | Class | Hex | Color Name | Color |
|---|---|---|---|---|
| 背景色 | pre.code (background-color) | #073642 | Base02 | |
| テキスト | pre.code (color) | #93a1a1 | Base1 | |
| 特殊文字・記号 | .synSpecial | #dc322f | Red | |
| 型 | .synType | #b58900 | Yellow | |
| コメント | .synComment | #657b83 | Base00 | |
| プリプロセッサ | .synPreProc | #cb4b16 | Orange | |
| 識別子 | .synIdentifier | #268bd2 | Blue | |
| 定数 | .synConstant | #2aa198 | Cyan | |
| ステートメント | .synStatement | #859900 | Green |
設定内容を保存する
画面上部の[変更を保存する]をクリックし、設定内容を保存する
結果・設定反映後の状態
befor
after
シンタックスハイライトのやり方
私は記事を書く際に、Markdown で編集をしています。
Markdown で編集する際に、特にシンタックスハイライトを指定しない場合は
以下のように、着色なしでコードブロックが記載されます。
Markdownモードでは、コードブロックのシンタックスハイライトに対応しており、
以下のように言語を指定することができます。
つまり、ここの赤枠にある言語を変更してあげれば
任意の言語のシンタックスハイライトを指定してあげることができます。
スーパーpre記法の場合のやり方や
その他、はてなブログ 様で対応しているファイルタイプについては
以下の記事をご確認下さい。
今回の記事はこれで以上となります。
ここまで読んで頂きありがとうございました。
参考にさせて頂いたサイト様
こちらを参考にさせて頂きました。ありがとうございます。
