Prism.jsの【カスタムマーキング機能】を改良しました。

ブレンド・S 日向夏帆 プルプル 20171214-Hinata-Kaho_s.jpg

 い、弄りまくっちゃったんだから。 
 スゴイ時間かけちゃったけど…  (〃´o`)=3 フゥ 





Prism.jsでのFC2ブログ自動改行対応とカスタムマーキング機能。


 先日、ソースコード表示スクリプトPrism.jsで「FC2ブログ自動改行対応」と「カスタムマーキング機能追加」の追加スクリプトを紹介しました。



 この中でカスタムマーキング機能の使い勝手がイマイチだと感じていたので、その後さらに弄りまくっておりました。

 課題としては以下の点がありました。
 (1)汎用的でない専用コードを用いてマーキング指示を行う必要がある。
 (2)Prism.jsによるハイライト処理が優先されてしまう場合が多々ある。

 (1)については、#prism_class~##prism_style color#といった適当に作った特殊コードを用いる為、いざ使おうと思った時に思い出せないとか入力が面倒、他のコードとの視認性が悪いなどといった使い勝手の悪さがありました。

 また(2)については、結果としてほとんど背景色しか機能できない状態になっていました。



 今回この2点について以下のような改良を試みました。
 (1)については、<span class="">や<span style="">といったクラス指定や色指示のタグを、実態参照に変換せずにそのままコード中に記述することで、それらが機能するようにしました。

 (2)については、カスタムマーキング範囲内のハイライト処理が無効になるようにしました。


 また今回、カスタムマーキングの改良を進めていく中で調べていてわかったことなのですが、前回「FC2ブログ自動改行対応」のスクリプト中に用いられていたinnerTextというプロパティが、FireFoxでは対応していないという情報もあり、前回とは別の手法での自動改行対策も考えてみました。


 まずは上記改良をまとめたスクリプトコードを先に紹介しておきます。
 これをダウンロードしたPrism.jsの最後に追加します。



/*=== Prism Highlight前処理 ===*/
Prism.hooks.add('before-highlight', function (env) {
/* 自動改行<br>をLineFeedに置換 */
env.element.innerHTML = env.element.innerHTML.replace(/<br>/g,"\n");

/* マーキング機能の<span class><span style>を特殊コード列に置換 */
env.element.innerHTML = env.element.innerHTML.replace(/(<span\sclass=")(.*?)(">)/g,"prism_tag_code1$2prism_tag_code8").replace(/(<span\sstyle="color:)(.*?)(">)/g,"prism_tag_code2$2prism_tag_code8").replace(/(<span\sstyle="background-color:)(.*?)(">)/g,"prism_tag_code3$2prism_tag_code8").replace(/<\/span>/g,"prism_tag_code9");

/* マーキング機能<span style>での#xxxxxxとrgb(d,d,d);の色指定特殊コード列化 */
env.element.innerHTML = env.element.innerHTML.replace(/(prism_tag_code[2-3])(#)(.*?)(prism_tag_code8)/g,"$1sharp$3$4").replace(/(prism_tag_code[2-3])(\s*rgb\()(\s*)(.*?)(,\s*)(.*?)(,\s*)(.*?)(\);)(prism_tag_code8)/g,"$1rgb$4c$6c$8$10");

env.code = env.element.textContent;
});

/*=== Prism Highlight後処理 ===*/
Prism.hooks.add('after-highlight', function (env) {
/* マーキング指示間のPrism付与<span>~</span>を削除 */
var after = env.highlightedCode.replace(/(prism_tag_code[1-3])(.*?)(<span.*?>)(.*?)(<\/span>)(.*?)(prism_tag_code9)/gm,"$1$2$4$6$7");
while(env.highlightedCode != after){
env.highlightedCode = after;
after = after.replace(/(prism_tag_code[1-3])(.*?)(<span.*?>)(.*?)(<\/span>)(.*?)(prism_tag_code9)/gm,"$1$2$4$6$7");
}
env.highlightedCode = after;

/* マーキング指示間でPrism付与<span>のみの時に<span>を後方配置 */
after = after.replace(/(prism_tag_code[1-3])(.*?)(<span.*?>)(.*?)(prism_tag_code9)/gm,"$1$2$4$5$3");
while(env.highlightedCode != after){
env.highlightedCode = after;
after = after.replace(/(prism_tag_code[1-3])(.*)(<span.*?>)(.*?)(prism_tag_code9)/gm,"$1$2$4$5$3");
}
env.highlightedCode = after;

/* マーキング指示間でPrism付与</span>のみの時に</span>を後方配置 */
after = after.replace(/(prism_tag_code[1-3])(.*?)(<\/span>)(.*?)(prism_tag_code9)/gm,"$1$2$4$5$3");
while(env.highlightedCode != after){
env.highlightedCode = after;
after = after.replace(/(prism_tag_code[1-3])(.*?)(<\/span>)(.*?)(prism_tag_code9)/gm,"$1$2$4$5$3");
}
env.highlightedCode = after;

/* マーキング機能<span style>での#xxxxxxとrgb(d,d,d);の色指定方法復帰 */
env.highlightedCode = env.highlightedCode.replace(/(prism_tag_code[2-3])(sharp)(.*?)(prism_tag_code8)/gm,"$1#$3$4").replace(/(prism_tag_code[2-3]rgb)(.*?)(c)(.*?)(c)(.*?)(prism_tag_code8)/gm,"$1($2,$4,$6);$7");

/* マーキング機能の<span class>と<span style>の復帰 */
env.highlightedCode = env.highlightedCode.replace(/(prism_tag_code1)(.*?)(prism_tag_code8)/gm,"<span class=\"$2\">").replace(/(prism_tag_code2)(.*?)(prism_tag_code8)/gm,"<span style=\"color:$2\">").replace(/(prism_tag_code3)(.*?)(prism_tag_code8)/gm,"<span style=\"background-color:$2\">").replace(/prism_tag_code9/gm,"</span>");

env.element.innerHTML = env.highlightedCode;
});


「FC2ブログ自動改行対応」改の説明。


 そもそもinnerTextはIE4.0以降に搭載された独自機能ということで、公に規格化されたものではないのですが、FireFoxを除くその他のブラウザでは対応できているということです。
 それとGoogle Chromeだと大丈夫なんですが、IEだと改行に続く空白部分が削除され、全て左詰めで表示されていました。

 一方、元々Prism.jsで用いられているtextContentはW3C(ブラウザーやサーバー技術標準化の推進団体)で標準化されているプロパティということもあり、今後の事を考えるとinnerTextではなくtextContentを用いた方が望ましいと考えました。

 ちなみにtextContentの方は、今度はIEが対応できていないという話でしたが、少なくとも僕が持っているIE11では正常に動作しているようです。

 というわけで元のtextContentを使う方法でスクリプトを組み直してみました。

/*=== Prism Highlight前処理 ===*/
Prism.hooks.add('before-highlight', function (env) {
/* 自動改行<br>をLineFeedに置換 */
env.element.innerHTML = env.element.innerHTML.replace(/<br>/g,"\n");
env.code = env.element.textContent;
});

 textContentから直接<br>タグをLFに置換しようとしたんですが、改行してくれなかったので、一度innerHTMLプロパティで置換するようにしています。
 ちなみにinnerHTMLはW3Cで標準化されている全ブラウザ対応のプロパティです。


標準的タグでのマーキングの説明。


 FC2ブログの編集画面の色パレットアイコンを使って、普通の記事作成のようにマーキングをやりたいですよね。

 ですが、Prism.jsの処理では、表示用に実態参照変換されていない通常タグは全て削除されてしまいます。

 そこで以下の手順で<span class=""><span style="">タグを反映できるようにしました。

 (1)ハイライト処理前に各タグを一度前回のような専用コードに変換します。
 (2)ハイライト処理後に特殊コードから各タグに戻します。

 …手順というほどのものではありませんね。

 ではまず(1)の部分のコードから。
/*=== Prism Highlight前処理 ===*/
Prism.hooks.add('before-highlight', function (env) {

/* マーキング機能の<span class><span style>を特殊コード列に置換 */
env.element.innerHTML = env.element.innerHTML
.replace(/(<span\sclass=")(.*?)(">)/g,"prism_tag_code1$2prism_tag_code8")
.replace(/(<span\sstyle="color:)(.*?)(">)/g,"prism_tag_code2$2prism_tag_code8")
.replace(/(<span\sstyle="background-color:)(.*?)(">)/g,"prism_tag_code3$2prism_tag_code8")
.replace(/<\/span>/g,"prism_tag_code9");

/* マーキング機能<span style>での#xxxxxxとrgb(d,d,d);の色指定特殊コード列化 */
env.element.innerHTML = env.element.innerHTML
.replace(/(prism_tag_code[2-3])(#)(.*?)(prism_tag_code8)/g,"$1sharp$3$4")
.replace(/(prism_tag_code[2-3])(\s*rgb\()(\s*)(.*?)(,\s*)(.*?)(,\s*)(.*?)(\);)(prism_tag_code8)/g,"$1rgb$4c$6c$8$10");

env.code = env.element.textContent;
});

 グチャグチャしておりますが、先程の改行コード置換処理と同じようにinnerHTMLプロパティを使って、ハイライト処理前にタグを専用コードに置換しています。

 ポイントは、:=;,などの記号はPrism.jsでハイライト処理されてしまいますので、その部分も考慮した上で専用コード化しているところですね。

 またFC2ブログの高機能拡張エディタで着色すると、#色番号でなくてRGB値指定になるので、その両方に対応できるようにちょっと工夫しています。



 次に(2)の部分のコード。
/*=== Prism Highlight後処理 ===*/
Prism.hooks.add('after-highlight', function (env) {

/* マーキング機能<span style>での#xxxxxxとrgb(d,d,d);の色指定方法復帰 */
env.highlightedCode = env.highlightedCode
.replace(/(prism_tag_code[2-3])(sharp)(.*?)(prism_tag_code8)/gm,"$1#$3$4")
.replace(/(prism_tag_code[2-3]rgb)(.*?)(c)(.*?)(c)(.*?)(prism_tag_code8)/gm,"$1($2,$4,$6);$7");

/* マーキング機能の<span class>と<span style>の復帰 */
env.highlightedCode = env.highlightedCode
.replace(/(prism_tag_code1)(.*?)(prism_tag_code8)/gm,"<span class=\"$2\">")
.replace(/(prism_tag_code2)(.*?)(prism_tag_code8)/gm,"<span style=\"color:$2\">")
.replace(/(prism_tag_code3)(.*?)(prism_tag_code8)/gm,"<span style=\"background-color:$2\">").replace(/prism_tag_code9/gm,"</span>");

env.element.innerHTML = env.highlightedCode;
});

 今後はハイライト処理後に、先にstyle定義での#色番号とRGB値指定部分を元に戻してから、専用コード部分を再構築するようにしています。


カスタムマーキング範囲ハイライト処理無効化の説明。


 これ前回もそうなんですが、マーキングの優先順位を上げようと思って、CSSで!important付けたりしたんですけど、ぜんっぜん効かないんですよね。

 んで。
 結局ハイライト処理でのクラス宣言を無くすことを考えたわけです。

 本来のアルゴリズム的には、ハイライト処理中のクラスセレクタで行うべきところなのですが、各言語毎にスクリプト処理を追加してあげる必要があったり、縮小版のPrism.jsだとドコを追加するか分かりづらかったりするんですよ。

 ですんで。
 ハイライト処理後にカスタムマーキング範囲内のクラス宣言を片っ端から削除して歩く。
 という力技でムリヤリ対処しちゃいました。

/*=== Prism Highlight後処理 ===*/
Prism.hooks.add('after-highlight', function (env) {

/* マーキング指示間のPrism付与<span>~</span>を削除 */
var after = env.highlightedCode.replace(/(prism_tag_code[1-3])(.*?)(<span.*?>)(.*?)(<\/span>)(.*?)(prism_tag_code9)/gm,"$1$2$4$6$7");
while(env.highlightedCode != after){
env.highlightedCode = after;
after = after.replace(/(prism_tag_code[1-3])(.*?)(<span.*>)(.*?)(<\/span>)(.*?)(prism_tag_code9)/gm,"$1$2$4$6$7");
}
env.highlightedCode = after;

/* マーキング指示間でPrism付与<span>のみの時に<span>を後方配置 */
after = after.replace(/(prism_tag_code[1-3])(.*?)(<span.*>)(.*)(prism_tag_code9)/gm,"$1$2$4$5$3");
while(env.highlightedCode != after){
env.highlightedCode = after;
after = after.replace(/(prism_tag_code[1-3])(.*?)(<span.*>)(.*)(prism_tag_code9)/gm,"$1$2$4$5$3");
}
env.highlightedCode = after;

/* マーキング指示間でPrism付与</span>のみの時に</span>を後方配置 */
after = after.replace(/(prism_tag_code[1-3])(.*?)(<\/span>)(.*)(prism_tag_code9)/gm,"$1$2$4$5$3");
while(env.highlightedCode != after){
env.highlightedCode = after;
after = after.replace(/(prism_tag_code[1-3])(.*?)(<\/span>)(.*)(prism_tag_code9)/gm,"$1$2$4$5$3");
}
env.highlightedCode = after;

env.element.innerHTML = env.highlightedCode;
});

 ハイライト処理内外にまたがる形でマーキング指示すると、<span>や</span>が取り残されちゃいますんで、それをマーキング範囲後方にヨッコイショするようにしているのでコードが長めになっています。


カスタムマーキングの使い方。


 <span class="">~</span>のクラス宣言については、その都度コードに追記してもらうとして。
 <span stylle="">~</span>のスタイル宣言については、FC2ブログの編集画面のパレットアイコンからやってもらうのが一番楽だと思います。

 例えば高機能拡張エディタを使って、こんな感じで着色すれば。

Prismカスタムマーキング実施例

 コード部分も同じように変わってくれます。
.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%; /* ピンの横位置 */
}

<注意1>
 ただコメント部分などを除いて、行を跨いでのカスタムマーキングはできないので、複数行に渡ってマーキングしたい場合は、1行ずつマーキングするようにしてください。

<注意2>
 1行目の先頭からカスタムマーキングする時には高機能拡張エディタを使わないようにしてください。
 <code>の前に<span style>タグが入ってしまい正しく表示されなくなります。


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


 「ブレンド・S」から日向 夏帆(ひなた・かほ)ちゃんです。

アニメ「ブレンド・S」公式サイト

「まんがタイムきららキャラット」連載中の「ブレンド・S」がアニメ化!
ツンデレ・妹などなど、店員さんのいろんな「属性」が楽しめる喫茶店で、新人アルバイトの苺香が店長にリクエストされたのはなんと「ドS」キャラ!?一生懸命働くうちに、意外と「ドS」の才能が開花してしまい…


 麻冬さんとのお勉強会は、夏帆ちゃん回みたいな感じでとっても良かったです。
 どちらかというと麻冬さん回だったのかもしれませんが・・・

 この作品のヒロインも、線や塗り分けがハッキリしているのでぬりぬりしやすいですね。
 中でも夏帆ちゃんは表情豊かですし、そもそも金髪ツインテという僕のドストライク属性ですからね。
 ただ胸はあまり強調しなくても良かったかなという気がしますけど。

 「宝石の国」ダイヤモンドの絵をキャプチャーしてあるんですが、その画像を眺めては閉じを繰り返しています。
 やってみなきゃ始まらないのは確かなんですが、どうやって塗っていこうか悩んでしまいます。
 大雑把な塗り分けだけして、後は雰囲気で…といければいいのですが、フォスがあんな感じだったこともあり、どうもうまく行く気がしません。

Javascriptブレンド・S日向夏帆

13 Comments

mochi  

こちらこそお力になれずすみませんでした。 m(*- -*)mス・スイマセーン

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

> ブログスペースを余計に使ってしまっていて申し訳ございません m(_ _)m

 いえいえ。こういったやり取りも、見に来た人には貴重な情報ですからお気になさらずに。


> でも「カスタムJavaScript使って何かさせる」ような動作ことをやろうとすると「ん? なんでこうなる?」ってキョトンとさせられることがけっこう起きるんです(笑)
> そこで解決方法をググったりすると情報がマチマチで (^_^; アハハ…
> それもしかも利用サーバー(レンタルサーバー)によっても解決方法が違っていた経験もしてます(爆)
> けっこう標準じゃないんですよ(笑)

 ぼっちんさんのお仕事の大変さが伝わってくるようなお話ですね。
 昔のWindows3.xを思い出してしまいます。 ^^;
 FC2ブログをはじめとする無料ブログサービスの存在の有難さを痛感します。


> では、mochiさん苦心のカスタムマーキングでPrism.jsの動作が停止したままになっているとか? (^^;; アセアセ

 はい。親を凍りつかせてしまう爆弾子プロセスを作ってしまったみたいです。ヾ(・・ )ォィォィ


> では、スッパリと諦めます ^^
> 多大なお時間を使わせてしまってほんとに申し訳ございませんでした。
> どうもありがとうございました m(_ _)m

 ぼっちんさんの方こそ何日も掛けさせて挑戦していただいたのに、
 全然役に立てないどころか、いい加減なアドバイスでかえって余分な手間をとらせてしまって・・・
 本当にごめんなさい。 m(*T▽T*)m オ、オユルシヲ・・・

 きっと、僕もぼっちんさんもWordPressとの相性が悪いんですね。ヾ(・・ )ォィォィ
 もしくはFC2ブログとの相性が良すぎるのかも・・・ (〃ω〃) キャァ♪

 ではでは。ゆっくりと静養してください。 (^ー゚)ノ

2018/01/09 (Tue) 16:01 |  REPLY |   

ぼっちん  

引き続きお騒がせ致します(笑)

mochiさん、こんにちは ^^
ブログスペースを余計に使ってしまっていて申し訳ございません m(_ _)m

WordPressって最近みんな使っているので簡単に使えるものだと思っていました。
いえ、単に記事を書くだけや画像を貼り付けるとかのブログ的利用でしたらけっこう使いやすいのは確かなんです(笑)
でも「カスタムJavaScript使って何かさせる」ような動作ことをやろうとすると「ん? なんでこうなる?」ってキョトンとさせられることがけっこう起きるんです(笑)
そこで解決方法をググったりすると情報がマチマチで (^_^; アハハ…

それもしかも利用サーバー(レンタルサーバー)によっても解決方法が違っていた経験もしてます(爆)
けっこう標準じゃないんですよ(笑)

その間、ぼっちんさんのところと似たような感じに見えるように思います。
 https://freebsd.sing.ne.jp/ymo/12/04/04.html

あっ ほんとですねぇ、ここは異様に重たくて表示遅延が起きてますけど、表示前の見え方はそっくりですねぇ(爆)
では、mochiさん苦心のカスタムマーキングでPrism.jsの動作が停止したままになっているとか? (^^;; アセアセ

 と注意書きされているんですが、僕のPrism.jsだと<pre><code>と同じ行から書き始めないと、
 1行目が空白行になっちゃうんですよね。
 やっぱり動作環境によって振る舞いが違ってくるんでしょうか。


そうそう、因みに
/* 自動改行<br>をLineFeedに置換 */
env.element.innerHTML = env.element.innerHTML.replace(/<br>/g,"\n");
部分を排除しても、IEやFirefoxでもキチンとPrism表示は出来ておりました(笑)

どうも私の中でFC2ブログとの比較が頭にこびり付きつつ作業しちゃってるもんですから「こうなる筈」がならなくて「なんやこれ!」って混乱しちゃうんですよね (^_^; アハハ…

じゃあ、WordPressでのPrismカスタムマーキングは諦めますかねぇ (^^ゞポリポリ
mochiさんにこれ以上お手間をお掛けしてしまうのも心苦しいですし。

では、スッパリと諦めます ^^
多大なお時間を使わせてしまってほんとに申し訳ございませんでした。
どうもありがとうございました m(_ _)m

2018/01/09 (Tue) 14:15 | EDIT |  REPLY |   

mochi  

おつかれさまです。 ^^

 おはようございます。ぼっちんさん。

> 昨日は1日ずっとWordPressでのPrism.js関連を夢中になって弄くってましたら、もうヘトヘトになってしまって (^_^; アハハ…
> (1)(2)とも試してみましたが残念ながら変化なしです δ(⌒~⌒ι)とほほ...

 いやはやなんともお疲れ様でございます。
 WordPressって最近みんな使っているので簡単に使えるものだと思っていました。

 処理が干渉しているというよりも、Prism.js自体が動いていない状態なのでは?

 下のブログを見てみるとPrismが動作するまで少し時間が掛かっているのですが、
 その間、ぼっちんさんのところと似たような感じに見えるように思います。
 https://freebsd.sing.ne.jp/ymo/12/04/04.html

 カスタムマーキングが効いているように見えているのは、
 単に<span style="">タグが普通にHTMLとして動作しているだけとか?

 GoogleChromeのデベロッパーツールで構文エラーが出ちゃってるとか?
 追加したコードの最期が});でちゃんと閉じられていないとか?

 もうなんというか、ぼっちんさんが既に確認してきているであろうことぐらいしか思いつかないです。^^;

 あぁそうだ。ちなみに上のブログでは最初に
 「きちんとプラグインをダウンロードしたら、下記の手順をふまなくても改行の調整ができている」
 と注意書きされているんですが、僕のPrism.jsだと<pre><code>と同じ行から書き始めないと、
 1行目が空白行になっちゃうんですよね。
 やっぱり動作環境によって振る舞いが違ってくるんでしょうか。


> mochiさんに、私のサーバーでWordPressと専用FTPを用意して一定期間でもお貸しすることも出来る(笑)んですけど、いま空いてる所持ドメインがない(全部利用中)がないものですから、mochiさんがもし独自ドメイン所持なさっていて空いてるものがありましたらと思う次第なんですけど(笑)

 いやいや。僕のこと買いかぶりすぎです。
 知識レベルはあくまでもFC2ブログの趣味レベルなんで、
 サーバーとか専用FTPとか言われても、どう扱っていいのか分からないですよ。 ^^;

2018/01/09 (Tue) 11:31 |  REPLY |   

ぼっちん  

おはようございます ^^

mochiさん、わざわざの鍵コメご連絡をありがとうございました ^^
昨日は1日ずっとWordPressでのPrism.js関連を夢中になって弄くってましたら、もうヘトヘトになってしまって (^_^; アハハ…

(1)(2)とも試してみましたが残念ながら変化なしです δ(⌒~⌒ι)とほほ...

mochiさんに、私のサーバーでWordPressと専用FTPを用意して一定期間でもお貸しすることも出来る(笑)んですけど、いま空いてる所持ドメインがない(全部利用中)がないものですから、mochiさんがもし独自ドメイン所持なさっていて空いてるものがありましたらと思う次第なんですけど(笑)

2018/01/09 (Tue) 08:50 | EDIT |  REPLY |   

mochi  

Line-numbersと干渉しているみたいです。

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

 今日は出勤日だったのでお返事が遅れてしまいました。

 前回メールいただいたコレですが、
 /*=== Prism Highlight後処理 ===*/以降を外した(削除)ところ
 https://blog-imgs-118.fc2.com/o/o/p/oops0011/2018-01-07_16-43-55-comp.png


 先程FC2ブログで同じようにスプリクトを削除して実行したところ、
 同様にprism_tag_code9はハイライト処理されていました。
 どうやら改行云々は関係なかったようです。ごめんなさい。 ヾ(^-^;) ゴメンゴメン

 つまり/*=== Prism Highlight後処理 ===*/以前までは、
 WordPressでも正常に動作しているようです。

> 私、以前にもお試し的にWordPressを設置していろいろと弄くったことがあったんですが、FC2ブログで動いてるスクリプトがWordPress上では動かないと言うものがいくつもあって「WordPressってなんか使いにくいねぇ」って感じで放りだしてたんですよね (^^ゞポリポリ
>


 JavaScript自体はブラウザが実行しているものだと認識しているので、
 JavaScriptの構文自体は問題ないように思えます。

 /*=== Prism Highlight後処理 ===*/では、
 Prism.hooks.add('after-highlight',…)でハイライト処理後のフックを追加して、
 Prism本体でハイライト処理された<span>タグの移動や、
 カスタムマーキング用コードの復帰を行っています。

 FC2ブログとWordPressではフック起動の順序が異なるなどの理由で、
 この処理より前にLine-numbersの処理が行われ、
 その後のカスタムマーキング用の処理で行番号や背景を、
 壊してしまっているのではないかと想像しています。 
 
 フックの起動順となると、コチラでコントロールできる範疇でないので、
 う~ん・・・となってしまうわけですが、何かやれることがあるとすれば、
 思いつくのは以下の2点ぐらいです。

 1.line-numberのプラグインの前にカスタムマーキングのスクリプトを入れてみる。

 2./*=== Prism Highlight後処理 ===*/のPrism.hooks.addの起動フックを、
   after-highlight⇒before-insertに変えてみる。

 2についてはFC2ブログで試してみましたが、普通に動作できました。
 まぁ元々正常動作していたので良くなるのかは分かりませんが比較的変更はしやすいかと…

 "after-highlight"と"before-insert"のタイミングの違いを調べてみても、
 詳しいことまでは分からなかったんですが、
 ニュアンス的にはafter-highlightよりも前に起動するんじゃないかと思います。

2018/01/08 (Mon) 21:11 |  REPLY |   

ぼっちん  

おはようございます

私、以前にもお試し的にWordPressを設置していろいろと弄くったことがあったんですが、FC2ブログで動いてるスクリプトがWordPress上では動かないと言うものがいくつもあって「WordPressってなんか使いにくいねぇ」って感じで放りだしてたんですよね (^^ゞポリポリ

さて、仰るように
env.element.innerHTML = env.element.innerHTML.replace(/<\/p>/g,"\n");
のみ追記してみたんですけど結果は変化なしで、白に近いグレー背景のままです(^^;; アセアセ

(~ヘ~;)ウーン 疲れました (^_^; アハハ…

2018/01/08 (Mon) 08:31 | EDIT |  REPLY |   

mochi  

改行が悪さをしているみたいですね。

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

デバック作業お疲れ様です。 (・o・)ゞ

カスタムマーキングでの</span>を表す「prism_tag_code9」が着色されちゃっている箇所が2箇所ありますね。
いずれもprism_tag_code9に続いて次行先頭から.blogcard-xxでクラスセレクタしているところです。

おそらくWordPressのエディタでは改行コードではなく、</p>タグのみで改行されているんだろうと思います。
結果としてprism_tag_code9.blogcard-xxの連続したものとしてhighlightされてしまっているんじゃないかと…

追加したコードの最初のところで、下記青文字の行を追加してみてもらえますか?

/*=== Prism Highlight前処理 ===*/
Prism.hooks.add('before-highlight', function (env) {
/* 自動改行<br>をLineFeedに置換 */
env.element.innerHTML = env.element.innerHTML.replace(/<br>/g,"\n");
env.element.innerHTML = env.element.innerHTML.replace(/<\/p>/g,"\n");


でも、これについてはFC2ブログのHTMLタグのみの時も同じように思えるんですが、
なぜかFC2ブログではちゃんと表示されているんですよね。
FC2ブログの場合、<pre>タグの中ではエディタ画面上のLF改行コードが生きているとか?
じゃあWordpressではどうやってソースコードの改行ができているのか…?

なんとも謎は深まるばかりです。

2018/01/07 (Sun) 20:21 |  REPLY |   

ぼっちん  

また続きです(爆)

Prismのプラグインを「line-highlight と line-numbers」だけにしてみましたが、症状は変わらずでしたからプラグインが原因ではない様子です (^^;; アセアセ

そして、修正部分のいろいろを弄くってる内に
/*=== Prism Highlight後処理 ===*/
以降を外した(削除)ところ
https://blog-imgs-118.fc2.com/o/o/p/oops0011/2018-01-07_16-43-55-comp.png
こんな表示になったんです。
どうやらWordPressではHighlight処理が関わってる感じですねぇ。

2018/01/07 (Sun) 17:08 | EDIT |  REPLY |   

ぼっちん  

報告の続きです(笑)

そうですそうです「コメント部分だけをカスタムマーキング」しただけです (^^ゞポリポリ
そして、テーマは「Coy」でもまったく同じ症状になってしまうんです (^_^; アハハ…
やっぱり何かぶつかってますよねぇ。

いま高校女子サッカー決勝(激闘でしたよぉ 藤枝順心2-0 3回目の優勝)観戦からPC前に戻りました(笑)から、いろいろと問題点を探ってみます (^_^)ニコニコ

2018/01/07 (Sun) 16:18 | EDIT |  REPLY |   

mochi  

な、な、な…なんじゃこりゃ!! <(゚ロ゚;)>ノォオオオオオ!!

こんにちは。ぼっちんさん。 (*^-^)ニコ

> デフォルトのCSSが反映されなくなったんですが、mochiさん修正のマーキングは正常に機能していることが分かります。
> デフォルトのハイライトや背景色や文字色が正常表示されれば問題なくWordPressでも利用出来ますね ^^

 「デフォルトのハイライトや背景色や文字色が正常表示されれば」って… ヾ(・・;)ォィォィ
 このままじゃ使い物にならないじゃないですかぁ!?

 これはコメント部分だけカスタムマーキングをしたんですかね?
 それとも何もカスタムマーキングしないでこんな状態なんでしょうか。

 他のPrismのプラグインと干渉しちゃってるのかもしれませんね。
 僕の方のプラグイン環境は「Line Highlight」「Line Numbers」の2つです。
 (ただ実際にLine Highlightを使ってみたことはありませんが・・・・)
 テーマはたぶん関係ないと思いますが、「COY」を使ってます。

 奮闘を祈ります。 (^-^)ゝ

2018/01/07 (Sun) 13:46 |  REPLY |   

ぼっちん  

WordPressで、、、

mochiさん、こんにちは~ ^^

昨日早速WordPressにPrism設置しまして、デフォルトでは問題なく表示された(PrismのThemesはOkaidia)
https://blog-imgs-118.fc2.com/o/o/p/oops0011/2018-01-07_09-14-48-comp.png
のを確認してから、こちらの修正をprism.jsに追記して表示を見ましたら
https://blog-imgs-118.fc2.com/o/o/p/oops0011/2018-01-07_09-16-35-comp.png
こんな具合になりました (^_^; アハハ…
デフォルトのCSSが反映されなくなったんですが、mochiさん修正のマーキングは正常に機能していることが分かります。
デフォルトのハイライトや背景色や文字色が正常表示されれば問題なくWordPressでも利用出来ますね ^^

とりあえずの報告でした~ (^^ゞポリポリ

2018/01/07 (Sun) 11:17 | EDIT |  REPLY |   

mochi  

Re: 完璧です ^^

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

> mochiさん、早速丸々コピペさせて戴いてテストしてみましたが、もうもう完璧な仕上がりですよ~♪

 もう。あまり褒めないでくださいよぉ。
 まぁでも使っているうちに色々不具合も出てくるかもしれないですしね。
 Prismは事前処理・事後処理のカスタマイズもできるように作られているので素晴らしいです。
 ユーザーによっていくらでも進化していきそうな楽しみがあります。 o(^o^)o ワクワク 
 僕がやった手法もいろんな応用が利きそうですしね。

> 前回の部分では、私の環境ではIEだけ一行表示になりまして、Firefoxでは問題はなかったんですけど、この修正版ではIEもFirefox 57.0.4でもしっかりPrism表示がされました ^^

 自動改行のやつはあのようなサイトに乗っていたので最初安心してたんですが、
 いろいろ調べていくと…おや?って感じでして… (・・*)ゞ ポリポリ
 まぁでもコレについては沢山勉強することができました。

> 過日ちょっとテスト的にXserverでWordPressを仮設置しましてブログのお友達のスクリプト動作テストしてみたんですが、せっかくWordPressも設置したことだし、mochiさんのこの改造版Prism.jsをそのWordPressスペースにも使えるようにテストしてみたいと思います (^_^)ニコニコ 
> いやぁ、嬉しいですねぇ、いつもいつもほんとにありがとうございます m(_ _)m

 せっかく作ったものなので、ぜひぜひ活用してくださいまし。 m(._.)m

 キッカケは、ぼっちんさんのPrism紹介記事だったんですよね。
 それによって僕も色々遊ばしてもらうことができたわけですから、
 こちらこそ ぼっちんさんに感謝です。

 また面白そうなものを見つけたらブログで紹介してくださいね。 (^ー゚)ノ


2018/01/06 (Sat) 16:16 |  REPLY |   

ぼっちん  

完璧です ^^

mochiさん、早速丸々コピペさせて戴いてテストしてみましたが、もうもう完璧な仕上がりですよ~♪

前回の部分では、私の環境ではIEだけ一行表示になりまして、Firefoxでは問題はなかったんですけど、この修正版ではIEもFirefox 57.0.4でもしっかりPrism表示がされました ^^
いやぁ、これからの記事で使わせて戴くのにo(^o^)o ワクワクしてしまいます(笑)

過日ちょっとテスト的にXserverでWordPressを仮設置しましてブログのお友達のスクリプト動作テストしてみたんですが、せっかくWordPressも設置したことだし、mochiさんのこの改造版Prism.jsをそのWordPressスペースにも使えるようにテストしてみたいと思います (^_^)ニコニコ 

いやぁ、嬉しいですねぇ、いつもいつもほんとにありがとうございます m(_ _)m

2018/01/06 (Sat) 11:04 | EDIT |  REPLY |   

Post a comment