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>間に
<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>
で表示できると思ったのですが、自動改行がうんぬんかんぬんでコードが１行になって表示される問題が発生しました。
結局色々調べて、
<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>
としていたのですが、そうすると
/*code*/ /*code*/ /*code*/上記のように下の方に空行ができてしまうんですね…。
コードが始まる行と終わる行にタグをもってくる、慣れない感じですが勉強になりました。
<pre class="brush: cpp;">/*code*/
/*code*/
/*code*/</pre>
↓
/*code*/ /*code*/ /*code*/
追記
2014/04/18
まず、下の方に空行ができてしまううんぬんの話ですが、ちゃんと３行で表示されてる気がしますね…。原因はわからないですが（改行の仕方自動改行にするとできない？）、もしかしたら「上記のように下の方に空行ができてしまうんですね…。」とか言いながら、ちゃんと３行で表示されてる間抜けな状況になっているかもしれません。こちらの設定によって左右されるっぽいです。
それともうひとつ、
今までSyntaxHighlighterで表示した部分に、スクロールの必要が無いのにも関わらず横にスクロールバーが表示されていて邪魔だなあって思ってました。そこで調べてみたのですが、どうやらここによるとSyntaxHighlighter3.0系ではIE,Chromeにおいて常に縦スクロールバーが表示されてしまうようです。
解決法としては、shCoreDefault.cssの
.syntaxhighlighter {
width: 100% !important;
margin: 1em 0 1em 0 !important;
position: relative !important;
overflow: auto !important;
font-size: 1em !important;
}この中を.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 件のコメント:
コメントを投稿