WordPressにPrismを導入[ オプション編 ]

0
contrail

前回、ブログっぽさのグレードを増すために
コード表示の見栄えが良くなる Prism.js(シンタックスハイライト)を導入したので、
このサイトで使用した「Plugins(オプション機能)」の設定です。

対応可能な言語(Languages)も多かったけれど、
追加機能の「Plugins」も豊富ですもんねー♪
このサイトで使用しているのは…

  • Line Numbers(行番号)
  • Line Highlight(指定の行をハイライト)
  • Normalize Whitespace(余分なインデントを削除)
  • Unescaped markup(エスケープ処理)
  • Toolbar(言語名やボタンのスペース確保)
  • Show Language(言語名を表示)
  • Copy to Clipboard Button(コピーボタン)

Line Numbers

ソースコードの左側に行番号がつきます。

指定の方法は、
classに「line-numbers」を指定します。

Line Highlight

注目してほしい行をハイライトできるようになります。

指定の方法は…

ちなみに、ハイライトのCSSはこんな感じで指定されてるので、
調整したい場合は後からのCSSで上書きすればOKですよ♪

Normalize Whitespace

余分なインデントやスペースを削除してくれます。
デフォルトでONになってる4つの機能はコレ。

  • remove-trailing(行末尾の空白を削除)
  • remove-indent(余分なインデントを削除)
  • left-trim(先頭からホワイトスペースを削除)
  • right-trim(下部から空白を削除)

んで、上記の4つの機能の他に、
デフォルトではOFFになっている追加機能があります。

  • break-lines(長い行を一定の長さで改行)
  • indent(各行にタブを追加)
  • remove-initial-line-feed(先頭から改行を1つ削除)
  • tabs-to-spaces(タブを特定の数のスペースに変換)
  • spaces-to-tabs(指定数のスペースをタブに変換)

この初期ではOFFになってる機能を利用したい場合、
毎回 <pre> タグに追記するのも面倒なので、
javascriptで一括指定してあげれば楽になりますよ。

prism.js より後に読み込ませればOK♪

Unescaped markup

htmlタグのエスケープ処理をしてくれます。
この機能の利用方法は2通りあって、
まず1つ目は <script type=”text/plain”> で囲む。

やっぱり html なんだから <pre> タグで囲みたいってときは、
htmlのコメントタグ「<!–」で表示コードを囲んであげるのが2つ目。

コメントタグで囲む2つ目の方法をすでに利用しているので、
上記の <!– は全角だけれど実際は半角です。。。

2つ目のコメントタグで囲む場合の注意点は、
ソースコード内でのコメントタグ(<!–)使用はNGとなります。
それと <code> と <!– はピッタリくっつけないと反応しません。
スペースとかダメですよ〜。

Toolbar(Show Language + Copy to Clipboard Button)

ボタンの「Show Language」や「Copy to Clipboard Button」を選択すると、
連動してこの「Toolbar」もチェックされる親要素的なものです。

もしかしたら選んだテーマで変わるかもしれないけれど、
Toolbarが生成するhtmlはこんな感じでしたよ。
見栄えでCSSを適用するときの参考に。

使っているバージョンは「Prism 1.29.0」で
テーマは「Tomorrow Night」のときのhtmlです。

WordPressのバージョンUPで仕様が変わったときに
ガッチリ作り込んでいると苦労するから(苦笑)、
記事部分(Post)はシンプルにするって方針だったけれどね。。。
シンタックスハイライトの便利さに負けました♪♪

ちなみに…
WordPressの <pre> タグには「wp-block-code」が自動でつくから、
CSSクラスで指定すればフォントや背景色も変更できるっぽい感じ。

まぁ、あんまりカスタマイズが過ぎると
バージョンUPのときに苦労するかも(笑)。

RELATED ITEMs
色数は少ないほうがかっこいい!
色数は少ないほうがかっこいい!

ソシム( 2022.11 )

amazon
0

RELATED POSTs

SELECT ITEMs [ AMAZON ]

audible

COMMENTs 0

コメントを残す

・メールアドレスは非公開です
・htmlタグは使えません
・URLは無効となります
・name と comment( * )は必須です