FC2ブログでPrism.jsを使うにはここに注意が必要です

2017年12月02日
8
0
便利なアプリ

先日、ブログ友達から『 いま使ってる SyntaxHighlighter よりも Prism.js の方が軽いみたいだから替えようと思ってるんですけど、なんか変なんですよね~ 』ってメールがあったんです。
SyntaxHighlighter も Prism.js も、ブログやサイト上にHTMLやCSS等のソースコードを見やすく表示出来るスクリプトなんです。

その「変!」って言うのは、複数行のソースコードが一行表示になってしまうと言うんです (^_^; アハハ…

こんな風にです(爆)
私は「そんなバカなぁ(笑)」なんて思いつつも、彼女のWeb知識力から言えば「設定のどこかでミスってる筈もないし、なんだろね?」とも思っていたんですね (^^ゞポリポリ

実は私も以前より SyntaxHighlighter を使っておりまして、そろそろ「 Prism.js 」の設定でもしてみようかな?って思っていた矢先ではあったんです。

私が勝手に「Web知識の師」と仰いでおります Akira先生(いま現在このブログで利用しておりますレスポンシブテンプレートの作者さん) が ↓ このブログカードの記事の中で採用なさっていて、SyntaxHighlighter のような表示ストレスを感じることなくパッと表示されていたものですから「 おっ これは良いねぇ♪ 」って使いたくなっていたんです(笑)

コピペで使える見出しデザインいろいろ - カスタマイズ

見出しの 装飾 CSSをいくつかご紹介しようと思います。 私の製作したテンプレートについては各専用記事を必ず用意していますが、仕様表に 固有機能 という欄があり、そこに 見出しデザイン と書かれているものに...

でも、なかなかその研究(笑)時間が取れなくて「いつかやろう」って思っていたところでした。

今回早速テンプレートに「 Prism.js 」を設定して表示テスト記事を下書きに書いてプレビューしてみたら、やっぱり一行表示になってしまったじゃありませんか(爆)
『 な! なんじゃこりゃ? 』って焦りました (^_^; アハハ…

そういえばAkira先生が、上記ブログカードの記事での私へのコメント返信で

超うろ覚えだけども、JS内容とCSS内容にいくつか難点があったのでカスタマイズしてあります。
JSのどこかを変更したんですよね。
それがどこでなにが行けなかったのか思い出せない… ( ̄∀ ̄;)

こんなふうに仰っていたのを思い出しました (^_^; アハハ…
ですから私は勝手に『 あっ なんだぁ、Akira先生が言われてたカスタマイズってこれのことかぁ、、、
どこか弄らないとFC2ブログではまともな表示にならないんだぁ δ(⌒~⌒ι)とほほ... 』
って難問さを「勘違い察知」しちゃったのでした(爆) そう、これは私の勝手な勘違い (^^ゞポリポリ

そして、一行になってしまう原因を探るべく「 Prism.jsをFC2ブログで使うためのカスタマイズ 」なんて検索しまくったんでした(笑)
でも、そんな情報は何処にも見つかりません (^^ゞポリポリ
それどころか、FC2ブログでの Prism.js に関する記事が殆ど見つからないんです、こりゃどうしたことか  (^^;; アセ

見つからない訳です(笑)

Prism.js で一行表示になってしまう原因は、、、

『 旧投稿画面の記事編集欄 』の下の方にあります

改行の扱い 』 の設定を [ HTMLタグのみ ] に設定して
記事全文をHTMLタグ打ちで書く
必要があったんです(笑)

まぁ、考えてみれば当然のことなんですけど、 Prism.js 以外の、例えば今まで利用してました SyntaxHighlighter や他の同様ソース表示スクリプトですと [ 自動改行 ] 設定でも問題はなく表示出来ておりましたから、この Prism.js をFC2ブログで利用する時はここが注意点ってことになりますね。

Akira先生が言われてました 「 JS内容とCSS内容にいくつか難点があったのでカスタマイズしてあります。 」 には関わらないことでした(笑)
この部分に関しては私の早とちりだったんです(爆)
ただ、機能的・表示的に、確かにカスタマイズしたくなる部分は存在してまして、自分の好みにCSS等を弄くる必要はあるように感じました。

FC2ブログでは改行設定を [ 自動改行 ] 設定で記事を書いているブロガーさんが多いでしょうから、もしかして「どうして一行になってしまうのか?」が分からずに Prism.js の利用を諦めてしまっている人も居るのかもしれませんね (^^;; アセ

かく言う私も必要な時だけ [ HTMLタグのみ ] の設定です(爆)
いやぁ、でも記事ページのHTMLソースを覗かれると、あまりのゴチャゴチャしたゴミだらけのみっともない状態(笑)に恥ずかしくなってしまいますから、これからはキチンとHTMLタグ打ちで記事を書きたいものです (^_^; アハハ…

なんちゃらかんちゃらなエディタツールは使うことなく原始力的に(爆)

[ 自動改行 ] 設定でいつも記事を書いている皆さん、是非一度はご自分の記事ページの記事部分のHTMLソースを覗いてみましょうね(爆)

さてさて、そんな次第で、記事冒頭の一行表示になってしまってましたCSS内容を Prism.js で正しく表示すると、サンプル的には、、、

 ■ 枠内をクリックで”全選択”されますからそれをコピーすると簡単です
/* Akira風ブログカード-gr設定 */
.blogcard-gr {
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  width: 600px; /* ブログカードの横幅設定 */
  margin: 0 auto; /* ブログカードのセンタリング設定 */
  margin-bottom: 30px;
  max-width: 100%;
  background:linear-gradient(rgba(28, 216, 210,0.5), rgba(147, 237, 199,0.3)); /* ブログカードの背景色設定 */
  border: 1px solid rgb(211,211,211);
  border-radius: 2px;
  box-shadow: 0 10px 6px -6px rgba(0,0,0,.1); /* ブログカード下の影の濃さ設定 */
  color: rgb(51,51,51); 
  padding: 10px;
}
.blogcard-gr:hover {
  background:linear-gradient(rgba(239, 50, 217,0.2), rgba(147, 237, 199,0.3)); /* ブログカードの背景色設定 */
  box-shadow: 0 10px 6px -6px rgba(0,0,0,.3); /* ブログカード下の影の濃さ設定 */ 
}
/* 引用 */
.blogcard-gr blockquote {
  margin: 0;
  border: 0;
  padding: 0;
  position: static;
  background-color: transparent; /* 初期背景色キャンセル */
}
.blogcard-gr blockquote:before,
.blogcard-gr blockquote:after {
  content: none; /* 引用符非表示コード */
}

こんな表示になるのでした ヽ(^^ ) ヨシヨシ

さて、肝心の Prism.js の設定方法 については、とても解りやすく解説をしてくださっているFC2ブロガーさんがおられますから

ほんっとにはじめてのHTML5とCSS3:(ちょっとメモ)Prism の使い方(SyntaxHighlighterから乗り換えた)

本サイトの シンタックスハイライターを Prism(プリズム)に乗り換えました。 これまで SyntaxHighlighter 3.0.83 を使っていましたが、順次差し替える予定です。...

こちらの記事を是非ご参照ください、私はこちらの記事で設定完了出来たんでした (^。^;)ホッ
筆者(yuki★hata)様、ほんとに解りやすかったです、ありがとうございました♪

そうそう、Prism.js で欲を言えば、ソースコード中のコメント部分に /* ブログカードの横幅設定 */ こんな具合に任意の色付けが出来るともっと使い勝手が楽しく解りやすくなるんですけど。
暗に「どなたかその方法を開発してくださ~い」って言ってるんですけどね (≧ω≦。)プププ

■ 追記: 2017/12/10

[ 自動改行 ] 設定のまま でも Prism.js が正しく表示出来る方法を mochiさん が記事にしてくださいました ^^
また、筆者が望んでおりました「ソースコード中のコメント文のカラー化」の方法も開発公開してくださっております。

Prism.jsに【FC2ブログ自動改行対応】と【カスタムマーキング機能】を追加してみました。 | 富士宮で貯蓄と資産運用

Prism.jsを改造するためにワタシは修羅になります!! Prism.jsとFC2ブログの自動改行 先日ぼっちんさんのブログで「Prism.js」という、ソースコード表示スクリプトが紹介されていました。FC2ブログでPrism.jsを使うにはここに注意が必要です...

上記記事を是非にご参照ください ^^
素晴らしい情報を公開してくださった mochiさん に感謝申し上げます (^-^)//""パチパチパチ~♪


検索からの方は
トップページへもどうぞ


関連記事
ぼっちん

Comments 8

There are no comments yet.

mochi  

どんどん深みにハマりそう ^^;

こんにちは。ぼっちんさん。
mochiです。

これ軽そうでいいですね。
プラグインもいろいろあって楽しめそうですし。
なんだかんだでどんどん重くなっていっちゃいそうですけど… ^^;

コメント部分の色変更はprism.cssで各属性毎に色指定しているところがあるので、それを弄ればいけそうな感じがしています。
.token.comment, ←コレだけ独立して色指定すれば…?
.token.prolog,
.token.doctype,
.token.cdata {
color: slategray;
}

僕的には"Keep-markup"っていう部分的にハイライト表示できるプラグインが気になっていますが、もう少しカラフルに表現したいなぁって感じです。

でも実際にコードを読もうする人は極少数で、
ほとんどの人はコピペで済ませちゃったりするんで、
こだわりの世界になっちゃうんですけどね。

だからこそ際限なくハマっていってしまう部分もあるわけですが… ^^;

2017/12/03 (Sun) 13:21

ぼっちん  

mochiさんへ

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

mochiさんがこの記事読んでくださって、カードリンク先まで訪問なさってたのは察知してましたよ~(笑)
私も今朝からいろいろと弄くってます (≧ω≦。)プププ
まだSyntaxHighlighterも置いたままになってますけど「これなら全部Prism.jsに置き換えようかなぁ」って、いまその気になりつつあります(笑)

コメント部分の色変更はprism.cssで各属性毎に色指定しているところがあるので、それを弄ればいけそうな感じがしています。
.token.comment, ←コレだけ独立して色指定すれば…?

おっと(笑) 目の付け所は同じですねぇ(笑)
もっと楽な方法ってないのかな?
任意時に複数色設定出来る方法はないのかな?
なんて欲張ってるんですけどね (^_^; アハハ…

でも実際にコードを読もうする人は極少数で、
ほとんどの人はコピペで済ませちゃったりするんで、
こだわりの世界になっちゃうんですけどね。

(笑)マネしたいだけの人は当然コピペだけで終わってしまうんですけど、解説したい側(笑)としてはやっぱり「解りやすく」を考えるもんですから「色づけして見やすく」を機能追加したくなるんですよね(笑)

だからこそ際限なくハマっていってしまう部分もあるわけですが… ^^;
(〃^▽^〃)oあはははっ♪ 同じですよ~ でもそれがまた楽しくてなんですよね(爆)

2017/12/03 (Sun) 13:58

ジュレ  

お久しぶりです。

Prism.jsですか!これはよさそうですね。
当ブログ(別ブログ)でどうなるか試してみたいです。

当ブログ(本ブログ、別ブログ共)では
highlight.jsの行番号プラグインが表示されないのですが、
改行コードが問題らしく情報が少なくて苦労しました。

また、
別ブログではエスケープした文字を含むコードが
うまく表示されないのです。

記事編集用にエディタが問題らしくこの辺はわたしには
さっぱり分かりません。

根本的な解決?にはなっていませんが、
インラインフレームで表示しています。

紹介が遅くなりましたが、
別のブログを開設いたしました。

あまりオープンにするつもりはなく、
ひっそりとしたブログにしたいと思っています。

たまに覗いてくだされば幸いです。

2017/12/04 (Mon) 02:15

ぼっちん  

ジュレさんへ

ジュレさん、コメントをありがとうございます ^^

Prism.jsですか!これはよさそうですね。
当ブログ(別ブログ)でどうなるか試してみたいです。

あのですね、Prism.jsの表示の軽さに「おおっ♪」って感嘆しちゃって、いろいろと調べてるうちに、かなりフレキシブルにカスタマイズが出来そうって思ったもんですから、のめり込みそうです(笑)
今までもいろいろなタイプのシンタックスハイライトスクリプト使ったんですけど、何か一番良さそうな予感がしてるんですよね(笑)

highlight.jsの行番号プラグインが表示されないのですが、
改行コードが問題らしく情報が少なくて苦労しました。

あっ 同じです (^^ゞポリポリ
私もその情報不足さに閉口しちゃって、途中で諦めました (^_^; アハハ…
一時は「行番号なんて要らないじゃん」なんて思ってはみたんですけど、やっぱり物足りなくて(笑)
行番号なしだったら、なにもスクリプト使う必要もないしって思ったり (^_^; アハハ…

インラインフレームで表示しています。
そうですそうです、それも1つの手なんですけど、それだと2元管理しなくちゃですから、気持ち的に心地よくないんですよね。

紹介が遅くなりましたが、
別のブログを開設いたしました。

ハーイ(^O^")/ 弊ブログのサイドバーにあります「livedoor 相互RSS」で更新を検知(笑)させて戴いてまして、先日来より新ブログも読み逃げさせて戴いてたんですよ~(笑)
わざわざのお知らせをありがとうございます ^^

Prism.jsのチャレンジ、楽しみながら頑張ってくださいね~♪

2017/12/04 (Mon) 11:42

ジュレ  

おはようございます

CafeNoteにてPrism.jsのテストをして頂きまして
ありがとうございます♪感激してしまいました♪
貴重なお時間を使ってテストして下さり
本当に感謝の気持ちでいっぱいです。
ありがとうございます。

ブログプログラム自体の改良が必要なようですが、
この辺は作者のKENT氏にゆだねるしかなさそうです。

さて、
Prism.jsはコピー機能もついているのですね。

highlight.jsにはこの機能は付いていませんし、
プラグインも見当たらないので、
別のJavaScriptでクリップボードにコピーボタンを
設置しようかと思っています。

2017/12/06 (Wed) 04:33

ぼっちん  

ジュレさんへ

ジュレさん、おはようございます ^^

CafeNoteにてPrism.jsのテストをして頂きまして
ありがとうございます♪感激してしまいました♪

いえいえ、CafeNote自体への興味もあったもんですから、同時にテストしてみました ^^

ブログプログラム自体の改良が必要なようですが、
この辺は作者のKENT氏にゆだねるしかなさそうです。

Kentさん、いろいろとご自身のCGIを改版発表されることがありますから、ダメもとでリクエストしてみては如何でしょうか?
もう今の時代に XHTML1.0 ではいろいろとなんですからねぇ(^^;; アセ
それも1つの手かと思いますよ(笑)

Prism.jsはコピー機能もついているのですね。
この記事内で使っております「全文選択」機能は、この記事を書く発端となりましたお友達(笑)の要望でオリジナルで作ったスクリプトなんです、とってもミニなんですけどちゃんと機能してます(爆)
Prism.jsには、元々クリップボードへの一発コピーする機能があるんです。
枠内にマウスホバーすると、右上隅に「Copy」って楕円形のボタンが表示されるんですけど、それで一発コピーが出来ますから、それを利用する方がほんとはスマートなんですよ(笑)
ただ、そのボタンの表示位置などにちょっと難があったりして、位置の移動をしたりするカスタマイズ作業が必要になったりする場合もありましてね (^_^; アハハ…

highlight.jsにはこの機能は付いていませんし、
プラグインも見当たらないので、
別のJavaScriptでクリップボードにコピーボタンを
設置しようかと思っています。

全文選択してからのコピーでよろしかったら、私のを差し上げますよ(笑)
SyntaxHighlighterでは機能しなかったですけど、highlight.jsなら使えると思うんですけどテストはしてありません (^^ゞポリポリ
まぁ、クリップボードへの一発コピー用のスクリプトもネット上にきっとあるでしょうけど(笑)

2017/12/06 (Wed) 08:00

ジュレ  

おはようございます。

ハイライトされたソースをコピーするにあたり、
ヒントをありがとうございます。

コードをクリックでコピー、スマートな方法だと思います。
わたしはボタンクリックの事しか頭にありませんでした(-_-;)

インラインフレームはボタンクリック、
普通に記事内はコードをクリックにしたいと思います。
統一するのがよいですが、
せっかくボタンを作ってもったいないので使います。

さて、highlight.jsでは、改行を“br”に置き換える
オプションがある事を発見いたしました。

わたしのブログ(さくらのブログ)で確認したところ、
表示されなかった行番号が表示されます。
その他のブログでも通用するかもしれません。

2017/12/12 (Tue) 05:34

ぼっちん  

ジュレさんへ

ジュレさん、おはようございます ^^

インラインフレームはボタンクリック、
普通に記事内はコードをクリックにしたいと思います。
統一するのがよいですが、
せっかくボタンを作ってもったいないので使います。

いま拝見して来ました~ や~ 素晴らしいですねぇ「クリップボードへの一発コピー」テク (^_^)ニコニコ 
まぁ、どっちも使い分けで良いですよね~(笑)
私もマネさせてもらおうかな~(笑)

さて、highlight.jsでは、改行を“br”に置き換える
オプションがある事を発見いたしました。
わたしのブログ(さくらのブログ)で確認したところ、
表示されなかった行番号が表示されます。

w(゜o゜)w オオー! そんなオプションがあったんですね~。
私は「一目でhighlight.jsを諦めちゃった」(笑)から、それ以上は研究することもなかったですよ (^_^; アハハ…
ジュレさんのその熱心な追求・探究心って感服しちゃいます (^-^)//""パチパチパチ~

2017/12/12 (Tue) 09:42

Leave a reply