で、コード記述をキレイに見せたいなあと思って色んなブログを見ていて気になっていた表示方法が「Syntax Highlighter」によるものであることが発覚。早速導入してみまーす。
当初の目的であるラベルいじりから脱線しまくっているけど気にしない。
まずSyntax Highlighterをホームページから取ってきます。最新版のバージョンは"3.0.83"らしいですが、私のブロガー環境だとうまく動かないというか、ちょっと気に食わないところがあったので1つ前のバージョンである"2.1.382"で試してみました。
ダウンロードしてきた「syntaxhighlighter_2.1.382.zip」を展開すると、"script", "src", "styles"の3つのフォルダが存在します。その中の、以下のファイルをGoogleサイトにアップロードします。
+ script |-+ clipboard.swf |-+ shCore.js |-+ shBrushXxx.js | + styles |-+ help.png |-+ magnifier.png |-+ page_white_code.png |-+ page_white_copy.png |-+ printer.png |-+ shCore.css |-+ shThemeYyy.css |
うふふ、見やすいのでこんなツリー表示にも使っちゃう。
"script"フォルダの内容は、
"https://sites.google.com/site/[site name]/home/js/" に、
"styles"フォルダの内容は、
"https://sites.google.com/site/[site name]/home/css/" に、
それぞれ格納しました。
ちなみにXxxと書いてあるものは、ハイライトしたいコードに応じてスクリプトファイルを選びます。私の場合、多分HTML, CSS, JavaScriptくらいかなあと思い、"shBrushXml.js", "shBrushCss.js", "shBrushJscript.js"の3つをアップロードしてみました。またYyyと書いてあるものは、Syntax Highlighterの見栄えに関わるCSSになります。サンプルを見て、私の好みは"shThemeEmacs.css"かなあと思い、アップロードしました。
格納したそれぞれのファイルを、ブロガーのメニューから「デザイン」 --> 「HTMLの編集」を選択し、<head></head>内に、以下の通り読み込ませる設定をしていきます。
<!--Syntax Highlighter用の記述--> <script src='https://sites.google.com/site/[site name]/home/js/shCore.js' type='text/javascript'/> <script src='https://sites.google.com/site/[site name]/home/js/shBrushXml.js' type='text/javascript'/> <script src='https://sites.google.com/site/[site name]/home/js/shBrushCss.js' type='text/javascript'/> <script src='https://sites.google.com/site/[site name]/home/js/shBrushJscript.js' type='text/javascript'/> <link href='https://sites.google.com/site/[site name]/home/css/shCore.css' rel='stylesheet' type='text/css'/> <link href='https://sites.google.com/site/[site name]/home/css/shThemeEmacs.css' rel='stylesheet' type='text/css'/> <script type='text/javascript'> SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.config.clipboardSwf = 'https://sites.google.com/site/[site name]/home/js/clipboard.swf'; SyntaxHighlighter.all(); </script> <!--Syntax Highlighter用の記述-->
2行目から7行目は、単純に各ファイルを読み込ませる設定です。なお"styles"フォルダ内の.pngファイルは、アップロードしておくだけで使用可能でした。
8行目以降が、Syntax Highlighterを動作させるための設定になります。
SyntaxHighlighter.config.bloggerMode = true;
これは、あまり良く分かっていませんがブロガーで使用するに当たっての不具合回避!?のための1行だそうです。改行を<br>ではなくEnterだけで認識させるためとかどうとか。とりあえず入れときます。
SyntaxHighlighter.config.clipboardSwf = 'https://sites.google.com/site/[site name]/home/js/clipboard.swf';
これは記述したコードをclipboardにコピーする機能を使うための1行です。最新版である3.0.83は、これが無かったのでやめたんですよね。右上に表示されるアイコンたちがどうしても欲しくてね。3.0.83だと、"help"しかありませんでした。あと、3.0.83だとコード表示部がフラットにベタ塗りなんですが、2.1.382だと、1行毎に微妙に色を変えてくれて、見やすいですね。ひょっとしたらCSSの問題かも知れませんけど。
SyntaxHighlighter.all();
これを入れておくと全ての対象部分を変換してくれるそうです。とりあえず入れときます。
これで全ての設定は完了です。あとはソースコードを
<pre class="brush:Xxx"> (ソースコードを記述) </pre>
のように、<pre>タグで囲んであげればキレイに表示してくれます。うーん、コードが長々と続いてても、これならば見やすいですね。今までの記事も暇を見てSyntax Highlighter化したいと思います。
0 件のコメント:
コメントを投稿