コードハイライトを行うhilightjsとMarkdownを併用したらあまり良くなかったので調整しました

このサイトではテーマにSimplicityを使っています。

Simplicity

内部SEO施策済みのシンプルな無料Wordpressテーマを公開しています。初心者でも出来る限り分かりやすく使えるように作成しました。

Simplicityでは標準でシンタックスハイライトを行うhighlight.jsが同梱されています。

highlight.js

The Internet's favorite JavaScript syntax highlighter supporting Node.js and the web.

設定画面からすごく簡単に使うことができます。

Simplicityでソースコードをハイライト表示する方法

Simplicity2.1.6からプラグインを使用せずとも、ソースコードをハイライト表示出来るようになりました。ソースコードのハイライト表示には、jQueryプラグインのhighlight.jsを利用しています。ハイライト機能追加は、以前か

またこのサイトではソースコードの記述にマークダウンを使っています。

WordPressのJetpackのマークダウンプラグインがすごく良さそうだったので翻訳しながらまとめました

jQuery('div#main').css('width', '100%');こんにちは。マークダウンって便利ですよね。マークダウンをもっと使いたいなって思っているのですがなかなか方言などもあって使いづらいな、と思っていました。WordP...

このマークダウン方言的にはGithub Flavored Markdown(gfm)に当たるようで、言語の指定はバッククォート3つのあとに指定できます。

これが<pre><code> </code></pre>で囲まれます。

こんな感じです。

このhighlight.jsの場合、preタグに言語の指定を行うらしく、そのままでは言語の指定がうまく効きませんでした。

下記の画像のうち、上のコードはpreタグにphp指定がありますが、下のコードではcodeタグでしか指定していません。

その為、言語の推定がbashになってしまい、ハイライトがうまく効いていません。

マークダウンで指定した言語はcodeタグ側についているので、これをpreタグに付けます。
この問題はJavascriptで解決させました。

下記のようなJavascriptファイルを読み込ませます。

/**
 * Created by yousan on 2017/08/06.
 */
(function ($) {
     jQuery('code').each(function (i, e) {
         var classname = jQuery(e).attr('class') || '';
         jQuery(e).parent('pre').addClass(classname);
     });
    jQuery('.entry-content pre').each(function(i, block) {
        hljs.highlightBlock(block);
    });

}(jQuery));

これで内側のcodeタグの言語指定のクラスが外側のpreタグにも付くようになりました。