CodeCode

なんか色々おぼえ書き。だいたいweb制作関連。

WP Code Highlight.jsの導入

WP Code Highlight.js

ブログにコードを載せる時、ベタのテキストで書くよりちゃんとコードハイライトされてる方が読みやすい。
WordPressのブログでコードを載せる時にハイライトさせるプラグインを紹介します。

WP Code Highlight.js

プラグインの導入

WordPressの管理画面で、プラグインのページを開き WP Code Highlight.js を検索します。
検索結果に WP Code Highlight.js が表示されたら、導入するボタンをクリックします。

インストールが完了したら、有効化ボタンをクリックして有効にします。

設定

続いて、設定の WP Code Highlight.js ページに移動して WP Code Highlight.js の設定をしていきます。

読み込みは本家のCDNから行います。

コードをハイライトさせる際、

<pre><code></code></pre>

と打ってもいいのですが、毎回打つのは面倒なので、ショートコードの使用にチェックを入れます。

Save ボタンを押して設定は完了です。

投稿

投稿ページでコードを書く際は、

[code lang="言語名"] コード [/code]

と書くことでコードがハイライトされます。

ハイライトすると以下のようになります。

$('#btn').on('click', event =>{
   $(event.currentTarget).css('color', '#f00')
})
トップへ戻る