ブログ｜一所懸命に手抜きする[忍者]

[PR]

2024年04月16日

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

忍者ブログにSyntaxHighlighterを導入してみました

SyntaxHighlighterを導入するためダウンロードしました

　はじめまして。私は、最近はてなブログで記事を書き始めたばかりです。はてなブログの「はてな記法」や「Markdown記法」など簡便法が便利で、[:CONTENTS:]で目次が作れるなど良いところが多数あるのですが、ファイルをアップロードできないなど困ることも多いので別館のような使い方をするブログをたてることにしました。が、その前に・・・。
　まずは、ソースコードをきれいに掲載するための　SyntaxHiighlighter を忍者ブログに導入することにしました。試行錯誤も多かったので備忘録として残します。

Version について悩みました

　まずはversionについて悩みました。何度もバージョンを変えてみました。
　ver2には「クリップボードへコピー」機能があるのでver2にしようと思ったのですが、最終的にver3を採用しました。

Ver 2

　コード画面にカーソルを置くと右上にツールバーが表示されます。その内容は「コードを別ウインドウでテキスト表示」「クリップボードへコピー」「印刷」「バージョン情報」です。
　「クリップボードへコピー」はFLASHを利用しているため最近のFLASH排除の流れを考えるとうまく動作しないかもしれません。
　「コードを別ウインドウでテキスト表示」「クリップボードへコピー」なら行番号は入りませんが、コードを直接選択してコピーすると、行番号まで入ってしまい面倒です。

Ver 3

　FLASH排除のためかツールバーがなくなりました。クリップボードへコピーする便利機能がなくなったのが痛いです。その代わりに、ダブルクリックするとコードエリアがハイライトなしのテキスト表示になります。そこからコピーしても良いでしょうが、ハイライト画面でコードをコピーしても行番号は入らなくなりました。
　また、titleを設定できるようになりました。
　他にも色々あるのですが、FLASH排除の流れには逆らわないことにしました。

SyntaxHighlighterをダウンロード

　「SyntaxHighlighter」一式をダウンロードします。
　必要なフォルダは　scriptsフォルダと　stylesフォルダのみです。

scriptsフォルダ

　scriptsフォルダにはプログラミング言語に応じたファイルが入っています。ハイライトする関数等が異なるので各言語に応じてファイルが必要になります。

	
	shAutoloader.js			※便利※
	shBrushAppleScript.js		applescript
	shBrushAS3.js                actionscript3 as3
	shBrushBash.js               bash shell
	shBrushColdFusion.js         coldfusion cf
	shBrushCpp.js                cpp c
	shBrushCSharp.js             c# c-sharp csharp
	shBrushCss.js                css
	shBrushDelphi.js             delphi pascal
	shBrushDiff.js               diff patch pas
	shBrushErlang.js             erl erlang
	shBrushGroovy.js             groovy
	shBrushJava.js               java
	shBrushJavaFX.js             jfx javafx
	shBrushJScript.js            js jscript javascript
	shBrushPerl.js               perl pl
	shBrushPhp.js                php
	shBrushPlain.js              text plain
	shBrushPowershell            powershell ps
	shBrushPython.js             py python
	shBrushRuby.js               ruby rails ror rb
	shBrushSass.js               sass scss
	shBrushScala.js              scala
	shBrushSql.js                sql
	shBrushVb.js                 vb vbnet
	shBrushXml.js                xml xhtml xslt html
	shCore.js					※必須※
	shLegacy.js

　メインの部分はshCore.jsです。これは必ず必要になります。
　shBrush○○の○○が言語に対応していますので自分に必要なものだけをアップロードすれば構いません。
　つまり、VBのコードを書く人ならば　shCore.js　と　shBrushVb.js　が必要です。VBAもVBと大差がないと思います。
　shAutoloader.js　は言語ファイルを最初は読み込まず、必要になった時に初めて各言語のjsファイルをロードしてくれるものです。ページのロードが多少速くなるようです。

stylesフォルダ

　SyntaxHighlighterは、CSSファイルによって自由にデザインを変更できます。stylesフォルダ内にCSSファイルがありますから気に入ったものをアップロードします。

　
	shCore.css
	shCoreDefault.css
	shCoreDjango.css
	shCoreEclipse.css
	shCoreEmacs.css
	shCoreFadeToGrey.css
	shCoreMDUltra.css
	shCoreMidnight.css
	shCoreRDark.css
	shThemeDefault.css
	shThemeDjango.css
	shThemeEclipse.css
	shThemeEmacs.css
	shThemeFadeToGrey.css
	shThemeMDUltra.css
	shThemeMidnight.css
	shThemeRDark.css

　ver2では　shCore.css　プラス　shTheme○○.css　という形で選択するのでした。ver3でもその選択は可能ですが、それを一つにした　shCore○○.css　を選んでも構いません。
　shCoreEclipse.css　の場合
　

必要ならshBrushR.jsをダウンロード

　R言語を使う人にとって困ることに、SyntaxHighlighterファイル一式にはR言語のBrushがないので、yihuiさんのshBrushR.jsをDownloadします。

必要ならsolarized-on-syntaxhighlighterをダウンロード

　標準のテンプレートは白背景や黒背景なのでうーむ。delphinusさんが作成なさった黄背景のsyntaxhighlighter-solarized-light.cssを入手し、アレンジして使ってみます。
　

アップロードして設定しました

　ファイルアップロードページを利用して必要な.jsファイルと.cssファイルをアップロードします。忍者ブログではフォルダを作れないようで、ルートフォルダに雑多にアップロードする感じですが、使用上は気にする必要はありません。

とりあえず使えるやり方

<script src="http://file.ホスト名/shCore.js"></script>
<script src="http://file.ホスト名/shBrushXml.js"></script>
<script src="http://file.ホスト名/shBrushR.js"></script>
<link rel="stylesheet" href="http://file.ホスト名/shCoreEclipse.css">

　忍者ブログの場合、管理ページ>共通タグの設定></head>タグの直前に上記コードを記入します。
　自分の必要に応じてshBrush○○.jsを追加する必要があります。
　これでとりあえず使える環境はできました。autoloaderを使わない場合には設定はここで終わりになります。

autoloaderを用いる設定

　「とりあえず使えるやり方」は指定した言語のコードを掲載しなくともロードされるので多少遅くなるようです。ver3の追加機能である autoloader を使うと、言語が宣言されて必要になった時に初めてファイルがロードされるようになっています。その設定もなんとか成功しました。autoloaderを使う場合には「とりあえず使えるやり方」のコードを書かずに下記設定を記載します。

まずはautoloaderを常駐させる部分

<script src="http://file.ホスト名/shCore.js"></script>
<script src="http://file.ホスト名/shAutoloader.js"></script>
<script src="http://file.ホスト名/shBrushXml.js"></script>
<link rel="stylesheet" href="http://file.ホスト名/shCoreEclipse.css">

　私の場合、忍者ブログの、管理ページ>共通タグの設定></head>タグの直前に上記コードを記入してうまくいきました。shBrushXml.js はhtmlと他言語の混用に対応するために必要と言われています。shCoreEclipse.cssは自分の使用するテーマのCSSファイルにします。

続いて言語に応じてロードするファイルの設定

<script language="javascript" type="text/javascript">
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.autoloader(
  "r  http://file.ホスト名/shBrushR.js",
  "sql  http://file.ホスト名/shBrushSql.js",
  "html xml  http://file.ホスト名/shBrushXml.js"
);
SyntaxHighlighter.all();
</script>

　私は、忍者ブログの、管理ページ>共通タグの設定></body>タグの直前に上記コードを記入して稼働しました。私はR、SQLがとりあえず必要と思いますので上記設定にします。SyntaxHighlighter.config.bloggerMode = true;とするとソースコードに</script>とあったら、それはソースコード本文として扱わずに改行します。

ソースコード記載法

　本文中にソースコードを記載する方法ですが、

ソースコードを埋め込む基本パターン

<pre class="brush:言語エイリアス名; " >
ソースコード
</pre>

のように<pre>~</pre>にソースコードを挟んで書きます。

ソースコードを埋め込む例

<pre class="brush:html; collapse:false" title="基本的ロード方法(Eclipse風画面でRのコードを掲載する場合)" >
&lt;script src="http://file.ホスト名/shCore.js"&gt;&lt;/script&gt;
&lt;script src="http://file.ホスト名/shAutoloader.js"&gt;
&lt;/script>
&lt;script src="http://file.ホスト名/shBrushXml.js"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" href="http://file.ホスト名/shCoreEclipse.css"&gt;
</pre>

<pre>~<pre>では<や>はそれぞれ<、&gtと表記する必要があるのがとても面倒です。
　ともあれ実行した結果は下の通りです。

<script src="http://file.ホスト名/shCore.js"></script>
<script src="http://file.ホスト名/shBrushXml.js"></script>
<script src="http://file.ホスト名/shBrushR.js"></script>
<link rel="stylesheet" href="http://file.ホスト名/shCoreEclipse.css">

　これでようやくソースコードを掲載できるようになりました。

[4回]

一所懸命に手抜きする[忍者]