【Plugin】High-light の使い方(ソースコードを貼り付ける)

RW3.6検証済み
このエントリの内容は RapidWeaver 3.6 を使用して検証、カスタマイズされた時のものですが、このバージョンでの動作を保証するものではありませんのでご注意下さい。また、表示の無いバージョンでは動作しない、エラーが出ないという意味ではありません。
08/02/24:内容を少し変更しました。)Rapidweaver でソースコードを表示したい場合は、Nilrog's place の High-light プラグインを使うと便利です。というかこれが無いと無理だったりします。
HTMLコードのページに関しては問題はありませんが、ブログページなどのスタイルつきテキストでソースコードを表示しようとすると至難の業です。

このプラグインの便利なところは、タグ→記号変換をせずにそのままソースコードを貼れるということにつきますね。しかも
<code>タグを書く必要がありません。
私は体裁を整える為に
<pre>タグを使っていますが、必要がなければ専用の書式をあてるだけで簡単にソースコードを貼ることが出来ます。

では早速解説を。まずは、
Nilrog's place から High-lightプラグインをダウンロードします。現在は1.2.1(Build25)がダウンロード出来ます。(バージョンが1.2.1以上であることを確認して下さい。ver.1.2以下では機能しません。)プラグインをインストールしたら、Rapidweaverを再起動して下さい。
書式メニューに「High-Light」という項目が追加されているので、その中の「Settings…」を選択してます。以下のようなパネルが表示されますので簡単に解説しておきます。(使い方は
Nilrog's place でも解説してあります。)


Apply inline coloy:各コードを色分けで表示する場合はチェックを入れます。
Wrap text inside:書式の中に含ませる要素を選択します。通常は Code で良いと思います。
Replace tabs with:タブスペースをいくつの半角スペースに置き換えるかを決めます。
Pad linenumbers:行番号を表示した際に"1"を"000001"などと表示数かどうかを決めます。"0"を含ませない場合は Space を選択します。
Add linenumbers:デフォルトで行番号を表示するかどうかを選択します。



Use external binary:自分で用意した souce-highlight ファイルを使う場合はここをチェックします。
Use dynamic menusouce-highlight 2.8で定義されている?全ての言語に対応します。書式メニューがものすごく長くなりますが CSS の ソースコードを表示したい場合はなどここにチェックを入れます。こっちを使う人の方が多いと思います。(両方のチェックがなくても現れるメニューがありますが、どういうものか理解していません(笑)。)


High-Light プラグインはドネーション(寄付)ウェアです。気に入ったら今後の開発支援の為に協力するのも素敵かなと。


さて、Settingが終わったら実際に使ってみましょう。使い方は簡単、記入したソースコードを選択して、書式から High-Light を選択し、任意の言語を選択してあげるだけです。


1,ソースコードを選択。


2,書式>High-Light>任意の言語(今回はJavascriptを選択)。


3.書式が当たった部分は黄色くなります。


4.プレビューで見るとこんな感じ。<pre>タグがなくてもなぜか改行まで再現されています。


6.少し見辛いのでCSSで体裁を整えてみます。

※現在<pre>タグを使うと<br>が挿入され行と行の間にスペースが出来てしまいますので他の要素を使った方が良さそうです。



7.プレビューするとこんな感じ。見やすくなりました。


pre{	color: #333;	font-size: medium;	line-height: 1;	white-space: pre;	border: 1px solid #aaa;	background: #eee;	padding: 1em; 	overflow: auto;	font-family: Courier,monospace;	}

8.今回<pre>タグに適用したCSS

"6"でも書きましたが、<pre>タグを使うと強制改行が入るので、他の要素を使う場合は"white-space: pre;"の所を削除した方がいいですね。

.code{ color: #333; font-size: medium; line-height: 1; border: 1px solid #aaa; background: #eee; padding: 1em; overflow: auto; font-family: Courier,monospace; }

9.<pre>タグの変わりに<p>タグを使ってclass指定してみました。


行番号のサンプル作るの忘れた…チェック入れるだけなので省略します。毎度、長々と書いていますが以上です。

blog comments powered by Disqus