表示書式の設定

Semantic UI に変える事で、css の書式についても変更が必要です。

CSSフレームワーク独自の css もあり、カスタマイズした css をどこまで適用するかを考えなくてはなりません。
いくつかあります。

• 文字サイズと行間・段落の高さ
• タイトルの文字飾り
• コードの枠
• 注釈の枠

Semantic UI のデザインは基本がシンプルなので、行間、段落については、直接 css で記述します。
タイトルの文字飾り、注釈の枠はMCEで使った css を適用します。
コードについては、Prism の css を同様に適用します。

Prism 適用時の注意点

サーバー側で処理していた時は問題ありませんでしたが、Ajax で動的に文章を読み込んで表示すると、うまく修飾されません。
最初、Semantic UI との相性かな？とも思ったのですが、よくよく考えると Prism が Javascript も使っているので、
DOM の動的な修正が認識されていないのだと気が付きました。
調べると、同様な記載を見つける事が出来ました。結果的にはDOM生成直後に、

Prism.highlightAll();

を実行すれば認識してくれます。
Prism のホームページでもサンプル的には記載されているのですが、気が付かないものです。
Prism に限らず、DOM の動的生成と jQuery を使ったライブラリを使う際は気を付けたい点です。

« 前頁

次頁 »