にしあぷ

札幌在住のエンジニア。コンサドーレ、甘いもの、ドット絵が好き。

はてなブログのシンタックス・ハイライトを Monokai（Sublime Text 風）にしてみた

f:id:i24appnet:20150928081041p:plain

はてなブログのシンタックス・ハイライトを、Sublime Text 標準のカラースキーム「Monokai」風に変更してみました。

CSS を編集する

kerotaa.hateblo.jp

上記の記事を参考に、CSS でカラーを指定していきます。Monokai のカラースキームは、Sublime Monokai - Eclipse Color Themes と、今、Monokaiがマイブームなので - FDD を参考にしました。

Monokai 風 CSS

下記のCSSを、管理画面＞デザイン設定＞デザインCSS に貼り付けて「変更を保存する」と、ブログに反映されます。

/* monokai */
.entry-content pre.code {
    background-color: #272822;
    color: #f8f8f2;
}
.synSpecial { color: #e6db74 }
.synType { color: #66d9ef }
.synComment { color: #75715e }
.synPreProc { color: #f92672 }
.synIdentifier { color: #a6e22e }
.synConstant { color: #ae81ff }
.synStatement { color: #f92672 }

カラースキーム

Class Hex Color
.entry-content pre.code (background-color) #272822
.entry-content pre.code (color) #f8f8f2
.synSpecial #e6db74
.synType #66d9ef
.synComment #75715e
.synPreProc #f92672
.synIdentifier #a6e22e
.synConstant #ae81ff
.synStatement #f92672

ソースコードを表示してみる

完全に再現はできませんが、Sublime Text 風の色合いになりました！

Java

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();
    }
}

PHP

<?php
// This is a single-line comment
$stringvariable = "examplestring";
$intvariable = 300;
/**
 * This is a multi-line comment
 * @author Roger Dudler
 */
class Testclass {
    function test($param = "default") {
        return true;
    }
}
?>

HTML

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" />
    </head>
<body>
    <!-- This is a comment -->
    <p>three&amp;&amp;&amp;spaces</p>
</body>
</html>

Lua (Corona SDK)

local sceneName = ...

local composer = require( "composer" )

-- Load scene with same root filename as this file
local scene = composer.newScene( sceneName )

-------------------------------------------------------------------------------

function scene:create( event )
    local sceneGroup = self.view

    -- Called when the scene's view does not exist
    -- 
    -- INSERT code here to initialize the scene
    -- e.g. add display objects to 'sceneGroup', add touch listeners, etc
end

参考リンク

Web制作者のためのSublime Textの教科書 今すぐ最高のエディタを使いこなすプロのノウハウ

Web制作者のためのSublime Textの教科書 今すぐ最高のエディタを使いこなすプロのノウハウ

Web制作者のためのSublime Textの教科書

Web制作者のためのSublime Textの教科書