はてなブログでもQiitaっぽくソースコードを表示するCSS

スポンサーリンク

f:id:tkhstol-929:20181014181040p:plain

「Qiitaっぽい表示」とはこんなやつです↓ f:id:tkhstol-929:20181008183032p:plain (引用元:javascriptのおかげで卒論でちょっと楽できた話

はてなブログでソースコードを載せると背景が白でイマイチみづらいんですよね↓↓

f:id:tkhstol-929:20181008225143j:plain (余談:Markdown記法での画像サイズの変え方がわからず巨大な画像になってしまったのは内緒)

なので、CSSをこんな感じで設定。。。

.entry-content .code {
  background-color: #364549;
  color: #e3e3e3;
}
.entry-content .code .synComment {
  color: #4f80e5;
}

背景色をQiitaと同じ黒系にし、文字色を黒から白に変更しました。
その他の文字はもともとはてなブログ側でいい感じに装飾してくれているので触ってません。
少しいじっただけでだーいぶ印象変わりました。

あとはこのCSSをダッシュボードの設定から適用させればOK
(詳しいやり方はコチラに書いてあります!)

www.sirloin-nagurigaki.net

以上、Qiitaっぽくソースコードを表示する方法でした!

にほんブログ村 IT技術ブログへ
にほんブログ村