スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

【同じタグを付けた記事の一覧】

SyntaxHighlighter 3.0 にアップデート

2010年10月06日(水)06時13分

SyntaxHighlighter

いまさらですが SyntaxHighlighter の新バージョンが出ていることに気が付いたので、当ブログのものも差し替えてアップデートしました。
SyntaxHighlighter は JavaScript とスタイルシートの組み合わせで、HTML に組み込んでおくと HTML 中で PRE タグに囲んで記述したソースコードを、PRE タグで指定した言語に応じた色分(ハイライト)で表示してくれるようになるものです。

3.0.83

現時点(2010/10/06)での最新バージョンは 3.0.83 となっており、この3.0系とこれまで使っていた2.0系との違いのうち、個人的に気になるものは以下のあたりです。

  • Flash を使用しなくなった
  • 言語用定義ファイルをページの表示に必要なものだけ動的にロードさせることが出来るようになった
  • 「HTML + スクリプト」を適切に色分けする html-script オプションが追加された
  • タイトルを付けられるようになった
  • 長い行を折り返し表示させる wrap-lines オプションが廃止された

Flash は2.0系ではソースコードをクリップボードへコピーしたりするために必要でしたが、Firefox でこれを使ってコピーすると改行コードが「\n」になるらしく、そのまま Windows の「メモ帳」(改行コードは「\r\n」)に貼りつけると改行が文字化けして不便だったりしたため、この変更はありがたいです。
なお3.0系では、ソースコード部をダブルクリックすると、一時的に行番号などの装飾が外れるようになっており、コピーする際にはその機能を使う、ということのようです。
また、html-script オプションは HTA のソースコードを載せるのに便利なため、欲しいと思っていました。

SyntaxHighlighter,autoloader()」関数は最後に

で、早速スクリプト等関連ファイルをアップロードし、公式サイトその他を参考に読み込み用の HTML を書き、前回と同じようにテンプレートの HEAD 部に挿入しましたが、ハイライトされませんでした。
それもそのはず、新く書いた HTML では「SyntaxHighlighter.autoloader()」関数を使用しており、これは言語用定義ファイルを必要なものだけ動的に読み込む新機能ですが、これは当然、実行の時点で「どの言語用のファイルが必要か」が明らかになっている必要があります。
ですのでこの「SyntaxHighlighter.autoloader()」関数を HEAD 部や、あるいは BODY 部の先頭においても、その時点では本文にどんな言語のソースが使用されているかがわからないため、何も読み込まれず、その結果ハイライトされないことになります。
ということで、少なくとも「SyntaxHighlighter.autoloader()」関数(とその後に続く「SyntaxHighlighter.all()」関数)は、本文の終了地点、つまり「</body>」タグの直前に置く必要があります。
そして当初、関数部分のみを BODY 部末尾においていたのですが、これだと Firefox では問題ないものの、Internet Explorer ではうまく動かなかったため、SyntaxHighlighter 本体(JavaScript ファイル)の読み込み部分も末尾に移動させました。

SyntaxHighlighter 3.0 を FC2 ブログ

ということで、改めて SyntaxHighlighter 3.0 を FC2 ブログで使用するために行った手順をメモしていきたいと思います。
まず公式サイトから最新版をダウンロードし、含まれる「styles」フォルダの中から「shCore.css」と「shThemeDefault.css」を、そして「scripts」フォルダ中のファイルのすべてを FC2 ブログにアップロードしました。
実際には、「scripts」フォルダに含まれる「shBrush~.js」ファイルは自分が使用する言語のものだけで構わないわけですが、「どうせ不要なら読み込まれないわけだし」ということで、絶対に自分は使わないであろう言語のものまで豪快に組み込んでいます。
で、管理画面の「テンプレートの設定」で、HEAD 部分に以下を挿入し、

<!-- begin:SyntaxHighlighter -->
<link type="text/css" rel="stylesheet" href="http://blog-imgs-30.fc2.com/d/e/n/denspe/shCore.css" />
<link type="text/css" rel="stylesheet" href="http://blog-imgs-30.fc2.com/d/e/n/denspe/shThemeDefault.css" />
<!-- end:SyntaxHighlighter -->

BODY 部の最後(「</body>」タグの直前)に以下を挿入しました。

<!-- begin:SyntaxHighlighter -->
<script type="text/javascript" src="http://blog-imgs-30.fc2.com/d/e/n/denspe/shCore.js"></script>
<script type="text/javascript" src="http://blog-imgs-30.fc2.com/d/e/n/denspe/shAutoloader.js"></script>
<script type="text/javascript" src="http://blog-imgs-30.fc2.com/d/e/n/denspe/shLegacy.js"></script>
<script type="text/javascript" src="http://blog-imgs-30.fc2.com/d/e/n/denspe/shBrushXml.js"></script>
<script type="text/javascript">
SyntaxHighlighter.autoloader
(
"applescript            http://blog-imgs-30-origin.fc2.com/d/e/n/denspe/shBrushAppleScript.js",
"actionscript3 as3      http://blog-imgs-30-origin.fc2.com/d/e/n/denspe/shBrushAS3.js",
"bash shell             http://blog-imgs-30-origin.fc2.com/d/e/n/denspe/shBrushBash.js",
"coldfusion cf          http://blog-imgs-30-origin.fc2.com/d/e/n/denspe/shBrushColdFusion.js",
"cpp c                  http://blog-imgs-30-origin.fc2.com/d/e/n/denspe/shBrushCpp.js",
"c# c-sharp csharp      http://blog-imgs-30-origin.fc2.com/d/e/n/denspe/shBrushCSharp.js",
"css                    http://blog-imgs-30-origin.fc2.com/d/e/n/denspe/shBrushCss.js",
"delphi pascal          http://blog-imgs-30-origin.fc2.com/d/e/n/denspe/shBrushDelphi.js",
"diff patch pas         http://blog-imgs-30-origin.fc2.com/d/e/n/denspe/shBrushDiff.js",
"erl erlang             http://blog-imgs-30-origin.fc2.com/d/e/n/denspe/shBrushErlang.js",
"groovy                 http://blog-imgs-30-origin.fc2.com/d/e/n/denspe/shBrushGroovy.js",
"java                   http://blog-imgs-30-origin.fc2.com/d/e/n/denspe/shBrushJava.js",
"jfx javafx             http://blog-imgs-30-origin.fc2.com/d/e/n/denspe/shBrushJavaFX.js",
"js jscript javascript  http://blog-imgs-30-origin.fc2.com/d/e/n/denspe/shBrushJScript.js",
"perl pl                http://blog-imgs-30-origin.fc2.com/d/e/n/denspe/shBrushPerl.js",
"php                    http://blog-imgs-30-origin.fc2.com/d/e/n/denspe/shBrushPhp.js",
"text plain             http://blog-imgs-30-origin.fc2.com/d/e/n/denspe/shBrushPlain.js",
"py python              http://blog-imgs-30-origin.fc2.com/d/e/n/denspe/shBrushPython.js",
"ruby rails ror rb      http://blog-imgs-30-origin.fc2.com/d/e/n/denspe/shBrushRuby.js",
"sass scss              http://blog-imgs-30-origin.fc2.com/d/e/n/denspe/shBrushSass.js",
"scala                  http://blog-imgs-30-origin.fc2.com/d/e/n/denspe/shBrushScala.js",
"sql                    http://blog-imgs-30-origin.fc2.com/d/e/n/denspe/shBrushSql.js",
"vb vbnet               http://blog-imgs-30-origin.fc2.com/d/e/n/denspe/shBrushVb.js",
"xml xhtml xslt html    http://blog-imgs-30-origin.fc2.com/d/e/n/denspe/shBrushXml.js"
);
SyntaxHighlighter.all();
</script>
<!-- end:SyntaxHighlighter -->

使用方法は、色分けしたいソースコード部分を、「<pre class="brush:言語;">ソースコード</pre>」のように、使用言語を指定した PRE タグで囲んで記述するだけです。

Windows Live Writer でどう利用するか

このブログは Windows Live Writer というブログ・エディタで書いており、これまでソースコードは「Syntax Highlighter 2.0 for Windows Live Writer を使う」に書いたプラグインを使って挿入していました。
このプラグインの3.0系に対応したバージョンは今のところまだ出ていないようです。
もちろん、SyntaxHighlighter は2.0系でも3.0系でも、言語指定した PRE タグで囲むという点に違いはありませんので、これまでに書いたソースコードを含む記事もそのまま表示できてます。
ということで、このまま使い続けても別にかまわないのですが、その場合、廃止された「wrap-lines」オプション用の記述が無駄に付き続けたり、新しく導入された「html-script」オプションやタイトルは使えないことになります。

Insert Tag Snippet

ということで以前から使っていた「Insert Tag Snippet」という Windows Live Writer 用のプラグインで代用することにしました。
この「Insert Tag Snippet」は非常にシンプルな機能を持つプラグインで、指定した文字列を、あらかじめ設定しておいたタグ(というより文字列)で囲んで、編集中の記事に挿入してくれるものです。
その際、文字列中の「<」「>」を、それぞれ「&lt;」「&gt;」に変換する機能も付いています。
ものがシンプルなだけに応用範囲が広いため重宝しています。
とりあえずこれに、自分が使いそうな言語用の PRE タグをいくつか登録して使っていこうと思います。
ただしこの「Insert Tag Snippet」、指定できる文字列は一つ、つまり全体で変更可能な場所は一か所しかないため、依然としてタイトルを付けることはできないわけですが。

関連記事

【同じタグを付けた記事の一覧】
ソースコード FC2 プログラミング サイト運営 SyntaxHighlighter WindowsLiveWriter ブログ

スポンサーサイト

trackback


この記事にトラックバックする(FC2ブログユーザー)

2010年11月現時点で FC2ブログでSyntaxHighlighterを利用してソースコードを綺麗に記述する方法

FC2ブログにソースコードを綺麗に書きたい! そう思い立ち色々調べた結果 SyntaxHighlighterを利用すると綺麗に描けることが分りました。 こんな感じ #include &lt;stdio.h&gt; int main(){ ...

ソースコードをキレイに見せるSyntaxHighlighter 3.0.83 FC2ブログ用

元々code用にスタイルシートを使っていましたが SyntaxHighlighter で見ると非常にキレイでわかりやすかったので導入することを検討しました。 SyntaxHighlighterでググるとたくさんHITします、FC2で導入されているブログをいくつかやってみましたがうまくいきませんでし...

コメントの投稿

非公開コメント

参考にさせていただきました

はじめまして。
非常に分かりやすい説明で無事設置ができました。

もう少しまとめたら記事にしたいと思います。
その際トラックバックを送らせてもらいますので不要であれば削除してください。
ありがとうございました。

Re: 参考にさせていただきました

はじめまして、capuさん。
お役にたててよかったです。

トラックバック、大歓迎ですよ。
めったにないのでとてもうれしく思います。

それでは。
最新記事
最新コメント
Amazonおまかせリンク
カテゴリ
タグクラウド
Amazonお買い得ウィジェット
カレンダー
05 | 2017/06 | 07
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
月別アーカイブ
プロフィール

電脳太助

Author:電脳太助
Website:電脳スピーチ web

RSSリンクの表示
メールフォーム

名前:
メール:
件名:
本文:

サイト内検索
Ads by Google
FC2アクセスランキング
Ads by Google
FC2拍手ランキング
ユーザータグ

音楽管理(66)
ポータブル(57)
ソフト紹介(44)
プログラミング(42)
音声技術(41)
自作ソフト(35)
サイト運営(32)
FC2(31)
ブログ(30)
iTunes(27)
Windows(25)
LISMO(24)
音声合成(23)
音声認識(22)
x-アプリ(22)
電子ブック(22)
eラーニング(20)
バックアップ(19)
語学学習(19)
foobar2000(18)
ソースコード(18)
WindowsLiveWriter(15)
画像管理(15)
C++(14)
アフィリエイト(10)
DnspTools(10)
fi-6130(9)
FLAC(9)
JavaScript(9)
ウォークマン(9)
英語音読学習計画(8)
Gracenote(8)
Prolog(8)
ベクター(8)
雑記(8)
CodeBlocks(7)
SyntaxHighlighter(7)
TraConv(7)
spcbght(7)
wxWidgets(7)
VirtualBox(6)
W63CA(6)
DCP-J552N(6)
WinRT(6)
WindowsLiveMesh(6)
iGoinLM(6)
英語発音矯正実験(6)
ExactAudioCopy(6)
MP3Gain(6)
LAME(5)
音楽技術(5)
Mery(5)
楽器演奏(5)
GalateaTalk(4)
nLite(4)
WindowsLiveSkyDrive(4)
ホームページ(4)
GalateaProject(4)
MIDI(4)
LLVM(4)
PC-98(3)
カウンター(3)
AACGain(3)
iTCDini(3)
OverCutChecker(3)
拍手(3)
PK-513L(3)
UniversalExtractor(3)
アクセスランキング(3)
ImageCompositeEditor(2)
アクセス解析(2)
OCR(2)
qtaacenc(2)
資格試験(1)
AquesTalk(1)
AquesCmdDl(1)

FC2アクセスランキング
最新トラックバック
アクセスランキング
[ジャンルランキング]
コンピュータ
126位
アクセスランキングを見る>>

[サブジャンルランキング]
ソフトウェア
14位
アクセスランキングを見る>>
FC2カウンター
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。