スポンサーサイト

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

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

SyntaxHighlighter for Windows Live Writer を使用するために必要な作業

2009年12月08日(火)07時17分

問題点

前回Windows Live Writer 用プラグインで、ブログにソースコードを掲載する際に色分けして表示してくれるという機能を持つ、SyntaxHighlighter for Windows Live Writer をインストールしてみたものの、以下のような問題があり期待した結果が得られませんでした。

  1. 色分けされない
  2. 一行で表示される(改行が消失する)
  3. 同一内容で2個表示される

で、今回は一番目の「色分けされない」という点を解決するために行った作業の記録です。
なお、以下の作業は FC2 ブログで使用するためのものであり、また上記問題点のうち2番目の改行消失は、多分 FC2 ブログ特有のものではないかと思います。

前提

前回は、この SyntaxHighlighter for Windows Live Writer というプラグインを「SyntaxHighlighter」と略して記述していたわけですが、どうも元々 SyntaxHighlighter というプロジェクトは別に存在し、このプラグインは、その SyntaxHighlighterWindows Live Writer で便利に使うためのプラグイン、というもののようです。
その SyntaxHighlighter というのは「JavaScript + スタイルシート」の組み合わせで製作されているファイル群で、それを自サイトに設置し、HTML に読み込むことで、その HTML 内で PRE タグに囲んで記述したソースコードが動的に色付けされる、というものだそうです。
つまり Windows Live Writer 側でこのプラグインだけを導入しても、ブログ側で SyntaxHighlighter の JavaScript とスタイルシートを設置し、読み込ませるための設定作業をしていなければ意味がないということです。

注意

この SyntaxHighlighter for Windows Live WriterSyntaxHighlighter 1.5.1 に対応するもので、この 1.5.1 は現時点(2009年12月08日)での最新版である 2.1.364 とは互換性がありません。
ですので、「自分は最新版の方を使いたい」という場合には、以降の作業ではなく、最新版である 2.1.364 向けの作業をする必要があります。
【追記:2009/12/12】「SyntaxHighlighter 2.0 を FC2 ブログで」にてSyntaxHighlighter 2.1.364 向けの作業について書きました。

ダウンロード

まずは SyntaxHighlighter のファイル群をダウンロードする必要があります。
http://code.google.com/p/syntaxhighlighter/」や「http://www.codeplex.com/Release/ProjectReleases.aspx?ProjectName=wlwSyntaxHighlighter&ReleaseId=8769」から「1.5.1」のものをダウンロードして解凍してください。

アップロード

ダウンロードした JavaScript やスタイルシートを FC2 ブログ管理画面の「ファイルアップロード」でアップロードします。
ちなみに、FC2 ブログではフォルダ管理に対応していないそうで JavaScript もスタイルシートも画像も全て同一フォルダに保存されます。
最低限アップロードする必要があるファイルは以下の三つです。

  • Styles\SyntaxHighlighter.css
  • Scripts\clipboard.swf
  • Scripts\shCore.js

その他「Scripts」フォルダに存在する「shBrushXXX.js」ファイル群はそれぞれ XXX に対応する言語名が付けられています。
自分にとって必要な言語に対応するファイルをアップロードします。
以下、「C++」「JavaScript」「HTML」の3つに対応させるものとして説明していきます。
つまり次の3つのファイルを追加でアップロードします。

  • Scripts\shBrushCpp.js 1
  • Scripts\shBrushJScript.js
  • Scripts\shBrushXml.js

テンプレート書き換え

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

<!-- begin:SyntaxHighlighter -->
<link rel="stylesheet" href="http://[アップロードされたURI]/SyntaxHighlighter.css" type="text/css" />
<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>
<script type="text/javascript">
window.onload = function() {
    dp.SyntaxHighlighter.ClipboardSwf = 'http://[アップロードされたURI]/clipboard.swf';
    dp.SyntaxHighlighter.HighlightAll('code');
};
</script>
<!-- end:SyntaxHighlighter -->

文字列中「[アップロードされたURI]」となっているところには、各ファイルがアップロードされた場所になるように変更してください。
ファイルのアップロード先は FC2 ブログ管理画面の「ファイルアップロード」画面下部にあるファイル情報リストの「表示」部分を右クリックしてプロパティを表示させれば確認できます。
「shCore.js」に付いている「charset="euc-jp"」は FC2 ブログではソースコード中に日本語文字列があると文字化けを起こしたので付けてます。
ブログによっては別の文字セットを指定する必要があったり、不要だったりするかと思います。
【追記:2012/06/19】2012 年ごろから FC2 ブログの文字コードが euc-jp から utf-8 に変更されたため、FC2 ブログでは上記の記述は不要になりました。

Windows Live Writer へ取り込み

変更したテンプレート情報を Windows Live Writer 側にも取り込みます。
Windows Live Writer を起動し、「ブログ→ブログ設定の編集→編集→テーマの更新」をします。

第一段階クリア

以上で SyntaxHighlighter for Windows Live Writer正規の導入手順は終了ですので、FC2 ブログ以外のブログであれば、ひょっとしたらここまでの作業だけで期待通りの挙動を示すかもしれません。
少なくとも Windows Live Writer 内でのプレビュー表示等は、うまく動作します。
しかし、FC2 ブログへ投稿した場合、とりあえず SyntaxHighlighter 自体は正常に動作しているらしき表示にはなりますが、ソースコードが全て一行にまとめて表示されるという現象に見舞われます。

関連記事

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

スポンサーサイト

コメントの投稿

非公開コメント

最新記事
最新コメント
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ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。