Prism.jsに【FC2ブログ自動改行対応】と【カスタムマーキング機能】を追加してみました。

妹さえいればいい。 三国山蚕 修羅 20171209-Mikuniyama-Kaiko_s.jpg

 Prism.jsを改造するためにワタシは修羅になります!! 





後日こちらの記事で改良版を紹介しています。






Prism.jsとFC2ブログの自動改行


 先日ぼっちんさんのブログで「Prism.js」という、ソースコード表示スクリプトが紹介されていました。



 コレいいなぁ~と思ったんですが、この記事で説明されているようにFC2ブログの編集設定で【改行の扱い】を「自動改行⇒HTMLタグのみ」に変更しなければなりません。

 まぁ。「HTMLタグのみ」にすればいいんですけど…
 横着魔人の僕としては、ソースコード部分ならまだしも記事全体に改行コードを付けなきゃならないという時点で、導入意欲が半減してしまいます。



 そこで自動改行の設定でもちゃんとソースコードが表示されるようにPrism.jsを改造してみました。

 これは比較的簡単で、方法については下記リンクのPrism質問板?みたいなところに載ってました。(なぜかブログカードが使えない…)
 英語で何言ってるかわからないけど、自動翻訳でなんとなくは理解できました。

Prism removes on Prism.highlightAll() #832


 ダウンロードしてきたPrism.jsの一番最後に以下のコードを挿入すれば出来上がりです。
Prism.hooks.add('before-highlight', function (env) {
env.code = env.element.innerText;
});

 これで【自動改行】設定のままでもソースコードが改行されて表示されます。
 ただ、他のsyntax highlighter同様に、HTMLコードは実態参照に変換しないと正しく表示されませんよ。


カスタムマーキング機能を追加してみました。


 ぼっちんさんも要望されていたように、ソースコードの内容について説明したい時に、話しのポイントになる箇所を「部分的に色づけ」したいなと僕も思っておりました。

 で、いろいろ弄り始めたわけですが、これがまぁ一筋縄ではいかなくて…

 Prism.js内部ではプログラム言語に応じてキーワード毎に<span class=…>でクラス定義をしています。

 最初はそこに独自のクラスを定義するように追加しようとやってはみたんですが・・・他のクラス定義との干渉を避けようと思ってアチコチにコードを追加しているうちに、グチャグチャになってとてもお見せできるような内容ではなくなってしまったわけで。

 また1つのクラス定義をするだけでそんな状態ですから、いくつもの色を使い分けるような用途にはとても対応しきれないと考え、他の方法をとってみることにしました。

 んで。動作的には妥協は多いものの、とりあえず出来たのが下のコードです。
 これを同じくPrism.jsの一番最後に挿入します。

Prism.hooks.add('after-highlight', function (env) {
env.highlightedCode = env.highlightedCode.replace(/(#prism_class\s)([0-9A-Za-z_]+)(#)/g,"<span class=\"$2\">").replace(/(#prism_style\scolor#)([0-9A-Za-z_]+)(#)/g,"<span style=\"color:#$2\";>").replace(/(#prism_style\sbackground_color#)([0-9A-Za-z_]+)(#)/g,"<span style=\"background-color:#$2\").replace(/#prism_class#/g,"<span style=\"background-color:#$2\";>").replace(/#prism_style#/g,"<span style=\"background-color:#$2\";>");
env.element.innerHTML = env.highlightedCode;
});

 やっていることは、Prismでの着色クラス定義が終わった後に、独自キーワードをカスタマイズしたクラス定義や色指定に置き換えています。


クラス定義部分の説明。


 .replace(/(#prism_class\s)([0-9A-Za-z_]+)(#)/g,"<span class=\"$2\">")

 #prism_classで始まる#~#で挟まれた部分をクラス定義に置き換えています。
 #prism_class class_name# ⇒ <span class="class_name">

 CSSで.class_name{}でスタイル指定できるようになっています。


 .replace(/#prism_class#/g,"</span>")
 クラス適用範囲の終了コードとして #prism_class# ⇒ </span> に置き換えています。


 #prism_class class_name#あいうえお#prism_class#と記述することで、「あいうえお」の部分にclass_nameで指定されたスタイルが適用されます。


スタイル指定部分の説明。


 .replace(/(#prism_style\scolor#)([0-9A-Za-z_]+)(#)/g,"<span style=\"color:#$2\";>")

 #prism_style color#で始まる#~#で挟まれた部分を文字色指定に置き換えています。
 #prism_style color#ff0000# ⇒ <span style="color:#ff0000";>


 .replace(/(#prism_style\sbackground_color#)([0-9A-Za-z_]+)(#)/g,"<span style=\"background-color:#$2\";>")

 #prism_style background_color#で始まる#~#で挟まれた部分を背景色指定に置き換えています。
 #prism_style background_color#FFCACA#
   ⇒ <span style="background-color:#FFCACA";>


 .replace(/#prism_style#/g,"</span>")
 色指定適用範囲の終了コードとして #prism_style# ⇒ </span> に置き換えています。


実際に使ってみると…


たとえば表示したいCSSコードをこんな風に書いておくと。
.c-pin-s {
position:relative; /* #prism_style color#ff0000#ピンの表示位置の基準#prism_style# */
max-width: 100%;
}
.c-pin-e {
background: url(#prism_class prism_color01#画像ファイルURL#prism_class#) no-repeat;
width: 50px; #prism_style background_color#FFCACA#/* ピン画像の横サイズ */#prism_style#
height: 50px; /* ピン画像の縦サイズ */
position: absolute;
top: -25px; /* ピンの縦位置 */
left: 50%; /* ピンの横位置 */
}


こんな感じで表示されます。
.c-pin-s {
position:relative; /* ピンの表示位置の基準 */
max-width: 100%;
}
.c-pin-e {
background: url(画像ファイルURL) no-repeat;
width: 50px; /* ピン画像の横サイズ */
height: 50px; /* ピン画像の縦サイズ */
position: absolute;
top: -25px; /* ピンの縦位置 */
left: 50%; /* ピンの横位置 */
}

ちなみにprism_color01はCSSでこのように設定してあります。
.prism_color01{
color: #0000ff;
background: #ffff00;
}


注意点とか課題点など。


 クラス指定の"class_name"は、上記コードの"prism_color01"に見られるように基本的に任意に名前付けできます。

 ただ-(ハイフン)や=(イコール)などは、既にPrismの基本ルーチンでクラス定義されて【<span class="…"></span>】が付与されるため、それらが含まれているとそのままでは.replaceで置き換えることができませんので使わないようにしてください。

 .replaceで変換前のクラスや色指定のコード表記が、イマイチ観難い記号を使っていたり、':'や';'を省いてあるのはこのためです。
 ここで使っている.replaceの正規表現は難しいものではないので、自分の使いやすいように自由にカスタマイズしてください。

 また、結局追加したスクリプトも<span class="…"><span style="…">を追加しているだけです。
 ですので、既にPrismで着色されている部分については互いに干渉して、<span>定義した順番に左右され、思ったように着色されない場合があります。

 文字色指定などはコメント内部などでしか有効性がないと思われますので、背景色指定の方が活用できるのではないかと思います。


今日のアイキャッチ画像は。


 「妹さえいればいい。」から、三国山 蚕(みくにやま・かいこ)先生です。


「妹さえいればいい。」

妹さえいれば人生は常に最高なのに、なぜ俺には妹がいないのか……」 妹モノの作品ばかりを書き続けている妹バカの小説家・羽島伊月の周囲には、天才作家にして変態の可児那由多、女子大生の白川京、イラストレーターのぷりけつ、鬼畜税理士の大野アシュリーなど、個性豊かな人物たちが集まっている。


 三国山先生はとても素晴らしいです。
 可愛いこともさることながら、下着フェチとしての矜持には頭が下がります。

 本作品の中で三国山先生回が一番面白くて、いろんなところが熱くなってしまいました。

 ちなみに僕も全裸よりも下着派ですね。水着でもいいですが。

 下着や水着には全裸にはない浪漫が満ち溢れていますからね。
 それに全裸は謎のヒカリが邪魔したり、どうしても不自然なカットやアングルになってしまいますから、ぬりぬりの題材的にもイマイチだったりするんですよね。

Javascript妹さえいればいい。三国山蚕

2 Comments

mochi  

カスタムマーキング機能は改善の余地ありですね

こんにちは。ぼっちんさん。

> 試しに【自動改行】でも【HTMLタグのみ】でも両方使えるのかも試してみたら(笑)しっかり使えてました、当然ですよね(爆)
> しかしまぁ、よくこのフォーラム?の情報に辿り着きましたねぇ。
> それもmochiさんのスキルですよね~ ほんとに素晴らしいです。

 追加したスクリプト中のinnerTextってのが【HTMLタグのみ】の状態になっていて、
 それをPrismに転送し直している形なんだと思います。
 たぶん・・・ ^^;

 いろいろ検索をかけて調べているなかで、
 「prism.js」と「br」の組み合わせでgoogle検索してたら、
 あのフォーラムへと辿り着きました。
 たまたま運が良かっただけですね。(笑)


> 私も【自動改行】のままでも使える方法はないものかと一応は考えた(笑)んですけど、それよりも【HTMLタグのみ】で記事を書くことの楽しさ(笑)に目覚めてしまって、自分でpタグやbrタグを自動挿入するエディタツールを作ってました (^_^; アハハ…
> そのようなツールはネット上にもいっぱいあるんですけど、やっぱり「自前の使い勝手の良いもの」が欲しくて(笑)

 なんかそっちの方が凄いんですけど!?
 なるほど秀丸とかマクロ機能付きのテキストエディタであれば、
 そういったことはできそうですね。
 

> 「カスタムマーキング機能」のアイデアにはほんとに驚かされました ^^
> プロの業ですねぇ、このアイデアは (^_^)ニコニコ
> こちらはまだテストしてないんですけど、私ももっと別の方法も考えたくなりました(笑)
> CSSって全然別の方法でも同じ「見た目」を作り出すことが出来るから楽しいんですよね(爆)

 最初、改行コード対応のスクリプトでbrタグが効くようになったから、
 普通にspanタグも効くかも?とやってみたんですが、
 世の中そこまで甘くはありませんでした。(笑)

 自分の中では妥協している部分もあるんですが、
 今の僕ではこれが限界な感じだったので、
 とりあえず中間報告的に記事にしてみました。
 
 この記事がきっかけになって、
 どなたか【ちゃんとしたもの】を作ってくれないかなぁ~ |∀・) チラッ チラッ
 なんて思ってます。^^;

 コメントありがとうございました。

2017/12/10 (Sun) 13:38 |  REPLY |   

ぼっちん  

またまた素晴らしいです ^^

mochiさん、おはようございます ^^

や~ またまた素晴らしい記事をありがとうございます。
感激してしまいました ^^

試しに【自動改行】でも【HTMLタグのみ】でも両方使えるのかも試してみたら(笑)しっかり使えてました、当然ですよね(爆)
しかしまぁ、よくこのフォーラム?の情報に辿り着きましたねぇ。
それもmochiさんのスキルですよね~ ほんとに素晴らしいです。

私も【自動改行】のままでも使える方法はないものかと一応は考えた(笑)んですけど、それよりも【HTMLタグのみ】で記事を書くことの楽しさ(笑)に目覚めてしまって、自分でpタグやbrタグを自動挿入するエディタツールを作ってました (^_^; アハハ…
そのようなツールはネット上にもいっぱいあるんですけど、やっぱり「自前の使い勝手の良いもの」が欲しくて(笑)

「カスタムマーキング機能」のアイデアにはほんとに驚かされました ^^
プロの業ですねぇ、このアイデアは (^_^)ニコニコ
こちらはまだテストしてないんですけど、私ももっと別の方法も考えたくなりました(笑)
CSSって全然別の方法でも同じ「見た目」を作り出すことが出来るから楽しいんですよね(爆)

いやぁ、楽しい情報とテクを見せてくださって大変ありがとうございました m(_ _)m

2017/12/10 (Sun) 10:06 | EDIT |  REPLY |   

Post a comment