April 3, 2014

BloggerでSyntaxHighlighterをもっと簡単に使うには

SyntaxHighlighterをもっと便利に

コードをきれいに色付けして表示してくれるライブラリです。Bloggerにも数行のhtmlとJavascriptコードを書くだけ で簡単に導入することが出来ます。
しかし、毎回毎回、以下のようなHTMLモードに切り替えて以下のようなコードを書くのは手間がかかります。そこで、もっと簡単に適用する方法があります。
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css"></link>
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css"></link>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" type="text/javascript"></script>
<br />
<pre class="brush: js">
//ここに表示させたいコードを入力する 
function foo()
{
}
</pre>
<script type="text/javascript">
 SyntaxHighlighter.all()
</script>
//ここに表示させたいコードを入力する 
function foo()
{
}
found, known and done. / Bloggerにコードをハイライトして表示するには(SyntaxHilighter)
http://foundknownanddone.blogspot.jp/2014/02/bloggersyntaxhilighter.html

この記事では、一通り考え方を解説した後にまとめたコードを示します。



HTML/Javascriptガジェットを使う

以下のサイトに上のサンプルコードにある4つのファイル(shCore.css, shThemeXXXX.css, shCore.js, shBrushXXXXX.js)を読み込むスクリプトが紹介されています。BloggerのHTML/Javascriptガジェット機能を利用することで、テンプレートを編集することなくコードを追加できます。
Jump into! / BloggerにおけるSyntaxHighlighter Ver.3.x
http://moririn-web.blogspot.jp/2011/12/bloggersyntaxhighlighter-ver3x.html 

でも縦スクロールバーを消したい!

上記のコードでは、外部から既定のCSSファイルを読み込んでいるので、自分の好みと違う設定になってしまう場合があります。例えば、必要ないときに表示されてしまう縦スクロールバー。
これを消したい場合は、上記のコードを修正してstyleタグを使って上書き修正したいスタイルを記述します。

なお、Template>Customize>Advanced>Add CSSに追加することもできますが、コードが分散すると、保守性が下がるのでお勧めしません。

タイトルや開始行の番号を設定するには

SyntaxHighlighterには色々な機能があり、コードにタイトルを設定したり、指定した行から行番号を開始したり、特定の行を強調表示することもできます。
DevAchieve / ソースコードをハイライトするSyntaxHighlighter3.0を使いこなす http://wada811.blogspot.com/2012/02/syntaxhighlighter30.html

完成したコードと手順

  1. レイアウト > ガジェットを追加
  2. HTML / Javascrip ガジェットを追加
  3. 以下のSytaxHighlighter設定・起動用コードをコピー&ペーストして保存。テーマを変更したり、使用する言語を選ぶときは以下のようにコードを修正する。。
    修正する場所修正方法
    テーマの変更shThemeDefault.css使いたいテーマに合わせて書き換える。
    言語の変更shBrushJScript.js必要な言語に対応する数だけscriptタグをコピーして増やしてshBrushXXXX.jsを読み込む。
    CSSの変更styleタグの中身例えば、.syntaxhighlighter {overflow-y:hidden !important;}
  4. レイアウトを保存
  5. 投稿の中でコードを書きたいときは 、HTMLモードで以下の投稿用コードを書きこむ。
    設定項目機能
    brush: XXXXX表示言語を指定する。
    first-line: 1開始行番号を指定する。この場合は1から行番号を振る。
    highlight:[,]強調表示したい行を指定する。
    title=""コードのタイトルを指定。
<pre class="brush: XXXXX; first-line: 1; highlight: [,];" title="">
// ココにソースを記述
</pre>
上記の投稿用コードは定型文として登録しておくとより簡単です。
textareaに定型文を入力するブックマークレット
http://foundknownanddone.blogspot.jp/2014/04/textarea.html
<script type='text/javascript'><!--  
function loadCss(aUrl) {    
    var head  = document.getElementsByTagName('head')[0]
    var fileref =document.createElement("link")
    fileref.setAttribute("rel", "Stylesheet")
    fileref.setAttribute("type", "text/css")
    fileref.setAttribute("href", aUrl)
    fileref.setAttribute("media", "all")
    head.appendChild(fileref)
}  
loadCss("http://alexgorbatchev.com/pub/sh/current/styles/shCore.css");
loadCss("http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css");
-->
</script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript"><!--  
SyntaxHighlighter.config.bloggerMode = true; 
SyntaxHighlighter.defaults['toolbar'] = false; 
SyntaxHighlighter.all();
// -->
</script>
<style type="text/css">
.syntaxhighlighter {
  overflow-y: hidden !important;
}
</style>

No comments :

Post a Comment