MarsEditのプレビュー画面で、「highlight.js」のシンタックスハイライトをリアルタイムでプレビューする

MarsEdit は、macOS で動作する WordPress や MovableType などの主要な CMS に対応しているエディターで、とくにリアルタイムプレビューや AppleScript との連携は非常に便利です。

弊サイトでも、過去にMarsEdit をより便利に高速に活用するためのスクリプト集や、Alfred と連携したWordPress の過去記事参照に！Alfred から記事を検索して MarsEdit に貼り付けられる「Paste link for MarsEdit with Alfred」など、数多くの便利スクリプトをご紹介しています。

さて、便利な MarsEdit ですが、1 点どうしても解消したい点がありました。それは、リアルタイムプレビューでソースコードのシンタックスハイライトを実現する、ということ。

シンタックスハイライトについては、弊サイトでは過去にご紹介した全スタイルのサンプル付き！動作が軽快なシンタックスハイライター「highlight.js」を使用していますが、JavaScript を使用しているためプレビューでのリアルタイムの描画は厳しいと思い込んでいたのですが、MarsEdit のプレビューは JavaScript の実行にも対応していたんですね。

「highlight.js」を MarsEdit のプレビューで使用する

MarsEdit に適用する前に、簡単に「highlight.js」の使い方をおさらいしましょう。

「highlight.js」の使い方の復習

ここでは、WordPress で「highlight.js」を使用する方法をご紹介します。導入方法は簡単です。WordPress のヘッダー（header.php）、フッター（footer.php）に、以下のコードを記述するだけです。

header.php

footer.php

</script>
<script>hljs.initHighlightingOnLoad();</script>

ページロード時に、<pre><code class="XXXX">YYYY</code></pre>で囲まれた箇所が自動的にシンタックスハイライトされるようになります。「XXXX」にはハイライトしたい言語（php、xml、c など）、「YYYY」にはソースコードを記述します。

MarsEdit のプレビュー画面でリアルタイムにシンタックスハイライトを適用する

では、MarsEdit のプレビュー画面で、「highlight.js」を使用してリアルタイムにシンタックスハイライトを適用するためにはどうすればよいでしょうか。hljs.initHighlightingOnLoad();は、ページロード時にのみ機能する API です。つまり、初回読み込み時にはシンタックスハイライトを適用することが可能なものの、リアルタイムにプレビューすることは不可能です。そこで、「highlight.js」が備えている別の API を使用することで実現します。

プレビューで、「highlight.js」を使用する前に、MarsEdit の環境設定で「Enable JavaScript」にチェックが入っていることを確認しておきましょう。

シンタックスハイライトが適用されていない状態が上図です。そこで、MarsEdit のプレビューのテンプレートに、以下を追記します。</body>タグの前に記述してください。

</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/highlight.min.js"></script>
<script>
  function refreshHighlighting() {
    $('pre code').each(function(i, block) {
      hljs.highlightBlock(block);
    });
    setTimeout("refreshHighlighting()", 1000);
  }
  refreshHighlighting();
</script>

API の詳細については、How to use highlight.jsをご覧いただくとして、ここではポイントだけ解説します。