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

MarsEditは、OS Xで動作する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

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/styles/default.min.css">

footer.php

<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/highlight.min.js"></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 src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></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をご覧いただくとして、ここではポイントだけ解説します。

  • 事前にjQueryを読み込む
  • <pre><code>XXXX</code></pre>で囲まれたすべてのブロックに対して、highlightBlockを適用する
  • 1000ms秒(1秒)置きに、highlightBlockを適用する

setTimeoutを使用することで、プレビュー画面を1秒置きにリフレッシュし、その都度スタイルを適用することができます。1秒間隔が短すぎると感じた場合には、値を変えることも可能です。setTimeoutを使用して、繰り返しプレビュー画面をリフレッシュさせることがポイントです。

これで、リアルタイムにプレビュー画面にシンタックスハイライトを適用することができます。「highlight.js」以外のシンタックスハイライターを使用している場合も、setTimeoutを使用することで同様の機能を実現することができます。

参考リンク

highlight.js

A comprehensive bugfix release. This is one of the best things about highlight.js: even boring things keep getting better (even if slow).

MarsEdit: Preview with SyntaxHighlighter

I’ve recently been trying out the MarsEdit blog editor. One issue I’ve run into is that SyntaxHighlighter doesn’t work with the preview feature because the page in the preview window only gets loaded once. Fortunately there is a workaround. A typical SyntaxHighlighter configuration will look similar to the code fragment below.

この記事が気に入ったら
いいね ! しよう

Twitter で