韓国留学、ベルリン短期ワーホリ、転職、Webデザイン、英語勉強、旅行、食べ物、ディズニーなど

WordPressで記事にソースコードを載せる方法まとめ

WordPress

1、プラグイン「SyntaxHighlighter Evolved」

【使い方】
1, プラグインをインストール
2, 設定→SyntaxHighlighter Evolved から設定を行う。
3, 投稿の編集画面で、「テキスト」タブの方で、[*言語名*]ソースコード[/*言語名*]と書く。
※*言語名*のところは、html, css, js, php などと記載。
※その他、ハイライトする行を設定したり、コードボックスにcssのクラス名をつけたりするパラメータが設定できます。

【プレビュー】(設定でテーマをFade to Grayにしました)

【使ってみた感想】
便利だけど、選べるテーマが少なくて、気に入ったのがありませんでした。
あと、表示されるときに、一瞬、装飾がされていないコードが出て、そのあと装飾されたコードボックスになるところが気になりました。PCから見るなら問題ないけど、スマホから見たときや、ネット回線が重いときとか、大丈夫なのかな?と。

スポンサーリンク

2、プラグイン「Crayon Syntax Highlighter」

【使い方】
1, プラグインをインストール
2, 設定→Crayon から設定を行う。
3, 投稿の編集画面で、 「crayon」というボタンが追加されているので、そのボタンを押すと、挿入画面が表示される。そこにソースコードを記入。改めてここでも設定ができる。

【プレビュー】(設定でテーマをMonokaiにしました)

【使ってみた感想】
テーマもたくさんあるし、フォントサイズとかの設定も色々できるしわかりやすい!「SyntaxHighlighter Evolved」よりも表示が早い気がする!
ということで、結構良いかも!!と思いました。

3、highlight.js

プラグインを使わず、JavaScriptのライブラリを使います。軽量なのでプラグインを使うより表示速度が早いという利点があるようです。

【使い方】
1, header.phpの、内に、以下を記述。(2015.9.7現在)
※早速highlight.jsでソースコードを表示しています。

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.8.0/styles/*スタイル名*.min.css"/>

※*スタイル名*の部分には、highlight.js demoで、好きなスタイルを見つけて、記入します。私は、monokai_sublimeを使っています。

※上記のソースコードは、2015年9月7日現在の最新バージョン、version 8.8.0のソースコードです。最新版は、highlight.jsのサイトで確認してください。


highlight.jsのトップページで、「Get version 8.8.0(※2015.9.7現在)」をクリックして、ダウンロードページに行きます。


↑ダウンロードページの、「cdnjs」と書いてあるところのソースコードを使用します。

2, footer.phpの、body終了タグの直前に、以下を記述。

<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.8.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</body>

3, cssでスタイルを調整
codeタグは、「hljs」というクラス名が自動的に付くので、「hljs」というクラスに対して、フォントなどのスタイルを変更することができます。
私の場合は、以下のとおりスタイルを設定しました。

.hljs {
  font-family: monaco;
  line-height: 1.5em;
  font-size: 14px;
}

【注意点】
特殊文字の「<」、「>」、「&」は、「&lt;」、「&gt;」、「&amp;」に変更する必要があります。
また、<pre><code>の直後は、改行せずにコードを続けます。

【参考サイト】
ソースコードをシンプルきれいにハイライト!highlight.jsを使ってみた

【プレビュー】先ほどからずっと使っていますが、他と比較するため載せておきます。

.kiji p,
.page p {
  margin-bottom: 20px;
  line-height: 1.8em;
}

【使ってみた感想】
プラグインなしで、表示速度が速いというのが魅力的です。カラースタイルも沢山あるし、私は普段使っているエディタと同じ色で表示できるのが気に入っています。
ということで、今後highlight.jsを使うことにしました!

カスタマイズについては次の機会に記事にしたいと思います。

スポンサーリンク

コメント

  1. WordPressで記事にコードを表示させるならプラグイン「Crayon Syntax Highlighter」が便利

    […] WordPressで記事にソースコードを載せる方法まとめ – Mai Note […]

WordPressで記事にコードを表示させるならプラグイン「Crayon Syntax Highlighter」が便利 にコメントする コメントをキャンセル

内容をご確認の上、「送信」ボタンを押してください。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください