スポンサーサイト

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

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

SyntaxHighlighter 2.0 を FC2 ブログで

2009年12月12日(土)07時18分

SyntaxHighlighter 2.1.364

前回まで「SyntaxHighlighter for Windows Live Writer」という、プログラムのソースコードを自動で色分けしてくれる Windows Live Writer 用のプラグインの導入に四苦八苦したわけですが、その導入の過程で、「このプラグイン自体に色分け機能があるわけではなく、SyntaxHighlighter という色分けスクリプトの使用を便利にするためのものであること」、「このプラグインが対応する SyntaxHighlighter のバージョンは 1.5.1 であること」、「SyntaxHighlighter の2009年12月時点での最新版は 2.1.364 であり、これは 1.5.1 とは互換性がないこと」、などがわかり、それならば、このプラグインで 1.5.1 を使うのはやめて、最新版の 2.1.364 を使ってみようということにしました。
その SyntaxHighlighter 2.1.364 導入時のメモです。
といっても以前に書いた 1.5.1 の導入と大差はないのですが。

ダウンロード

公式サイト(http://alexgorbatchev.com/wiki/SyntaxHighlighter)から最新版をダウンロードできます。
ただこのサイト、Internet Explorer 6 ではまともに表示できないので他のブラウザを使う必要があると思います。

アップロード

ダウンロードしたファイルを解凍して得られた JavaScript やスタイルシートを FC2 ブログ管理画面の「ファイルアップロード」でアップロードします。
FC2 ブログではフォルダ単位でまとめてアップロードしたり、フォルダを作ってその中にアップロードしたりはできないので、必要なファイルは個別にアップロードし、それらのファイルは他の画像や音楽ファイルと同じフォルダに横並びで存在することになります。
アップロードした後はファイルリストの「表示」の部分を確認して、アップロードされた URI を記録しておいてください。
必ずアップロードする必要のあるファイルは以下の9つです(上7つは「styles」フォルダ、下2つは「scripts」フォルダです)。

  • styles\help.png
  • styles\magnifier.png
  • styles\page_white_code.png
  • styles\page_white_copy.png
  • styles\printer.png
  • styles\shCore.css
  • styles\shThemeDefault.css
  • scripts\clipboard.swf
  • scripts\shCore.js

上記以外に「scripts」フォルダ中の「shBrushXXX.js」というファイル群のうち、使用したい言語に対応するものを追加でアップロードします。
今回は「C++」「JavaScript」「HTML」の3つに対応させるものとして説明していきますので、以下の3つを追加でアップロードします。

  • scripts\shBrushCpp.js
  • scripts\shBrushJScript.js
  • scripts\shBrushXml.js

それから、「scripts」フォルダには「shLegacy.js」というファイルがあるんですが、これは旧版との互換機能を利用するために必要なものらしく、2.0 から使うという場合には多分いらないと思います。

テンプレート書き換え

FC2 ブログ管理画面の「テンプレートの設定」で現在使用中のテンプレートを「編集」します。
「”現在使用中のテンプレート名”のHTML編集」にあるテキストエリア内で「</head>」を探し、その直前に以下の文字列を挿入します。

<!-- begin:SyntaxHighlighter -->
 <script type="text/javascript" src="http://[アップロードされたURI]/shCore.js" charset="euc-jp"></script>
 <script type="text/javascript" src="http://[アップロードされたURI]/shBrushCpp.js"></script>
 <script type="text/javascript" src="http://[アップロードされたURI]/shBrushJScript.js"></script>
 <script type="text/javascript" src="http://[アップロードされたURI]/shBrushXml.js"></script>
 <link type="text/css" rel="stylesheet" href="http://[アップロードされたURI]/shCore.css"/>
 <link type="text/css" rel="stylesheet" href="http://[アップロードされたURI]/shThemeDefault.css"/>
 <script type="text/javascript">
  SyntaxHighlighter.config.clipboardSwf = 'http://[アップロードされたURI]/clipboard.swf';
  SyntaxHighlighter.all();
 </script>
<!-- end:SyntaxHighlighter -->

1.5.1 のときと同様に「[アップロードされたURI]」となっているところには、各ファイルがアップロードされた場所になるように変更してください。
また、「shCore.js」に付いている「charset="euc-jp"」は SyntaxHighlighter に付属していたサンプルソースにはなかったのですが、これを付けないと文中の「[アップロードされたURI]」の部分が文字化けしてしまったので付けました。
【追記:2012/06/19】2012 年ごろから FC2 ブログの文字コードが euc-jp から utf-8 に変更されたため、FC2 ブログでは上記の記述は不要になりました。
それと、几帳面なタイプの人だと、文中「sh~.js」の記述された行をアルファベット順に並べたりしたくなるかもしれませんが、少なくとも「shCore.js」は先頭に記述しておかないと、多分正常に動きませんのでご注意を。

自動改行のオフ

FC2 ブログでは「自動改行」機能がデフォルトでオンになっており、これを切っておかないと PRE タグ内の改行にも BR タグを付加されてしまうため、ソースコード内の改行が二重化されてしまうことになると思います。
自分の場合「環境設定の変更→投稿設定→自動改行」を「HTML タグ以外は無視」で常時オフにしていたため 1.5.1 の説明を書いたときには書き忘れていましたが。
ということで、この機能はオフにして本文中の改行を<br />手打ちで行うか、あるいは、オンにしたままソースコード内の改行コードを全て<br />に置換して一行で書くか、の二択になると思います。

使い方

ソースコードを class 属性付きの PRE タグに囲んで記述するだけです。
例えば C++ のソースコードであれば「<pre class="brush: cpp;">C++ ソースコード</pre>」という風に書きます。
「brush:」の部分に使える言語名とその色分けに必要な JavaScropt ファイルは「http://alexgorbatchev.com/wiki/SyntaxHighlighter:Brushes」に掲載されています。
個人的には「折り返し」が発生すると見づらくなるので「<pre class="brush: html;wrap-lines:false;">」としてワードラップを禁止しています。

表示文字列変更

ソースコード上に存在する各種アイコンにマウスカーソルを重ねたときに「view source」や「copy to clipboard」といった文字列がポップアップしますが、この文字列は上記「テンプレート書き換え」の後半部分に何行か追加することで変更可能です。

<script type="text/javascript">
 SyntaxHighlighter.config.clipboardSwf = 'http://[アップロードされたURI]/clipboard.swf';
 SyntaxHighlighter.config.strings.expandSource = "+ ソースを展開";
 SyntaxHighlighter.config.strings.viewSource = "プレーンテキストで表示";
 SyntaxHighlighter.config.strings.copyToClipboard = "クリップボードにコピー";
 SyntaxHighlighter.config.strings.copyToClipboardConfirmation = "内容をクリップボードにコピーしました";
 SyntaxHighlighter.config.strings.print = "印刷";
 SyntaxHighlighter.config.strings.help = "バージョン情報";
 SyntaxHighlighter.all();
</script>

変更可能な文字列については「http://alexgorbatchev.com/wiki/SyntaxHighlighter:Configuration:strings」に掲載されています。

その他いろいろ

Firefox で「copy to clipboard」してメモ帳に貼り付けたら改行記号が「↑」に化けてたりとか、 Internet Explorer 6 だとワードラップ禁止して一行で表示し切れなくても横スクロールバーが出なかったりとか、あるんですがそんなに困ることでもなさそうなので、深くは考えないことに。
そういえば 1.5.1 のときは Firefox の場合、改行文字化け以前にクリップボードにコピーする機能自体が動作していませんでした。

関連記事

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

スポンサーサイト

コメントの投稿

非公開コメント

最新記事
最新コメント
Amazonおまかせリンク
カテゴリ
タグクラウド
Amazonお買い得ウィジェット
カレンダー
03 | 2017/04 | 05
- - - - - - 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拍手ランキング
ユーザータグ

音楽管理(65)
ポータブル(57)
ソフト紹介(44)
プログラミング(42)
音声技術(41)
自作ソフト(34)
サイト運営(32)
FC2(31)
ブログ(30)
iTunes(26)
Windows(25)
LISMO(24)
音声合成(23)
音声認識(22)
x-アプリ(22)
電子ブック(22)
eラーニング(20)
バックアップ(19)
語学学習(19)
foobar2000(18)
ソースコード(17)
画像管理(15)
WindowsLiveWriter(15)
C++(14)
アフィリエイト(10)
DnspTools(10)
ウォークマン(9)
fi-6130(9)
FLAC(9)
Gracenote(8)
英語音読学習計画(8)
Prolog(8)
JavaScript(8)
ベクター(8)
雑記(8)
CodeBlocks(7)
SyntaxHighlighter(7)
TraConv(7)
wxWidgets(7)
spcbght(7)
DCP-J552N(6)
W63CA(6)
MP3Gain(6)
WinRT(6)
iGoinLM(6)
VirtualBox(6)
WindowsLiveMesh(6)
英語発音矯正実験(6)
ExactAudioCopy(6)
楽器演奏(5)
Mery(5)
LAME(5)
音楽技術(5)
GalateaProject(4)
LLVM(4)
nLite(4)
MIDI(4)
ホームページ(4)
WindowsLiveSkyDrive(4)
GalateaTalk(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アクセスランキング
最新トラックバック
アクセスランキング
[ジャンルランキング]
コンピュータ
112位
アクセスランキングを見る>>

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