ようこそ!逆襲のニートブログへ

ブログ内検索

最近の記事

はてなブックマーク数

この日記のはてなブックマーク数

カテゴリー

月別アーカイブ

スポンサーサイト

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

FC2ブログで、ソースコードをシンタックスハイライト表示する方法

ドットインストール学習日記を書いていて、ブログにHTMLソースを貼ろうとすると、そのままでソースコードとして表示できない。
FC2ブログで、HTMLソースコードを表示させる方法を調べてみた。

TUDY-NET おぼえがき -FC2ブログなどソースコードをハイライト表示にする方法
Java+Androidと熱帯魚 FC2 ソースコードのハイライトとHTMLエスケープとソースコードの整形

・SyntaxHighlighter
・google-code-prettify
とかを使えばOK。

→当ブログでは、google-code-prettifyを使ってる。

貼り付けるコードの「<」や「>」はそのままでは表示されないのはみんな知っていると思う。
表示させるには、各コードをエスケープ変換させればよい

そこで、ソースコード全てをエスケープ変換してくれるサイト
http://webtools.dounokouno.com/htmlescape/index.html



上記のHTMLタグをエンティティに置換してくれるサービスを使ってみたが、インデントが削られてしまうので、この点はダメだった。

→エンティティに置換する方法は、自前で用意する。

●Peggyでエンティティ置換
テキストエディタの「Peggy」は、Mocaという付属のスクリプト言語で、マクロを組んで実行できる。
Mocaで置換処理を行なったら、うまくいった。

MocaScript Guide 選択範囲の&などをすべてエンティティ(&)に変換するには?



(1) 「HTML-Converter.ms」というファイルを作り、「C:\Program Files\Anchor\share\script」に置く。

(2) 「HTML-Converter.ms」に以下の内容を記述して、保存する。


//
// HTML-Converter.ms - ブログにHTMLコードを掲載するとき、タグをエンティティに置換する
// cf. MocaScript Guide 選択範囲の&などをすべてエンティティ(&)に変換するには?
// http://www.anchorsystems.jp/anchor/ashp/peggy/document/pmsguide.html#convert_char_entity
//


/////////////////////////////////////////////////////////////////////////////
// コマンド宣言

#command CharToEntity "エンティティに置換"
#command EntityToChar "HTMLタグに戻す"


/////////////////////////////////////////////////////////////////////////////
// コマンド処理

// ウインドウの有無をチェックする。
if (!view)
error("ウインドウが開いていません.");

switch (command) {
case "CharToEntity":
// 選択範囲内の文字をエンティティに変換する。
replace(/[&<>"]/g, convertCharToEntity, AP, CP);
break;

case "EntityToChar":
// 選択範囲内のエンティティを文字に変換する。
replace(/&(amp|lt|gt|quot)\>;?/g, convertEntityToChar, AP, CP);
break;

default:
error("不明コマンド: " + command);
}

function convertCharToEntity($0)
{
// replaceメソッドから呼び出される文字列変換関数
if ($0 == "&")
return "&";
if ($0 == "<")
return "<";
if ($0 == ">")
return ">";
if ($0 == "\"")
return """;
return $0;
}

function convertEntityToChar($0)
{
// replaceメソッドから呼び出される文字列変換関数
if ($0 == "&" || $0 == "&")
return "&";
if ($0 == "<" || $0 == "<")
return "<";
if ($0 == ">" || $0 == ">")
return ">";
if ($0 == """ || $0 == """)
return "\"";
return $0;
}


(3) Peggyのメニューで、[ツール]→[スクリプト]→[リロード]をクリックする。

(4) 置換したいHTMLソースコードを開いて、範囲選択して、右クリック → [スクリプト]→[HTML-Converter]→[エンティティに置換]をクリックする。

peggy_moca.png

(5) 変換したソースコードを、ブログに貼り、「google-code-prettify」表示用のタグで囲む。
→「<pre class="prettyprint">」と「</pre>」で囲む。
関連記事

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバックURL:
http://gooddays1.blog37.fc2.com/tb.php/1007-897c1c55

FC2Ad

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