https://8fd9c3c3.blog-1xe.pages.dev/tags/prismjs/ Recent content in Prismjs on ashitaka blog Hugo ja-jp Sat, 18 Apr 2020 02:02:43 +0900 https://8fd9c3c3.blog-1xe.pages.dev/2020/04/18/prismjs/ Sat, 18 Apr 2020 02:02:43 +0900 https://8fd9c3c3.blog-1xe.pages.dev/2020/04/18/prismjs/ <p>久しぶりにテーマを更新したらPrism.jsが消えちゃってたのでいれなおしました。参考にしたのは以下のサイトです。</p> <blockquote> <p>WordPressでPrism.jsを使いコードのシンタックスハイライトを行う方法 <a href="https://stupiddog.jp/note/archives/718">https://stupiddog.jp/note/archives/718</a></p></blockquote> <h2 id="prismjsのダウンロード">Prism.jsのダウンロード</h2> <p><a href="https://prismjs.com/download.html">https://prismjs.com/download.html</a>に行って自分の好みのjsとcssをダウンロードします。僕は以下のように設定しました。</p> <pre tabindex="0"><code>themes=prism-tomorrow&amp;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&amp;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 </code></pre><p>やり過ぎた感あります。</p> <h2 id="wordpress内に配置">WordPress内に配置</h2> <p>最初適当に配置してヘッダーいじればいいやと思って、Cyberduck繋いでうろちょろしてたんですが, WordPressが提供している方法があるそうです。以下のディレクトリに配置しました</p> <ul> <li><code>/public_html/wp-content/themes/baskerville/js/prism.js</code></li> <li><code>/public_html/wp-content/themes/baskerville/prism.css</code></li> </ul> <p>cssはディレクトリがなかったのでbaskerville直下に入れてみました。</p> <h2 id="ヘッダーで読み込む">ヘッダーで読み込む</h2> <p><code>public_html/wp-content/themes/baskerville/functions.php</code>のファイルに追記しました。</p> <pre tabindex="0"><code> /* --------------------------------------------------------------------------------------------- For Prism (2020/4/18, Takaaki Sawa) --------------------------------------------------------------------------------------------- */ function my_enqueue_scripts() { $theme_uri = get_template_directory_uri(); wp_enqueue_script( &#39;prism-js&#39;, $theme_uri . &#39;/js/prism.js&#39;, array(&#39;jquery&#39;), false, true ); wp_enqueue_style( &#39;prism-css&#39;, $theme_uri . &#39;/prism.css&#39;); } add_action( &#39;wp_enqueue_scripts&#39;, &#39;my_enqueue_scripts&#39; ); </code></pre><h2 id="最後に">最後に</h2> <p>ってな感じです。ブログ書くのってめんどくさいですね。</p>