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 > |
最後の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 > |
(<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 件のコメント:
コメントを投稿