BloggerでSyntaxHighlighterを使う方法

ソースコードをハイライトで見やすく表示してくれるSyntaxHighlighterをBloggerで使う方法をまとめる。

BloggerにSyntaxHighlighterのスクリプトを埋め込む

  1. Syntax Highlighter Scripts Generatorで使用したいコードの種類とデザイを選択し、スクリプトコードを保存する。
  2. BloggerのDashbord＞テンプレート＞HTMLの編集を表示させる（HTMLで編集する際は編集前にデザインのテンプレートを保存することが推奨されている）
  3. </head>タグを見つける
  4. </head>タグのすぐ前に1.で保存したスクリプトコードを貼り付ける（<head>〜</head>の中にスクリプトコードを埋め込む）
  5. プレビューで確認して問題がなければ保存する

SyntaxHighlighterを使って投稿する方法

投稿する際に投稿画面でHTMLを選択し、<pre>タグを追加し表示したいコードを囲む

  • 例えば、表示したいコードがHTMLの場合
<pre class="brush:xml">
投稿したいHTMLコードを記述
</pre>

  • 例えば、表示したいコードがCSSの場合
<pre class="brush:css">
投稿したいCSSコードを記述
</pre>

上記の用に記述したいコードによって、<pre class="brush":コードの種類>と記述する

参考にしたサイト
Adding a Syntax Highlighter to your Blogger blog
BloggerにソースコードをハイライトするSyntaxHighlighterを導入する | DevAchieve

Bloggerに導入SyntaxHighlighterでObjevtive-Cを使う方法はこちらを参照

コメント