定食屋おろポン

おろしポン酢と青ネギはかけ放題です

GitHub Flavored Markdownを書くならAtomで決まりでしょ

先日、こんな記事を書きました。

AtomがGithub Flavored Markdownのエディタとして使える件について - 定食屋おろポン

要約すると、

  • GitHubAtomってエディタ出したよね
  • GitHub Flavored Markdown、いわゆるGFMてのがあるよ
  • いわゆるMarkdown(Traditional Markdown)より、GFMのほうがイケてる👍
  • GitHubチームの作ったAtomはGFMに最初っから対応してる!Cool!
  • ライブプレビューもできます。左のビューで編集したら右のビューでリアルタイムにどう表示されるかを確認できる。Cool!
  • ただ、HTMLで出力・保存できないから、印刷もできないし。。困った😥

ってことです。

HTML化、対応してた

どうせならPullRequest送ってやろうと思い立ち、「まずはCoffee Scriptとnodejsを覚えるところから..」などと、「頼んだハンバーグまだかなあ父ちゃん」「ハハハ、今ごろ店員さんが牧場で牛を捕まえているところさ」みたいな悠長なことを言って放置していたら対応されていましたよ。HAHAHA

Support copy/save to HTML by kevinsawicki · Pull Request #68 · atom/markdown-preview · GitHub

数日中にはこの変更を含んだmarkdown-preview 0.65.0がリリースされると思います。

待ちきれない僕は一足先に試してみました。 最新版を試したり編集するには、Contributing to Atom Packagesを参考に開発モードを使用します。

実際に使用してみたので見てみましょう。

このように、プレビュー画面右クリックでHTMLのコピーやセーブのコンテキストメニューが表示されます。

f:id:oropon:20140425044203p:plain

また、Cmd+Shift+Pからも使用できます。

f:id:oropon:20140425044356p:plain

こんなかんじのHTMLがコピーされます。

<h1 id="h1">h1</h1>
<h2 id="h2">h2</h2>
<h3 id="h3">h3</h3>
<h4 id="h4">h4</h4>
<h5 id="h5">h5</h5>
<h6 id="h6">h6</h6>
<p><strong>Bold</strong><br><em>Italic</em></p>
<ul>
<li><label>
  <input type="checkbox" class="task-list-item-checkbox">
   checkbox
</label></li>
<li><label>
  <input type="checkbox" class="task-list-item-checkbox" checked="">
   checked
</label></li>
</ul>
<hr>
<p>Table</p>
<table>
<thead>
<tr>
<th style="text-align:left">Key</th>
<th style="text-align:right">Value</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">hoge</td>
<td style="text-align:right">100</td>
</tr>
<tr>
<td style="text-align:left">fuga</td>
<td style="text-align:right">200</td>
</tr>
</tbody>
</table>
<pre class="editor-colors"><code class="lang-javascript"><div><span class="source js"><span class="entity name type object js firebug">console</span><span class="support function js firebug">.log</span><span class="meta brace round js">(</span><span class="string quoted double js"><span class="punctuation definition string begin js">"</span>hello, world<span class="punctuation definition string end js">"</span></span><span class="meta brace round js">)</span><span class="punctuation terminator statement js">;</span></span></div></code></pre>

これで快適GFMライフ!

印刷したりPDF化したければ、HTMLをブラウザで開いて印刷なりPDF化なりすればよいわけです。Sublime Textでいうところのprint-to-htmlパッケージみたいのは欲しいところですが。*1

あと、

  • 保存されたHTMLにCSSが含まれていないので見た目がアレ。特にシンタックスハイライトがアレ。
  • 絵文字は<img class="emoji"src="略/emoji-images/pngs/smile.png">みたいになるので、当然表示できない

みたいな問題もあるけど、些細な事です。*2

*1:やるやる詐欺リストに入れておきます

*2:やるやる詐欺リストに入れておきます