今夜はロールバック!

プログラミングよりも写真が好きです。

はてなブログでgoogle code prettify を使ってコードを書く方法

f:id:momogaaaa:20170826101512j:plain

どうも、ももがです。・ω・

はてなブログにはプログラムコードを記述するためのタグが用意されているみたいですが、じつは一度も使ったことがないんですよ。

というのも、はてな記法というのがよくわからなくってそれで半ば諦めてたのですが、、、

それと普段は「見たまま編集」と「HTML編集」を使っているのではてな記法にはしたくなかったんですよね。

残念。(´・ω・`)

 

そんな時に朗報が!

google code prettifyというライブラリ(js)を使えば、はてな記法を使わずしてプログラムコードをキレイにブログへ表示させることができるとのこと!

 

今回やることはこういうやつを書くための準備です。

console.log("こんなやつ");

 

今回はgoogle code prettifyを使って、上記のようにコードを書くための準備と使い方を忘れないようにメモしていきます!

 

google code prettify本体の設定

まずは、はてなダッシュボードを開いて、「デザイン」> 「カスタマイズ(レンチのアイコン)」>「フッター」にこちらの設定を入れます。

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

f:id:momogaaaa:20170820112429j:plain

 

スクリプトの設定

続いて、「ヘッダ」>「タイトル下」のHTML部分のheadタグの中にこちらのスクリプトを入れます。 これで設定は完了。

一度入れてしまえば後で変更することも追加することもいりません。

あとはコードをバシバシはてなブログへ書いていきましょう!

<script>prettyPrint();</script>

f:id:momogaaaa:20170820112443j:plain

 

コードをはてなブログで書いてみる

あとは、はてなのHTML編集からコード表示させたい場所にpreタグを入れて、classへprettyprintクラスを指定して囲えば、このようにコードが表示されます。

こちらはHTMLタグから入力する必要があるので、HTML編集から入力していきます。

<pre class="prettyprint">
//ここにコードを記述
console.log("test"); </pre> 

 

コードのスタイルを変更する

コード表示のスタイルは全部で5種類あります。

Prettify Themes Gallery

一番最初に指定したscriptのパラメータskin=sunburst で5種類のスタイルを指定することが可能です。

 

スマホ対応

スマホにも対応しているので、スマホとPCとでヘッダ・フッタをわけてる人はスマホにも上記の設定を適用するようにして下さい。

 

さいごに

google code prettifyを導入して処理が遅くなるかなと思って心配したのですが、今のところは特に遅くも重くもなっていません。

本当ははてな記法で書くのがはてなブログを使っているのであれば、それが一番よいのでしょうが、はてな記法とHTML記法が同時に使えないのでこの先もはてな記法は使わないような気がします。

そんな時にコードの表示方法で困っていたのでgoogle code prettifyには大変助かっています。

世の中便利なライブラリで溢れているのですね。

それでは!