ウォーリーの雑記帳: Blogger

SyntaxHighlighter(シンタックスハイライター)の強調オプションで変更箇所を目立たせる

Blogにコードを見やすく表示させるツールとしてこのブログでも使用しているSyntacticHighester(シンタックスハイライター)というツールを以前にブログで紹介しました。

【関連する記事】

ある行を強調表示させるオプションを紹介します。

分類のindex管理(4)という記事で変更した箇所をわかりやすく表示させるために使っています。どんな感じで表示されるかは、そのページで確認してみてください。
【参考にしたサイト】
ソースコードを行番号付きで、きれいに表示する「SYNTAXHIGHLIGHTER」の導入と使い方

オプションの指定は簡単です。

<pre class="brush: *** highlight: 1">
1行目をハイライト
</pre>

<pre class="brush: *** highlight: [1, 3]">
1行目と3行目をハイライト
</pre>

こんなかんじでclass属性の中に"highlight:行数"を指定すれば強調されます。
簡単なのでぜひ活用していきたいです。

コードを投稿する際、色付けとかされているブロがあっていいな〜と思ってたので、早速調べて導入してみました。

SyntaxHighlighterって機能みたいなのでこちらをBloggerに導入することにしました。

参考にしたサイト
BloggerにおけるSyntaxHighlighterの使い方
BloggerにソースコードをハイライトするSyntaxHighlighterを導入する
ソースコードをハイライトするSyntaxHighlighter3.0を使いこなす

やることは、

htmlのhead部分に外部css読み込みをさせる
クラスを指定した<pre>タグで囲む

この2つです。

以下、実際に導入した手順です。

１，htmlのhead部分に外部css読み込みをさせる

ブログ編集TOP -> テンプレート -> HTMLを編集でテンプレートのhead部分に以下のコードを追加しました。

 <link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/> 
 <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 
 <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/> 
 <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/> 
 <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/> 
 <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/> 
 <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
 <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'>
 <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/> 
 <script language='javascript'> 
  SyntaxHighlighter.config.bloggerMode = true;
  SyntaxHighlighter.defaults['toolbar'] = false;
  SyntaxHighlighter.all();
 </script>

自分はwebアプリ作っているのでCSS,JavaScript,php,html,SQLあたりが使えればいいのでこれらをインポートしました。

11行目はbloggerで使うため？

12行目は右側に？マークが出るのでそれを消すための設定です。

２，クラスを指定した<pre>タグor<script>タグで囲む

<pre class='brush: ***'>
コードの内容(<をエスケープ済)
</pre>

ちなみに、今回はhtmlを指定して埋め込んでます。
注意点としては

"<" がタグとして認識されてしまうので "<" でエスケープすること。
scriptタグ使う場合でも、埋め込むコードに</script>タグがあった場合、ここだけ "</script>" としなくてはいけないことに注意してください。

ここで30分ぐらいつまりましたね。

こんなかんじです。綺麗にコードが見れるし行数もわかるので使う価値はあるかと思います。
プレビュー表示させるとscriptタグの方法は認識してくれないくて表示されないので、結局<pre>タグ使う方法で書いていくことになりそうです。

ウォーリーの雑記帳

2013年12月3日火曜日

[SyntaxHighlighter] ブログ内のコードをシンタックスハイライターの強調オプションで目立たせる