そういうのがいいブログ

SIerで働く30代サラリーマンSEがインフラエンジニアに憧れてLinux・クラウド・AWSの勉強をするブログ

【はてなブログ】スーパーpre記法で背景色・文字色(シンタックスハイライト)を変える手順

※[PR]当ブログの記事の中にはプロモーションが含まれています。

【はてなブログ】スーパーpre記法で背景色・文字色(シンタックスハイライト)を変える


はてなブログスーパーpre記法で背景色・文字色(シンタックスハイライト)を変えるためのCSSメモ

はてなブログスーパーpre記法で、背景色・文字色とシンタックスハイライトの色を変えたいときのCSSを紹介します。

参考にしたサイト

kawmra.github.io

www.colordic.org


具体的なやり方

上記の参考サイト「はてなブログシンタックスハイライト CSS ジェネレータ」を開いて、
画面でそれぞれの色を入力して、できあがったCSSをそのまま使います。
簡単!


設定 > デザイン > カスタマイズ > デザインCSS に
下記コードを追加

.entry-content pre.code{
  background-color: #222222;
  color: #FFFFFF; 
}

.synComment { color: #D3D3D3; }
.synConstant { color: #32CD32; }
.synIdentifier { color: #DDA0DD; }
.synPreProc { color: #FFFF00; }
.synSpecial { color: #CCFF33; }
.synStatement { color: #EE82EE; }
.synType { color: #1E90FF; }

当ブログで行っている、はてなブログのカスタマイズ方法まとめ

以下の記事で、当ブログでやっている、はてなブログのカスタマイズ方法をまとめて紹介しています

souiunogaii.hatenablog.com