prism.jsをWordPressでつかう

軽量で拡張可能な構文ハイライトのprism.jsを WordPress に導入する。

https://prismjs.com/

通常はWordPressのfunctions.phpにprism.jsを追加しますが、簡単に追加、無効にできるようにWordPressのプラグインSimple Custom CSS and JSを使いprism.jsはCDNから取得します。

Simple Custom CSS and JSは利用中のテーマやプラグインのファイルを変更することなく、独自のhtml、CSSとJavascriptのコードを追加することができるWordPressプラグインです。

WordPressにSimple Custom CSS and JSを導入後、カスタム CSS & JSから カスタム htmlの追加

ここにCDNから取得したprism.jsを貼り付けます。

カスタム html にprism.js 追加

prism.jsはCDNのJSDelivrから取得します。

https://www.jsdelivr.com/package/npm/prismjs

prism.js本体とprism.jsのテーマは必須
prism.jsのプラグインprism-autoloader.jsもほぼ必須

各自、その他必要なプラグインを含めてSHOW & CONFIGURE ALL LINKS

HTML outputHTML output、Auto-optimization、Version aliasingを選択しファイルのurlをコピー

HTML output、Auto-optimization、Version aliasingを選択しファイルのurlをコピーし、WordPressのCustom htmlに追加。

prism.jsのハイライトを有効にするには<pre>か<code>のclassにlanguage-xxxxを追加。

WordPressのブロックエディターならコードブロックの追加 CSS クラスに language-xxxxを追加。


<pre class="language-html"><code>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism.min.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/plugins/line-highlight/prism-line-highlight.min.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/plugins/line-numbers/prism-line-numbers.min.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/plugins/command-line/prism-command-line.min.css"/>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/prism.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/plugins/autoloader/prism-autoloader.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/plugins/normalize-whitespace/prism-normalize-whitespace.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/plugins/line-highlight/prism-line-highlight.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/plugins/line-numbers/prism-line-numbers.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/plugins/command-line/prism-command-line.min.js"></script>
</pre></code>

便利プラグイン

  • Autoloader コードブロックを強調表示するために必要な言語を自動的にロード
  • Line Highlight 特定のコード行やコード行の範囲を強調表示
  • Line Numbers コード行の先頭に行番号を表示
  • Normalize Whitespace コードブロックの先頭と末尾の空白を削除などコードの空白を正規化

prism.js使用 サンプル

# bashサンプル
# ssh接続
ssh [email protected] -p 22
# パッケージの更新
sudo apt-get update && sudo apt-get upgrade -y
@echo batchサンプル
@echo 新しい空のファイルを作る
pushd "%~dp1"
type nul > "%~dpn1.txt"
.default {
    background-color: #e6e6e6;
    font-size: 1rem;
    color: #444;
}
#display-none {
    display: none !important;
}
a {
    color: #21759b;
}
お小遣い稼ぎならポイントサイトGetMoney!

コメントを残す