prism.js 自分用メモ | ソースコード内部のhtmlマークアップを残す

html

Prism.jsは軽くて便利

Prismをシンタックスハイライトに導入してから快適に使っています。このサイトでは、highlight.jsというのを最初に導入しましたが、どちらの使い勝手もほぼ同じです。

軽いとうわさのhighlight.jsをTwenty Fifteenに導入、ソースコードを綺麗に表示
[2015/11/21]追記1:インラインコードにもハイライト表示を適用したくなったので、そのための設定方法を追加しました。 [2016/...

特に変えた理由はないんですが、どちらもWordPressのプラグインではなく、軽くてインストールも簡単なので、シンタックスハイライトのWordPressプラグインが重いという方にはオススメです。

prism.jsに切り替えた主夫
変えた理由は見た目だけです。はい highlight.jsでも充分に満足していたのですが、なんとなく変えてみました。prism.jsの...

prismに変えて良かったと思った点は、インラインで使う場合に、特に設定が必要ないことです。後は、プラグインによる追加機能が豊富なことでしょうか?

ここから自分用メモ

  • コード内部(<pre><code>…</code></pre>)のhtmlマークアップを残すには「Keep Markup」プラグインが必要。デフォルト(Keep Markup無し)だと、あらゆるhtmlタグが消える
  • フォントサイズ変更は2箇所。pre単独のタグと、not(pre) > codeタグ(インライン用)。

前回ちょっと手を加えた時も同じ所でつまずいた気がするので、自分用メモ。特に「Keep Markup」は穴でした。フォントサイズ変更するタグを間違えると、行番号のフォントサイズが本文のそれと比べて異常に小さくなり、行番号と本文がズレまくって焦りました。

なんでhtmlタグを残したいかと言うと、こんな感じのコードを時々書くからです。

func functionName(parameters) -> return type {
    statements
}

一般的な定義みたいなソースを書く場合、その一般固有名詞を枠で囲みたいのですが、デフォルトのprismだとコレが効かなくなります。もっといい方法があるかもしれないが、解決したのでこれで良し。

スポンサーリンク
広告1
広告1

シェアする

フォローする