久しぶりにテーマを更新したらPrism.jsが消えちゃってたのでいれなおしました。参考にしたのは以下のサイトです。

WordPressでPrism.jsを使いコードのシンタックスハイライトを行う方法

https://stupiddog.jp/note/archives/718

Prism.jsのダウンロード

https://prismjs.com/download.htmlに行って自分の好みのjsとcssをダウンロードします。僕は以下のように設定しました。

themes=prism-tomorrow&languages=markup+css+clike+javascript+bash+c+cpp+cmake+css-extras+diff+django+git+go+haskell+http+java+javadoc+javadoclike+javastacktrace+jsdoc+js-templates+json+jsonp+json5+julia+kotlin+latex+makefile+markdown+markup-templating+nginx+perl+php+phpdoc+php-extras+python+r+jsx+tsx+ruby+rust+sqf+sql+swift+typescript+vim+yaml&plugins=line-highlight+line-numbers+show-invisibles+autolinker+wpd+custom-class+file-highlight+show-language+jsonp-highlight+highlight-keywords+remove-initial-line-feed+inline-color+previewers+autoloader+keep-markup+command-line+unescaped-markup+normalize-whitespace+data-uri-highlight+toolbar+copy-to-clipboard+download-button+match-braces+diff-highlight+filter-highlight-all+treeview

やり過ぎた感あります。

WordPress内に配置

最初適当に配置してヘッダーいじればいいやと思って、Cyberduck繋いでうろちょろしてたんですが, WordPressが提供している方法があるそうです。以下のディレクトリに配置しました

  • /public_html/wp-content/themes/baskerville/js/prism.js
  • /public_html/wp-content/themes/baskerville/prism.css

cssはディレクトリがなかったのでbaskerville直下に入れてみました。

ヘッダーで読み込む

public_html/wp-content/themes/baskerville/functions.phpのファイルに追記しました。


/* ---------------------------------------------------------------------------------------------
   For Prism (2020/4/18, Takaaki Sawa)
   --------------------------------------------------------------------------------------------- */
function my_enqueue_scripts() {
  $theme_uri = get_template_directory_uri();
  wp_enqueue_script( 'prism-js', $theme_uri . '/js/prism.js', array('jquery'), false, true );
  wp_enqueue_style( 'prism-css', $theme_uri . '/prism.css');
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );

最後に

ってな感じです。ブログ書くのってめんどくさいですね。