2014年3月15日土曜日

SyntaxHighlighter

ブログにソースコードをあげるにあたって、今までなにかと見づらかったのでいい方法は無いものかと探してみたところ、SyntaxHighlighterなるものを見つけました。ソースコードが載ってるところではよく見かけるやつだと思います。



SyntaxHighlighterをブログで使うにあたって参考にさせていただきました。↓
http://naka7772.blog.fc2.com/blog-entry-216.html


手順

まあつまり、
http://alexgorbatchev.com/SyntaxHighlighter/
↑ここからダウンロードしたファイルを解凍して、

その中身の
「scripts」フォルダからは
shCore.js
shBrushJava.js ←ハイライトさせたい言語のファイル(何種類でも)


「styeles」フォルダからは
shCore.css
shThemeDefault.css

以上のファイルをどっかにアップロードします。
そしたらブログテンプレートのHTML編集で<head></head>間に
1
2
3
4
5
6
7
<script type="text/javascript" src="shCore.jsがアップロードされたURL"></script>
<script type="text/javascript" src="ハイライトさせたい言語に応じたファイルがアップロードされたURL"></script>
<link type="text/css" rel="stylesheet" href="shCore.cssがアップロードされたURL" />
<link type="text/css" rel="stylesheet" href="shThemeDefault.cssがアップロードされたURL" />
<script type="text/javascript">
SyntaxHighlighter.all();
</script>
と付け足せばOK。
最後のshThemeDefault.cssはテーマなのでお好みのテーマをstyelesフォルダから選んでみると楽しい。
ちなみにこれはshThemeEmacs.cssってやつです。



あとは
<pre class="brush: 言語名;">
ソースコード
</pre>

で表示できると思ったのですが、自動改行がうんぬんかんぬんでコードが1行になって表示される問題が発生しました。
結局色々調べて、
1
2
3
4
5
<script type="text/javascript">
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.stripBrs = true;
SyntaxHighlighter.all();
</script>
上記の2行を加えたらうまく表示されました。
(<pre class="brush: html;highlight: [2,3]">で指定した行がハイライトされる)
参考にさせていただいたページ↓
http://unyorle.blog3.fc2.com/blog-entry-947.html



メモ

最後にちょっとしたことなのですが、何分HTMLを扱うのは初めてなもので慣れないことがありました。
コードを記事としてあげるときに

<pre class="brush: cpp;">
/*code*/
/*code*/
/*code*/
</pre>

としていたのですが、そうすると
1
2
3
/*code*/
/*code*/
/*code*/
上記のように下の方に空行ができてしまうんですね…。
コードが始まる行と終わる行にタグをもってくる、慣れない感じですが勉強になりました。

<pre class="brush: cpp;">/*code*/
/*code*/
/*code*/</pre>


1
2
3
/*code*/
/*code*/
/*code*/


追記

2014/04/18
まず、下の方に空行ができてしまううんぬんの話ですが、ちゃんと3行で表示されてる気がしますね…。原因はわからないですが(改行の仕方自動改行にするとできない?)、もしかしたら「上記のように下の方に空行ができてしまうんですね…。」とか言いながら、ちゃんと3行で表示されてる間抜けな状況になっているかもしれません。こちらの設定によって左右されるっぽいです。

それともうひとつ、
今までSyntaxHighlighterで表示した部分に、スクロールの必要が無いのにも関わらず横にスクロールバーが表示されていて邪魔だなあって思ってました。そこで調べてみたのですが、どうやらここによるとSyntaxHighlighter3.0系ではIE,Chromeにおいて常に縦スクロールバーが表示されてしまうようです。

解決法としては、shCoreDefault.cssの
1
2
3
4
5
6
7
.syntaxhighlighter {
  width: 100% !important;
  margin: 1em 0 1em 0 !important;
  position: relative !important;
  overflow: auto !important;
  font-size: 1em !important;
}
この中を
1
2
3
4
5
6
7
8
.syntaxhighlighter {
  width: 100% !important;
  margin: 1em 0 1em 0 !important;
  position: relative !important;
  overflow: auto !important;
  overflow-y: hidden !important; /*これを追加*/
  font-size: 1em !important;
}
とすればいいようです。
あとはいつも通りファイルをアップロードして、名前を変えたのならブログのHTMLを編集して読み込むファイル名を変えればOKです。

0 件のコメント:

コメントを投稿