2016/01/23

Bloggerでコードを綺麗に表示できるようにする

1 comment  
Bloggerでプログラムコードを綺麗に表示するには、SyntaxHighlighterというライブラリを使えるようにする。

Bloggerの管理画面の「テンプレート」を開き、HTMLの編集で、<head>タグのところに以下のHTMLを追加する。

headに貼り付けるコード

※shBrushXXXXは、使わない言語は削除する。

SyntaxHighlighterのスタイルの変更

コード表示のスタイルテーマを変更するには、２行目のshThemeDefault.cssを変更する。
スタイルのテーマは、
http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/
で幾つか選べる。

SyntaxHighlighter でのコードの書き方

１．<pre>タグを使って書く

<pre class="brush:[言語指定];">
//コードを書く
</pre>
preタグを使う場合、HTMLタグの開始記号<を&lt;にする必要がある。

２．<script>タグを使って書く

<script class="brush:html" type="syntaxhighlighter"><![CDATA[
//コード
]]></script>
ただし、<scriptタグ>の中に<script>タグを書くことは出来ないので、
この場合も<script>タグは<を&lt;にする必要がある。

プレビューには表示されない

残念ながら、Bloggerのプレビューではコード表示は確認できないので、コード表示部分は公開後に確認しよう。

モバイルページでもSyntaxHighlighterを有効にする

スマホで確認してみると、SyntaxHighlighterが正常に動作していない。
１．Bloggerの「テンプレート」の「モバイル」の歯車ボタンをクリック
２．「モバイルテンプレートを選択」から「カスタム」を選んで保存
これで、PC用の<head>タグに記述したSyntaxHighlighterの設定が有効になる。

参考にしたサイト

・BloggerにソースコードをハイライトするSyntaxHighlighterを導入する
http://wada811.blogspot.com/2012/02/bloggersyntaxhighlighter.html
・Blogger モバイルページにSyntax Highlighterを適用する
http://moririn-web.blogspot.jp/2015/01/blogger-syntax-highlighter.html



1 件のコメント:

  1. atsuya2016/12/15 9:45:00

    google-code-prettify を試したのですが、うまく動作せずいろいろ検索してこちらにたどり着きました。
    コードをコピーさせていただいて一発で綺麗に表示できました。感動です。
    ありがとうございました。

    返信削除