はてなブログのソース背景色を変える

今までQtのソースをそのまま張り付けると、

int main()
{
    cout << "Hello World!" << endl;
 
    return 0;
}

みたいに背景が灰色になり、
文字色も通常使用しているものとは違うものになっていました。
(ちなみにスマフォでは灰色の枠に囲ってる状態に見えます。)

ただ、深く考えず使用していたのですが、
Visual Studioでソースをそのまま貼ると、普通に入力したときと同じフォント、色になるんですよね。

 

ソースをわかりやすいように書きたいなと思っていたのですが、
そもそも背景色等をCSSで普通に指定してやればいい話のようでした。
 



以下の手順でCSSの設定を行ってみました。
1. ログインして「設定」の画面に移動
2. 「編集 はてな記法」に設定(Markdownでも可能だけど方法が少し異なる)
3. CSS追加
CSSは、以下の手順で進んでいくと設定できました。
デザイン→六角レンチ?マーク→デザインCSS
f:id:shinopikapi:20181026233240p:plain
f:id:shinopikapi:20181026232300p:plain
f:id:shinopikapi:20181026232309p:plain

デザインCSSには、こちらのブログを参考にさせていただきました。
ありがとうございます。
orangain.hatenablog.com

以下のコードをデザインCSSに追加します。
(わからない人は、元々あったコードは消さない)

.entry-content pre.code {
    background-color: #e0e0e0;
    color: #000000;
}
.synSpecial { color: #dc322f }
.synType { color: #0095d9 }
.synComment { color: #006e54}
.synPreProc { color: #cb4b16 }
.synIdentifier { color: #268bd2 }
.synConstant { color: #2aa198 }
.synStatement { color: #859900 }

C#だと、上記の指定でこのようになりました。
f:id:shinopikapi:20181027001228p:plain
配色下手くそか

はてな記法での編集画面では以下のようになっています。
f:id:shinopikapi:20181026233642p:plain


上画像でcsと表記している箇所に言語を指定します。
ソースコードを張り付けし、||<で閉じればOK


対応している言語は公式を参照
ソースコードを色付けして表示する(シンタックスハイライト) - はてなブログ ヘルプ

公式によるとF#がfsharpなので、C#も同じような感じかと思ったけど、ない……?!
と思ったら、csで指定すればOKとのことでした。
助かりました。ありがとうございます。
csharpstudy.hatenablog.com

色参考
WEB色見本 原色大辞典 - HTMLカラーコード