プラグインなし!シンタックスハイライトPrism.jsの使い方|WordPress

今回はWordPressに、プラグインを使わずにシンタックスハイライトを実装する方法をご紹介します。

Webサイトやブログサイトなどにソースコードを表示させる場合に、シンタックスハイライトを使うことが多いと思います。

当サイトではいろいろ試した結果「Prism.js」を採用しました。

理由としては、下記のとおりです。

  • 軽い
  • 取り扱い言語が多い
  • 柔軟性がある(様々なカスタマイズが可能)
  • 実装が簡単
  • 実装に時間がかからない

CDNでサーバー負荷を軽減する方法もありますが、カスタマイズ性を考慮し今回はダウンロード編を説明させていただきます。

prism.jsのダウンロード

ダウンロードページへ

下記がダウンロード公式サイトになります。

サイトを開いたらdownloadボタンを押してダウンロードページに進んでください。

圧縮ファイルか非圧縮ファイルかの選択

圧縮ファイルか非圧縮ファイルかの選択をします。

特にコードを触る予定がなければ、軽いので圧縮ファイルを選択します。

テーマ(シンタックスハイライトの外観)を選択

テーマ(シンタックスハイライトの外観)を選択します。

「Default」「Dark」「Funky」「Okaidia」「Twilight」「Coy」「Solarized Light」の7種類があり、画面右側の円ボタンを押してページ下部を見ると実際の表示の見た目が確認できます。

当サイトでは視認性が良いことから「Okaidia」を採用しています。

使用言語の選択

シンタックスハイライトで表示させたい言語を選択します。

選択が多いほどファイルサイズも増え重くなるので、使用しそうなものを絞って選択すると良いと思います。

最初から選択されている「Markup」はHTML用です。

プラグインの選択

シンタックスハイライトに機能を追加するプラグインを選びます。

リンク先にそれぞれ説明書きがありますので、必要な機能にチェックを入れます。

「Line Numbers」は行番号を追加するためのプラグインで、おすすめ機能のひとつです。

ファイルのダウンロード

カスタマイズしたデータの容量の確認と、シンタックスハイライトの外観を確認しましたらデータをダウンロードしてください。

javascriptとcssそれぞれダウンロードが必要です。

prism.jsの設置

ファイルの設置

ダウンロードしたjsとcssのファイルを使用しているテーマのディレクトリにアップロードしてください。

そしてprism.jsを使用するために、これらのjsとcssを読み込ませます。

すべてのページで読み込ませたい場合

headタグ内に読み込む記述を追加します。

例は、下記を参照してください。

※パスはそれぞれの設置場所に変更してください。

/* 全ページ読み込み */
<head>
<script src="https://frecer.com/wp-content/themes/frecer/prism.js"></script>
<link rel="stylesheet" href="https://frecer.com/wp-content/themes/frecer/prism.css">
</head>

特定カテゴリーページでのみ読み込ませたい場合

すべてのページに読み込ませるとレンダリングなどの影響でページ表示速度が落ちます。

それらを防ぐために、条件分岐で特定のカテゴリーのみに読み込ませたい場合は下記のように記述すると良いと思います。

使用テーマのfunctions.phpファイルに記述します。

※パスはそれぞれの設置場所に変更してください。

/* 特定のカテゴリーページ(例:カテゴリーID:1,2,3)限定読み込み */
function meta_headcustomtags() {
  if( in_category( array( 1,2,3 ) ) ) {
$headcustomtag = <<<EOM
<script src="https://frecer.com/wp-content/themes/frecer/prism.js"></script>
<link rel="stylesheet" href="https://frecer.com/wp-content/themes/frecer/prism.css">
EOM;
echo $headcustomtag;
}
}
add_action( 'wp_head', 'meta_headcustomtags', 99);

prism.jsの使い方

コードを表示させる方法

表示したいコードをpreタグとcodeタグで囲みます。

codeタグにはclass=”language-使用する言語名”の指定が必要です。

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

HTMLのソースを表示する場合はcodeタグにclass=”language-markup”を指定します。

HTMLの場合は他と違いそのままではなくmarkupになるので注意してください。

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

cssのソースを表示する場合はcodeタグにclass=”language-css”を指定。といった具合です。

<pre>
 <code class="language-css">
 h1 { font-size:30px; }
 </code>
</pre>

行番号を表示させる方法

プラグインで「line-numbers」を選択します。

preタグにclass=”line-numbers”を指定することで行番号が表示されます。

<pre class="line-numbers">
	<code class="language-言語名">
	表示したいソース
	</code>
</pre>

コード記載の注意点

コードを表示するためにはそのままの記載では表示されません。

実体参照変換が必要になります。

html内でタグをそのまま書くとタグだと認識してしまうので変換が必要ということです。

「<」は「<」、「>」を「>」に変換する必要があるということです。

下記のようなサイトを利用しソースコードを変換してください。

まとめ

今回はプラグインを使わずに、シンタックスハイライト(Prism.js)の実装を説明しました。

数ある中でPrism.jsは、軽さ、多様性、柔軟性どれを取っても頭ひとつ出た感じで優秀です。

更にWordPress内で条件分岐なども組み合わせて使えばより快適な環境を構築することができます。

もし宜しければ参考にされてください。

ご覧いただきありがとうございました。

Web Wordpress コード

リンクの書き換えを省く方法。WordPress

複数のWordpressサイトを構築していると、複製する際に「URLを書き換える」という作業が面倒という問題に直面します。 この問題を未然に解決するためには下記のコードがおすすめです。 テーマの「fu...

続きを見る

Web Wordpress コード プラグインなし

プラグインなし!SEO施策機能を導入する方法。|WordPress

WordPressで、プラグインを使わずに施策機能を導入する方法をご紹介致します。 プラグイン不使用には、サーバー負荷の軽減やサイト表示速度の保持など様々なメリットがあります。 WordPressには...

続きを見る

Web Wordpress コード スピード プラグインなし

プラグインなし!シンタックスハイライトPrism.jsの使い方|WordPress

今回はWordPressに、プラグインを使わずにシンタックスハイライトを実装する方法をご紹介します。 Webサイトやブログサイトなどにソースコードを表示させる場合に、シンタックスハイライトを使うことが...

3 コメント

続きを見る

植物

アガベ ビクトリア レジーナ 笹の雪 Agave victoriae-reginae ‘Sasanoyuki’

1. 基本情報1.1. 学名1.2. 和名1.3. 科名1.4. 属名1.5. 種名1.6. 原産国1.7. 自生地1.8. 形態1.9. 成木1.10. 耐寒性1.11. 耐暑性1.12. 日照1....

続きを見る

Web Wordpress コード スピード

コンタクトフォーム7(Contact Form 7)指定ページのみjsとcssを読み込ませる方法。|WordPress

WordPressで、プラグインを使わずにContactForm7のjsとcssを指定ページのみ読み込ませる方法をご紹介します。 通常ContactForm7を導入すると、すべてのページでjsとcss...

続きを見る

NGO ニュース

非政府団体「Frecer NGO」を設立しました。

本日、非政府団体「Frecer NGO」を設立しました。 地域、国内外にこだわらず地球全体の問題解決に取り組みながら、人類の成長、前進を目的としています。 目前には様々な問題、課題など山積みですが、そ...

続きを見る

Web Wordpress コード セキュリティ

wp-config.phpへのアクセスを禁止する方法。WordPress

wp-config.phpへのアクセスを禁止するとサイトのセキュリティが向上します。 Webサイトを保守するために、是非参考にされてみてください。 「.htaccess」ファイルに下記コードを記述して...

続きを見る

Web Woocommerce Wordpress コード プラグインなし

プラグインなし!Woocommerce のマイアカウントページに任意の項目だけ表示させる方法。

Woocommerceのマイアカウントページの項目は扱う商品やそのサイトによって異なります。 例えば「ダッシュボード」項目と「ダウンロード」項目を非表示にさせたい場合は下記のようにすると実現できます。...

続きを見る

Web Wordpress コード プラグインなし

プラグインなし!コピペで3分超簡単!ダークモードの実装方法。WordPress

ダークモードをWordPressに実装します。プラグインは必要ありません。 1. 1.JavaScriptの記述2. 2.Cssの記述3. 3.HTMLの記述 1.JavaScriptの記述 ヘッダー...

続きを見る

アニメ

2024年春アニメ放送後人気ランキング。

【第10位】変人のサラダボウル 【第9位】夜のクラゲは泳げない 【第8位】ザ・ファブル 【第7位】忘却バッテリー 【第6位】この素晴らしい世界に祝福を!3 【第5位】終末トレインどこへいく? 【第4位...

続きを見る

One thought on “プラグインなし!シンタックスハイライトPrism.jsの使い方|WordPress

コメントを残す

本サイトは、皆様に快適な閲覧をご提供させていただくためにcookieを使用しています。cookieの使用に同意しますか?