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 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
まず、下の方に空行ができてしまううんぬんの話ですが、ちゃんと３行で表示されてる気がしますね…。原因はわからないですが（改行の仕方自動改行にするとできない？）、もしかしたら「上記のように下の方に空行ができてしまうんですね…。」とか言いながら、ちゃんと３行で表示されてる間抜けな状況になっているかもしれません。こちらの設定によって左右されるっぽいです。
それともうひとつ、
今まで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 件のコメント:
コメントを投稿