JavascritpによるMarkdownエディター

markItUp!というjQueryベースのエディターがあります。これはMarkdownにも対応しています。

H1ボタンをクリックすると#を一つ入力してくれます。H6なら######と入力されます。ヘッダーだけならたいしたことはありません。しかし、リンクを指定する場合、[対象](URL)という形式で指定するのが面倒なので、リンク範囲を選択し、アイコンクリックで指定の補助をしてくれるのは便利です。また、コードブロックとして指定する機能もあります。行の先頭にタブを入れてくれます。

また、キーボードによるショートカットも提供してくれますので、タイプ派の方にも使用しやすいと思います。

残念ながら、見たままエディターではありませんが、私はそのほうが打ち込みやすいので、気に入っています。

動作は、markItUp!のデモをご覧ください。

同じようなエディターを探している方のため、どう使用するかメモしておきましょう。。

インストール

markItUp!のホームページへ行きましょう。
右上の方にあるDownload Nowボタンをクリックし、本体を落としてください。解凍し、自分のサイトのドキュメントルートの適当な場所へ保存してください。
ダウンロードページへ行きましょう。
Basic Markdown Setを探してください。その文字の下に、短い解説があり、その下にDemoボタンとDownloadボタンがあります。Downloadボタンをクリックして、落としてください。解凍し、適当な場所へ保存しましょう。

マークアップ

CSSの設定

<link rel="stylesheet" type="text/css" href="markitup/skins/markitup/style.css" />
<link rel="stylesheet" type="text/css" href="markitup/sets/markdown/style.css" />

URLは適当に書き換えてください。２つのstyle.cssファイルを指定します。

Javascript

jQuery本体を読み込んだ後に、２つのjsファイルを読み込みます。

<script type="text/javascript" src="markitup/jquery.markitup.js"></script>
<script type="text/javascript" src="markitup/sets/markdown/set.js"></script>

続いて、markItUp!でエディター動作をさせるテキストエリアと、設定を指定します。

<script language="javascript">
$(document).ready(function()    {
    $('#markdown').markItUp(mySettings);
});
</script>

#markdownで、IDを指定しています。

HTML

<textarea id="markdown" cols="80" rows="20">

</textarea>

テキストエリアに、先ほど指定したidを設定します。これで基本的な設定はおしまいです。プレビューの設定は別記事にします。

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

使用法

上部のアイコンをクリックすれば対応するMarkdownを生成してくれます。

選択範囲の全行に適用したい場合は、Ctrl+Shiftを押しながら、アイコンをクリックします。これはコードの指定時に使用しましょう。

ショートカット一覧

`Ctrl+`	機能
1から6	対応するヘッダーを生成
B	強調
I	斜体
P	画像
L	リンク

kore1server