WordPressでプラグインのみでシンタックスハイライトを導入する

WordPressで有料ブログサービスのように技術的なことに時間を割かずに記事を書くにはどうしたらいいか考えています。

今回の方法もテーマをイジる必要はなく、管理画面から完結できる方法で紹介します。

使うプラグインとライブラリ

を使用します。プラグインはWPの管理画面から検索してインストールすることができ、ハイライトのJSはCDNで公開されているので準備は一切不要です。

設定をする

プラグインの設定からヘッダにコードを挿入できるので下記のようにして追加します。このサンプルはmolokaiを使用しています。面倒なんでみんなmolokai使っとくといいです。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/highlight.js@master/src/styles/monokai-sublime.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

pre 要素のデザインをmolokaiに合わせるなら追加でこんなCSSをヘッダに追加すると良いでしょう。

<style>
pre {
  padding: 10px;
  background-color: rgb(35, 36, 31);
  color: #fff;
  font-size: 11px
}
</style>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA