ぼくがかんがえた、さいきょうのMarkdown拡張記法

Markdownにこんな機能があればいいのに、という妄想です。いや、正確に言うと、ここに書いたようなDSLを現在実装中なので、何か意見・アドバイスとかあったらお願いしますっていう趣旨の記事です。

イメージとしては、Markdown以上slim以下みたいな。最も、Markdownはシンプルだからこそ使いやすいのですが・・・

拡張する機能

1. divタグによるインデントを実現する記法
2. インライン要素にspanタグを挿入する記法
3. htmlテンプレートと組み合わせて簡単に独自記法を定義する

拡張1: divタグによるインデントを実現する記法

趣旨

divでシンプルな階層構造作れるといいよねっていう。変換後のhtmlにcssでスタイル当てたい場合に便利かも。

解説

基本的にword:の形式で入力した文字列は、class付きのdivとして展開される

変換前

checkpoint:
  title:
    タイトル
  description
    説明文
  list:
    - 項目1
    - 項目2

変換後

<div class="checkpoint">
  <div class="title">
    <p>タイトル</p>
  </div>
  <div class="description">
    <p>説明文</p>
  </div>
  <div class="list">
    <ul>
      <li>項目1</li>
      <li>項目2</li>
    </ul>
  </div>
</div>

インデントは半角スペース2個で固定としたいが、ある程度自由マージンを設けるのももいいかも(2~4個なら有効みたいな)。

拡張2: インライン要素にspanタグを挿入する記法

趣旨

特定の文字だけ色を変えたいとか、標準のMarkdownで提供されていないインライン要素の装飾をしたい。これもcss前提。

解説

{classname: テキスト}の形式はspanタグに変換される。

例

変換前

title:
  これが{red: タイトル}です

list:
  - {blue: リスト1}だよ
  - {yellow: リスト2}だよ

変換後

<div class="title">
  <p>これが<span class="red">タイトル</span>です</p>
</div>
<div class="list">
  <ul>
    <li><span class="blue">リスト1</span>だよ</li>
    <li><span class="yellow">リスト2</span>だよ</li>
  </ul>
</div>

クラス名や{}の前後には、一つまでのスペース挿入が許可されるとする。

以下はいずれも有効

{classname: テキスト}
{ classname: テキスト }
{classname : テキスト}
{classname:テキスト }

拡張3: htmlテンプレートと組み合わせて簡単に独自記法を定義する

趣旨

汎用的でない独自の記法を、各々で簡単に定義できたら便利。今回は例としてRubyの機能として拡張する場合を紹介。

解説

拡張1で前述したクラス付きのdivが特定の条件に当てはまった場合に、そのdiv以下のタグを独自記法に置換する。

例えば、templates/フォルダ以下にテンプレートファイルが存在する場合はdivを置き換えるとする。

mylinkという独自記法を新たに定義する場合、templates/mylink.html.erbを作成する。

mylink.html.erb

<a href="<%= @href %>" rel="<%= @rel %>" target="<%= @target %>">
  <p><%= @title %></p>
  <p>
    <div>
      <p><%= @description %></p>
    </div>
  </p>
</a>

そして、option: valueの形式で、Ruby側に値を渡すことができる。

以下はmylinkの変換例

変換前

mylink:
  title: ヤフー
  href: http://www.yahoo.co.jp/
  description: ヤフーのトップページ
  rel: nofollow
  target: _blank

変換後

<a href="http://www.yahoo.co.jp/" rel="nofollow" target="_blank">
  <p>ヤフー</p>
  <p>
    <div>
      <p>ヤフーのトップページ</p>
    </div>
  </p>
</a>

このように、タイトル・説明文・rel・target属性を指定できる独自のリンク記法を定義した。これなら、フロントエンジニアやコーダーでも比較的簡単に独自記法を追加することができる。

まとめ

いかがでしょうか。ここまで来ると、もはやMarkdownである意味がない気もしてきますが・・・
というか、これってほぼhamlとかslimでいいんじゃと、感じてきました。

冒頭でも書きましたが、現在ここに書いたようなDSLを開発中です。なにかご意見・アドバイス等ありましたらぜひお願いします。ほぼ出来てはいるのですが、細かい仕様の部分で迷走中なので・・・