wordpressで軽量なシンタックスハイライトを設定

2022年6月28日

ファイルをダウンロードする

下のサイトから「prism.css」と「prism.js」をダウンロードしてきます。
■https://prismjs.com/

ファイルをアップロードする

アップロードする階層はご自由ですが私は下記に設置しました。
通常は子テーマにアップロードしましょう。


ファイルの階層
    /home/xxx/www/xxx/wp-content/themes/luxech/lib/prism.css
    /home/xxx/www/xxx/wp-content/themes/luxech/lib/prism.js

ヘッダーに追記する

下のコードを子テーマのadd-header.phpに追記します。


<!--------------------Prismライブライの読み込み-------------------->
<link rel="stylesheet" type="text/css" href="/wp-content/themes/luxech/lib/prism.css" media="all" />
<script type="text/javascript" src="/wp-content/themes/luxech/lib/prism.js"></script>

スタイルシートに追記する

下のコードを子テーマのstyle.cssに追記します。


/* --------------------シンタックスハイライト一部打消し-------------------- */
pre[class*=language-]>code {
    border-left: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
}
.token.entity, .token.operator, .token.url, .token.variable {
    background: none !important;
}
/* --------------------シンタックスハイライト下の余白の幅を広げる-------------------- */
pre[class*="language-"] {
    padding-bottom: 38px !important;
}

記載の仕方

記載の仕方は下記のとおりです。


<pre><code class="language-markup">
    表示したいソースコード
</code></pre>

「<」は「&lt;」で表現し「>」は「&gt;」で表現するので覚えておきましょう。

YouTube

2022年6月28日