軽量で拡張可能な構文ハイライトの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を貼り付けます。

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のハイライトを有効にするには<code>のclassにlanguage-xxxxを追加。

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

<pre><code class="language-html">
<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>

便利プラグイン

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;
}