プログラミング備忘録

linux, javascript, php, C#, そのうちScalaとかアプリ開発とかやってみたいです。

はてなブログで、「見たまま」モードのままでシンタックスハイライトする方法

はてなブログでは、「見たまま」モードを主に使っております。

はてな記法」もありますが、使い方がまさに「?(はてな)」でして、なかなか手が出せないのです。

 

とはいえ、phpcssのコードをいい塩梅に表示させたい。

そう思ったので、google code prettify を使うことにしました。

 

github.com

 

私の方法は、まず、はてなブログの管理画面で、

「デザイン」 → カスタマイズ(レンチのマークボタン)→ フッター

と設定画面を開いて、

 

f:id:teenprogrammer:20170120154745p:plain

 

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sunburst"></script>

 

を埋め込みます。そして「変更を保存」します。これで前準備は完了。 

フッター部分に、googleのcdnを使わせてもらうjavascriptを一行書くだけです。

※「skin=〇〇〇」の部分は、好きなスキンを入れてください。私はsunburstにしました。

 

スキンの種類は4つです。

https://cdn.rawgit.com/google/code-prettify/master/styles/index.html

注意としては、↑のURLだとスキン名の頭文字が大文字ですが、指定するときは全部小文字です。

 

あとは、ブログをとりあえずいったん書いた後、

コードシンタックスさせたい場所だけ、「HTML編集」で直接開いて、書き込みます。

 

f:id:teenprogrammer:20170120155718p:plain

 

<pre class="prettyprint lang-XXX">

シンタックスさせたいコード

</pre>

 

のようにします。lang-XXXは、lang-htmlだったりlang-cssだったりlang-javaだったりlang-phpだったり言語により変わります。

prettyprintだけ書いても動きます。めんどうであればlang-XXXの部分はいりません。

このあたりは、google code prettifyの使い方で調べればいくらでもでてきますので…。

試しにphp言語を表示した例。まあまあキレイ。 

class Hoge {
    private $fuga;
    
    public function getFuga() {
        return $fuga;
    }
}

 

参考)

google code-prettify get started

github.com

 

qiita.com