WordPress で Prism.js でコードを綺麗に表示

Blog

今までプラグイン系は表示が遅くなる印象があったので敬遠していたけれど、さすがに自分で見てもコードが見づらいので多少の改善のために Prism.js というのを導入して見た。

以前の <pre> よりはだいぶマシになった！

 

詳しくは以下のサイトが分かりやすく書いてありました。

ブログ書くの慣れている人はすごいなぁ。

WordPressでシンタックスハイライトならPrism.jsが軽量＆多機能でベストチョイス

Prism.js (公式)

 

表示サンプル

extension UIColor {
    func getLightBlue() -> UIColor {
        return UIColor(red: 0, green: 122 / 255, blue: 1, alpha: 1.0)
    }
    
    func createImageFromColor()->UIImage {
        let rect = CGRect(x: 0, y: 0, width: 1, height: 1)
        UIGraphicsBeginImageContext(rect.size)
        let context = UIGraphicsGetCurrentContext()
        context?.setFillColor(self.cgColor)
        context?.fill(rect)
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return image!
    }
}

 

Prism.js のサイトからダウンロードするときに以下の項目を選択しています。

  • Compression level
    • Minified version
  • Themes
    • Solarized Lighth
  • Language
    • Markup
    • CSS
    • C-Like
    • Swift
  • Plugins
    • Line Numbers
    • Show Language

導入前に選択させてファイルサイズを小さくするのは素晴らしい。頭いい。Web 系だとこういう選択肢も普通にあり得るのね。(よくよく考えたら Windows 系にも昔からあった。形骸化している気はするけど)

ダウンロード後は prism.js と prism.css で保存して、ターミナルから scp コマンドで運用しているサーバーにコピーして ssh でログインして、ファイルの配置やら functions.php の編集など。

functions.php はサーバー上で vim だと環境によっては、例えば日本語対応のテーマを使っている場合などは編集&保存後に文字コード変わることもあるので別のエディタでも。こうなると WordPress 側でうまく読み込めなくなるかもしれない。(編集内容は上記サイトが分かりやすく書いてます)

あと prism.css で最初に出てくる font-family の下の行に font-size: 85%; の行を追加して少し見やすくしています。CSS を編集して色々調整するときに、表示が変わらない場合はブラウザの履歴を消すなどして要再読み込み。

code[class*="language-"],
pre[class*="language-"] {
	color: #657b83; /* base00 */
	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
	font-size: 85%;

微妙に行番号がずれるので緩和策として以下の追記も必要やもしれない。

.line-numbers .line-numbers-rows {
        line-height: 1.75;

CSSとかさっぱりなので気休め程度の微調整までですが。

フォローする