markItUp!のプレビューを設定する

jQueryで動作するJavascriptエディター、markItUp!でプレビューを有効にする設定です。

この記事はmarkItUp!でMarkdown形式を扱う設定紹介の一部です。

以降で紹介する記事中のパスやURLは、皆さんの環境に置き換えて設定してください。

markItUp!ではプレビューへの変換をJavascritpライブラリーで行ったり、サイトの変換URLに対し、Ajaxでリクエストしたりできます。今回はサイトの変換URLに対しPOSTし、PHPで書かれたMarkdownの変換ライブラリーで加工した結果を受け取るシナリオです。

PHPを利用する場合

フレームワークなどを利用せず、そのまま変換する場合は、次のようなコードになるでしょう。

<?php
    require_once 'path_to_markdown/markdown.php';

    echo Markdown($_POST['data']);

これを例えば、ドキュメントルートにpreview.phpという名前で保存します。

デフォルトではmarkItUp!からdataという名前で、テキストエリアへ入力中の文字列が送られてきます。それをPHP Markdownライブラリーを使用し変換し、送り返すだけです。

次に、この変換のためのURLをmarkItUp!に教えてあげます。markitup/sets/markdown/set.jsをエディターで開いてください。次に以下の一行を変更し、URIを指定します。

previewParserPath:  '/preview.php',

これで、プレビューが動作するようになります。

フレームワークを使用する場合

フレームワークを使用する場合、以下のようになります。当サイトでサポートしているLaravelの場合、以下のようにします。

まず、変換のためのルートを決めます。今回はmarkdownpreviewにしましょう。続いて、ルートを定義します。application/routes.phpをエディターで開きましょう。

Route::post('markdownpreview`, function () {
    require_once $path('app').'vendor/markdown/markdown.php';

    return Markdown(Input::get('data'));
});

フレームワークを使用せず、直接PHPを利用する場合と同様にmarkitup/sets/markdown/set.jsで、MarkdownからHTMLへ変換するURIを指定しましょう。

previewParserPath:  '/markdownpreview',

はいこれでおしまいです。プレビューボタンで、プレビューが表示されます。

プレビューにCSSを適用する

プレビューはiframeの中に表示されます。そのためのcssを指定する方法がありません。markItUp!はtemplatesというフォルダーにtemplate.htmlとtemplate.cssを用意していますが、これはJavascriptのライブラリーを使用して変換する場合に利用されるもののようで、今回のようにAjax活用で、サーバーサイドの変換時には適用されません。

サーバーサイドから送り返す内容は<body>と</body>の間に展開されます。この間にCSSを指定する<link>があってもレビュー程度の利用であれば問題はありません。そこで、送り返す内容の先頭にCSSの指定を入れましょう。

PHPを直接使用する場合：

echo `<link href="http://yoursite.com/css/template.css" media="all" type="text/css" rel="stylesheet">`.
Markdown($_POST['data']);

Laravelの場合：

    return
　　　　　HTML::style('css/template.css').
        Markdown(Input::get('data'));

当サイトの場合、コードハイライトをGoogle prettyprintで実現しています。これをプレビュー内で動作させるには、以下のようにします。

    return
　　　　　HTML::style('css/template.css').
        HTML::style('css/prittify.css').
        HTML::script('js/prettify.js').
        Markdown(Input::get('data')).
        '<script>'.
        'window.onload=function() { prettyPrint(); };'.
        '</script>';

prettyprintを動作させるCSSとJavascriptファイルを指定し、取り込まれた後で、prettyprintを実行するように設定します。

kore1server