CaramelTrip

バックエンドエンジニアをメインに、コミュニティ運営・Blog・Video制作などマルチに活動するフリーランスのWEBエンジニアです。 旅・ガジェット・テクノロジー・ライフスタイルの4つのジャンルを中心にニュースやレビューを紹介しています。

はてなブログのコード表記をCSSでMonokai色に設定。色分けで見やすいシンタックスハイライト対応

f:id:parsetree:20180824022853j:plain


技術ブログ見てて、ソースコードが色分けされてないと非常に見づらい。

「あ、俺のブログ・・・、見づらい。」

という事で、大好きなmonokai風に色付けしました。


テーマ次第ではデフォルトで色分けしてくれるものもありますよね。

親切だわー。

シンタックスハイライト

シンタックスハイライトとは、ソースコードの色分け機能です。

その色分けをCSSでやっちゃおうという企画です。


では、CSSの設定をして実際に記述してみます。


CSSの設定

設定は簡単です。

はてなブログの管理画面 > デザイン > カスタマイズ >

を開いて下さい。スパナのアイコンです。

画面左下の{}デザインCSSを開いて、以下のコードを貼り付けて下さい。

/*----------
Monokai
-----------*/
.entry-content pre.code {
  background-color: #272822;      /*背景色*/
  color: #F8F8F2;                 /*テキスト*/
}
.synComment { color: #75715E }      /*コメント*/
.synSpecial { color: #E6DB74 }      /*特殊文字*/
.synType { color: #66D9EF }         /*型*/
.synPreProc { color: #F92672 }      /*プリプロセッサ*/
.synStatement { color: #F92672 }    /*ステートメント*/
.synIdentifier { color: #F8F8F2 }   /*識別子*/
.synConstant { color: #AE81FF }     /*定数*/

記述方法

はてなブログだと2パターンの記法があります。

  • Markdown

  • はてな記法


HTMLでも書けないことはないですが、このサイトのソースを見てみて下さい・・・。

こんなんなってます。

<pre class="code lang-html" data-lang="html" data-unlink="">
  <span class="synIdentifier">&lt;</span>
  <span class="synStatement">p</span>
  <span class="synIdentifier">&gt;</span>
  hoge fuga
  <span class="synIdentifier">&lt;/</span>
  <span class="synStatement">p</span>
  <span class="synIdentifier">&gt;</span>
</pre>

辛いのでやめましょう。


Markdownで記述

GithubやSlackなんかもMarkdownで書くから、このブログもMarkdownで書いてます。

こんな感じに記述してあげればOK。

   ```html
   <p>hoge fuga</p>
   ```


上記のように書くとHTMLには以下のように表示されます。

<p>hoge fuga</p>


はてな記法で記述

はてな記法だとこんな感じ。

>|html|<p>hoge fuga</p>||<


上記のように書くとHTMLには以下のように表示されます。

<p>hoge fuga</p>


まとめ

Monokaiのシンタックスハイライトにするのって結構あっさり出来ちゃうのに驚きました。

大変なのかと思って放ったらかしてたんですが、やってみるものですね。


ただ、過去記事のソースコードが記述してある箇所を全て見直さないと・・・。

html,css,javascriptとか追記してあげないと駄目なので。

がんばる。


参考にさせて頂いた記事

以下の記事を参考にさせて頂きました。

感謝!

wakalog.hatenadiary.jp


i24appnet.hateblo.jp


kerotaa.hateblo.jp