Bloggerでソースコード表示
ソースコードとかコマンドラインとかをいい感じに表示したかったのでちょっと調べた。
とりあえずGoogleのcode-prettifyを使うのが良さそうで、これググればほぼ解決なのだけど、Bloggerの管理画面が若干変わってたようなので一応記録を。
- まずはBloggerの管理画面でメニューからテーマを選択
- マイテーマ「カスタマイズ」横の▼から「HTMLを編集」選択
-
HTML編集画面で <head> タグの上に以下追加
最後の?skin=suburstは表示のオプションなので、適当にググってお好みで選んでもらえれば。<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sunburst' />
- 保存クリック
これで設定は完了。
あとは記事作成時にHTMLビューを選んで、ソースコードとかを書く時<pre class="prettyprint">〜<pre>で囲んでやればOK。
上のpreタグのとこだと、こんな感じ。
<pre class="prettyprint"><script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sunburst' /></pre>
preタグ内は余計な改行とかスペース入れると表示されちゃうので、そこはご注意を。
なんか記事内の表示ずれとか気になるけど面倒だから放置。気が向いたら直す。
コメント
コメントを投稿