WordPressでPrism.jsを使ってシンタックスハイライトを行う方法
久しぶりにテーマを更新したら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' ); 最後に ってな感じです。ブログ書くのってめんどくさいですね。