WakaLog

ワカログ -Wakalog-

-Memorandum　Web制作・プログラミングや気になったツールなどの紹介してます

はてなブログでソースコードを色付けして表示する（シンタックスハイライト） Monokai風テーマにしてみた

はてばブログ CSS

はてなブログでソースコードを色付けして表示する（シンタックスハイライト） Monokai風テーマにしてみた

ソースコードを色付けして表示する（シンタックスハイライト）のカラーテーマを変更してみました。 f:id:jacklin8:20171103132937p:plain

はてな記法でシンタックスハイライト

シンタックスハイライトを利用するには、そのコードがどの構文で記述されているかを示すファイルタイプを、スーパーpre記法で先頭の>||で指定します。

サンプル

>|html|<p>sample html</p>||<

Markdown記法でシンタックスハイライト

Markdownモードでも、コードブロックのシンタックスハイライトに対応しており、```html のように言語を指定できます。

サンプル

   ```html
   <p>sample html</p>
   ```

Monokai風テーマに（CSS）変更

下記の記事を参考に、CSS でMonokai風にシンタックスハイライトのテーマを変更。

kerotaa.hateblo.jp

i24appnet.hateblo.jp

カラー設定は以下のサイトを参考 Monokai

www.eclipsecolorthemes.org

Monokai風テーマ

下記の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 }     /*定数*/

設定カラー

Class Hex Color
background-color #272822
color #F8F8F2
.synComment #75715E
.synSpecial #E6DB74
.synType #66D9EF
.synPreProc #F92672
.synStatement #F92672
.synIdentifier #F8F8F2
.synConstant #AE81FF

プレビュー

javascript

public class Demo {
    private static final String CONSTANT = "String";
    private Object o;
    /**
     * Creates a new demo.
     * @param o The object to demonstrate.
     */
    public Demo(Object o) {
        this.o = o;
        String s = CONSTANT;
        int i = 1;
    }
    public static void main(String[] args) {
        Demo demo = new Demo();
    }
}

html

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" />
    </head>
<body>
    <!-- Comment -->
    <p>sample html</p>
</body>
</html>

まとめ

貼り付けるだけで簡単にはてなブログのソースコードに色付けできます。

また、color:のところを編集するだけで好きな色に変更することもできるので好みの色合いで設定されてみてはいかがでしょうか？