【質問】シンタックスハイライター機能の行番号表示を選択できるようにする方法

  • K

    お世話になっております。

    ■やりたいこと
    シンタックスハイライター機能の行番号表示をユーザー側で指定できるようにしたい。

    ■やったこと
    ・シンタックスハイライトの機能を増やしたいと考え、Prism.jsの公式ページからprism.cssとprism.jsをダウンロードし、jin-childのcssフォルダとjsフォルダに配置。
    ・上記のファイルを読み込むため、jin-childのfunctions.phpに下記のコードを追記。

    //子テーマでPrism.js を読み込む
function load_prism_scripts() {
  $theme_uri = get_stylesheet_directory_uri();
  wp_enqueue_script( 'prism-js', $theme_uri . '/js/prism.js', array(), false, false );
  wp_enqueue_style( 'prism-css', $theme_uri . '/css/prism.css');
}
add_action( 'wp_enqueue_scripts', 'load_prism_scripts' );

    ・読み込まれていることは確認できたが、行番号が常に表示されるので調査したところ、JINの標準機能と競合していることを確認。
    ・JINの親テーマ側のjs/common.js内で下記の関数が定義されており、自動的にline-numbersクラスが付与されるためだと推測。

    //シンタックスハイライターの行番号クラスをつける
(function($){
	$(document).ready(function() {
		$('.cps-post-main-box pre').addClass('line-numbers');
	});
})(jQuery);

    親テーマは手を付けずに子テーマのみの編集で対応したいと考えています。
    解決策として下記が考えられたのですが、どこにどのようなコードを記載すれば正常に動作できるのかわかりませんでした。
    ①子テーマ側で親テーマの関数を無効化する。
    ②親テーマ側で自動で付与されたline-numbersクラスを一度削除し、記事内で付与したクラスのみを反映させる。

    当方、エンジニアのため多少プログラム関連のワードで説明いただいても問題ありません。
    お忙しいところ恐れ入りますが、よろしくお願いします。

    マニュアル確認済み
    キャッシュクリア済み
    WordPressのバージョン : 5.5.1
    ご利用のサーバー名 : Xserver
    PHPのバージョン : 7.4.4
    OS : macOS
    ご利用のブラウザ : Google Chrome
    該当サイトのURL : https://koheinishino.com/

    0