Google Code PrettifyでBlogger内のソースコードなどを見やすくする

2020-07-03T14:20:00+09:00 2020-07-03T05:20:03Z ネット設定

Blogger使っているとソースコードやコマンド類がうまく表示できなかったのですが、

GoogleCodePrettifyを使えばWordpressで表示されてるような感じで見やすくなります。

手順は簡単で今使っているテーマに一行追加するだけです。

・テーマのHTML編集を行う

メニュー > テーマ > HTMLを編集

HTMLの編集画面にきたら　</head> を探します。

見つけたら下記のコードを直前に入力して終わりです。

<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js' type='text/javascript' />

・使い方

<pre class="prettyprint ">
Consle.writeln("test1");
Consle.writeln("test2");
Consle.writeln("test3");
</pre>

表示例

Consle.writeln("test1"); 
Consle.writeln("test2"); 
Consle.writeln("test3");

その他

lang-xxx のxxxに言語の種類をかけます。
詳しくは　gitにてご確認ください
linenums をつければ行番号表示です。

例

のどかわーくす