レバテックフリーランスのサイトに当サイトが紹介されました!

VimRepressの拡張対応版を作成しました

VimRepressは、VimからMarkdownでWordpress投稿できるプラグインでとても便利です。

しかし、開発は止まっており、現在のGFM(GitHub Flavored Markdown)で使える記述と比較すると少し使いにくい部分もあります。VimRepressはGFM記述には未対応で、オリジナルのJohn GruberのMarkdownにのみ対応しています。

今回はそういった部分を改善したバージョンのVimRepressをforkして公開したので紹介します。

拡張版VimRepress

拡張したものを以下にて公開しています。拡張といっても大したことはやってないですが。

GitHub - pacotan/VimRepress: Plugin for managing wordpress blog from Vim.
Plugin for managing wordpress blog from Vim. Contribute to pacotan/VimRepress development by creating an account on GitHub.

リポジトリのREADMEのAbout This Versionの通りですが、簡単に拡張内容をこちらで日本語で記載します。

ということをやっています。それぞれの詳細内容は以下で記載します。

また、サードパーティ拡張の Custom Span Class Markdown Extension、の対応のため、環境にパッケージのインストールが必要となっています。以下のコマンドをpython2.xのpipで行います。

pip install git+git://github.com/exaroth/mdx_custom_span_class.git

それでは、以下で具体的な拡張内容を紹介していきます。

拡張項目

まず、VimRepressはPythonのMarkdownパッケージを利用したプラグインです。そのため、Python-Markdownの拡張機能を利用することでMarkdown記述の幅を広げることが可能です。以下では主には、Python-Markdownを拡張してMarkdown記述の幅を広げています。

Python-Markdown Extra に対応

英語ですが、公式サイト Python-Markdown Extra のとおりの拡張ができます。その中でも僕が何をしたかったのかというと

  • Fenced Code Blocks
  • Tables

この2つをマークダウン記述したかったのです。サイトの説明通り、このパッケージにはこれ以外にも拡張機能が含まれています。それまるごと使えるようになっているので、そちらも参照ください。

Fenced Code Blocks

GFMではない元の方のマークダウン記述法の定義では、コードブロックはインデント(スペース4つ)ありで記載したブロックを、コードブロックとみなす仕様です。余計なインデントをいれた記載は、書きやすいものではないので、以下の特定記号```で囲うことでコードブロックとみなす、Fenced Code Blocksを使います。

```.language-clike
void func()
{
    cout << "hoge" << endl;
}
```

これでHTMLとしては以下のように出力されます。

<pre><code class="language-clike">void func()
{
    cout &lt;&lt; &quot;hoge&quot; &lt;&lt; endl;
}
</code></pre>

HTML特殊文字の変換や、pre,codeタグ、codeタグへ言語を示すclass指定まで行うことができます。最終的なブラウザ表示が以下です。

void func()
{
    cout << "hoge" << endl;
}

Tables

テーブルの記述が、HTMLタグだとなかなか煩わしいことになるので、マークダウン記述が欲しかったです。以下が具体例です。

First Header  | Second Header
------------- | -------------
Content Cell  | Content Cell
Content Cell  | Content Cell

これで以下のようになります。

First HeaderSecond Header
Content CellContent Cell
Content CellContent Cell

New Line to Break に対応

同様に公式の拡張New Line to Breakに対応。

単純で

Line1
Line2

と書くと

<p>Line1<br/>
Line2</p>

とHTMLで出力されます。通常ただ改行をしても、HTML上では改行扱いにならないものを自動で<br>を差し込んで改行として扱ってくれます。

サードパーティ拡張のCustom Span Class Markdown Extension

主には上記した、GFMっぽい記述拡張を目指してPython-Markdownの公式ページをあさっていたら見つけた掘り出し物が以下。

Custom Span Class Markdown Extension

<span>タグをclass指定こみで、簡単に設定できます。超便利!以下が例です。

これは!!red|大事!!

がHTMLで以下のように出力され、

<p>これは<span class="red">大事</span></p>

そして最終的にブラウザで以下のように表示されるわけです。

これは大事

この<span>タグくくりはしょっちゅう使うのに、markdownでもいい記述方法を見たことがなく、あきらめていつもスニペット入力していたのですが、それ以上に簡単になりました!これは思わぬ良い拾い物をしました。というわけで、わざわざ拡張パッケージのインストールを必要としてまででも、この対応を行っているわけです。

記事編集バッファを新しいタブで開くように

これはもしかしたらVim日本語版のみの問題かもしれないですが、:BlogNew:BlogListなどから記事編集バッファを開くときに、必ず既存のバッファとは別のウィンドウを開いて、既存のウィンドウの半分の領域のウィンドウで編集状態が始まります。これは、:newでバッファを作ったデフォルトの挙動なのですが、使いにくいですね。これから記事を書こう、いじろうと思っているときに、エディタの上半分の画面で事足ります、なんて人のほうが珍しいと思います。

というわけで、新しいタブで開くようにしました。:new:tabnewになったということです。これで毎回不要なバッファを消したり、ウィンドウを広げる操作から解放されます。

まとめ

以上、VimRepressを拡張して公開、その内容を紹介してきました。

VimRepressはPython-Markdownモジュールを素直に使っているだけだったので、拡張も簡単でしたね。大したことはやってないので、コミット履歴等で簡単に拡張方法もわかると思います。同様の拡張で足りない機能があれば自分で足してみるとどこまでも幸せになれると思います。

他にも足したいマークダウン記述はあるのですが(例えば取り消し線など)、公式でサポートされていないものはPythonパッケージのインストールが必要となるため環境構築コストが発生するので、現状直接HTMLタグ打ちでいいかな・・というところに落としています。マークダウンで今後も記事を書いていって、必要とあらば都度このリポジトリを更新していくかもしれないです。

コメント

タイトルとURLをコピーしました