はてなブログでコードブロックの背景色(シンタックスハイライトの色など)を変更したときのメモ
設定を追加したきっかけ
コマンドなどを記事に入れる際、白背景だと見づらい…
以前より、コマンドなどを挿入するこの部分 ↓
が現在の使用しているデザインだと
白背景でちょっと見づらいのが気になっていました。
自分で変更できることなら変えようと思ったのがきっかけです。
設定手順
シンタックスハイライト自体は変更できるようだったので
今回気になっていた背景色を変更することにしました。
デザインの画面を開く
[ダッシュボード]->[デザイン] を選択
カスタマイズの画面を開く
[デザイン]から遷移した画面より[カスタマイズ] を選択
デザイン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記法の場合のやり方や
その他、はてなブログ 様で対応しているファイルタイプについては
以下の記事をご確認下さい。
今回の記事はこれで以上となります。
ここまで読んで頂きありがとうございました。
参考にさせて頂いたサイト様
こちらを参考にさせて頂きました。ありがとうございます。
Qiita に投稿したらはてなブログにも投稿するようにZapierで連携してみた
きっかけ
IFTTT(イフト) なら実現できるっぽい？
Qiita に投稿して、はてなブログにも記載して…となると
アウトプット先が複数になり、面倒臭くなりそうなので
何か連携できるものはないかと探してみたところ
IFTTT (イフト) が利用できそうだということが分かりました。
IFTTT とは
IFTTT で Gmail が使えなくなっていた
IFTTT で早速実施してみようと思った矢先、
IFTTT で Gmail が使えなくなったことが発覚しました。
Gmail 以外のメーラーならできるっぽい？
ただ、課題がたくさんあるみたい。
代替案としての Zapier(ザピアー)
結局、諦めて Zapier を使うことに
解決しなければいけない課題が多く、面倒臭くなってしまったので
仕方がないので Zapier を使うことにしました。
初めて使うサービスなので不安があり、しぶしぶ・・・って感じで作業していましたw
実施した内容は、以下を参考にして
Qiita → Gmail(sand) というTrigger App を作成し、連携できました。
試してみたら Zapier もいい感じだった
シンプルですが、できることは多く、Filterができるのはとても大きかったですね。
先ほどの記事にもあるように、Twitter との連携もできるので
設定が終わったら、Twitter に連携させて遊んでみたいと思います。
今回の記事はこれで以上となります。
ここまで読んで頂きありがとうございました。
