もしあなたがノート愛好者で、同時にプログラミング関連の仕事をしているなら、Markdown を聞いたことがあるか、使ったことがあるでしょう。
筆者はプログラミングに初めて触れたとき、Markdown の技術的実装を分析したことがあり、時が経つにつれて、すでに深く Markdown を使用するユーザーとなり、すべての文書ノートや SSG ブログの内容は Markdown から生まれています...
今振り返ってみると、Markdown の発展の歴史を掘り下げ、以前の技術分析をまとめて文書化し、今後の思考を便利にすることを考えています。
主な人物#
著者 - John Gruber#
John Gruber はフィラデルフィア出身で、ドレクセル大学でコンピュータサイエンスの学士号を取得し、Bare Bones Software と Joyent に勤務していました。John Gruber は 2002 年に個人ブログ Daring Fireball を立ち上げ、主に Apple に関する情報を発信しています。
この方の話はもっと語ることができます。彼は 2006 年からブログをフルタイムで運営しています。また、The Talk Show というポッドキャスト番組もホストしています。最近数年の WWDC 期間中、The Talk Show では Apple の幹部を招いて対面での対談が行われています。Apple の上級副社長 Phil Schiller、Eddy Cue、Craig Federighi、Apple AR 責任者の Mike Rockwell、販売責任者の Greg Joswiak が WWDC 2015 - 2018 の間に The Talk Show に出演しました。
John Gruber は Daring Fireball: Dive Into Markdown の中で、Markdown が存在しなかった頃、BBEdit で HTML を編集・プレビューし、Movable Type にコピーして公開する不愉快な経験について書いています。この不快な体験が彼に変化を促し、より良いブログ執筆のために、2 年後（2004 年）に Markdown というツールを発表しました。
布道者 - Jeff Atwood#
Jeff Atwood はソフトウェアエンジニアで、著名なプログラミング Q&A サイト Stack Overflow とオープンソースフォーラムソフトウェア Discourse を立ち上げました。前者はプログラマーが問題を解決するための三大ツールの一つで、他の二つは Google と GitHub です。後者は現在のフォーラム構築のためのオープンソースソフトウェアの第一選択肢です。
Jeff は Markdown が発表された同年に自身のブログ Coding Horror を始めました。このブログの中で、彼は Markdown の熱心なファンであり、初期の Stack Overflow で Markdown の構文を使って質問や回答を書く方法を記録しています（Discourse も Markdown を統合しています）。
発展の歴史#
2004 - Markdown の起源#
2004 年 3 月、John Gruber は最初の Markdown に関する記事 Daring Fireball: Introducing Markdown を発表し、Markdown の公開テストを開始しました。
同年 8 月に Markdown 1.0 が正式にリリースされました。
2004 年 12 月には 1.0.1 バージョンに更新され、いくつかの欠陥が修正されました。同時にライセンスも 1.0 バージョンの GPL からより緩やかな BSD スタイルのライセンスに変更されました。
それ以降、John Gruber は Markdown を更新することはありませんでした。Perl で書かれた HTML に変換するためのツールや Markdown の構文ルールに関しても同様です。
2007 - ## Pandoc#
Pandoc は John MacFarlane が開発した万能文書変換ツールです。Pandoc は数十種類の文書形式間で相互変換が可能です。Pandoc は早期から Markdown 形式のサポートを追加しており、これにより多くの初期ユーザーが Markdown ツールを使って執筆を試みるようになりました。
2008 - Stack Overflow#
2008 年、Stack Overflow の共同創設者 Jeff Atwood は Markdown を Stack Overflow ユーザーが質問や回答を書くための構文として選定しました。1 年半の実践を経て、Jeff Atwood は Responsible Open Source Code Parenting で次のように述べています：
私は John Gruber の Markdown の大ファンです。ウェブのための人間的なマークアップ言語に関しては、誰も Mr. Gruber のようにうまくやっているとは思いません。彼の哲学は最初から明確でした。私は Markdown の忠実なファンです。ウェブページの人間的なマークアップ言語について言えば、Gruber 氏のように優れた人はいないと思います。彼の考えは最初から非常に明確でした。
Stack Overflow で 1 年半の実際の Markdown の経験を経て、私たちは非常に満足しています。私は Markdown が他のすべてのマークアップ形式を除いて、最悪のマークアップ形式だと言えるでしょう。 Stack Overflow で Markdown を使用して 1 年半後、私たちはかなり満足しています。私は言わざるを得ません、Markdown は最悪のマークアップ形式です、他のすべての形式を除いて。
2008 年 3 月 15 日、02:55 に John Gruber は次のように書きました：あなたが Text::Markdown でやったことを軽蔑します。それはほぼ MultiMarkdown のエイリアスになっており、その構文の追加に関してはほとんどすべてに同意しません。
John Gruber は Markdown コミュニティに対して非常に冷淡な態度を示しました。Jeff Atwood はこれに非常に失望しました。
Jeff Atwood は最も熱心な Markdown の布教者であり、彼の影響力を使って Markdown を使用する利点を世間に広め続けました。同時に、Jeff Atwood は John Gruber が Markdown の発展に無関心であることを不満に思っていました。
Stack Overflow の影響力により、Markdown は徐々にプログラマーの世界で人気を博し始めました。
2009 - GitHub Flavored Markdown#
GitHub は 2009 年頃に Markdown 1.0 の派生バージョン GitHub Flavored Markdown (GFM) を使用し始めました。主な違いは以下の 2 点です：
- 段落の改行の定義：GitHub は 1 つの改行（Enter キー）が新しい段落を開始することが人々の期待により合致すると考えています。Markdown 1.0 では空白行（2 つの Enter キー）が必要です。私は GitHub の努力を深く理解しています。なぜなら、私が初めて Stack Overflow を使用したときもこれに困惑したからです。
- 下線を使って複数の単語を一つの全体として表す場合、斜体として処理すべきではありません。
2012 - 誰が私と一緒に？#
Jeff は The Future of Markdown の中で、Stack Exchange、GitHub、Meteor、Reddit などの他の一定の訪問者を持つウェブサイトが協力して Markdown の標準仕様と Markdown 実装のための標準テストケースを策定することを提案しました。Jeff はこの標準仕様の主な内容に以下を含めたいと考えています：
- John Gruber の Markdown 文書を正式な言語仕様で標準化すること；
- 3 つのオプションを提供し、より安全なデフォルト値を設定すること：a) 単語内の強調マークをデフォルトでオフにする；b) 自動リンク追加をデフォルトでオンにする；c) Enter キーで改行をデフォルトでオンにする；
- Markdown 実装を検証するための一連のテストケース；
- Markdown に存在する境界が曖昧な状況を整理・調整すること；
- Markdown の異なる人気バージョンの取り扱い。
Jeff はこの時点で作業グループを結成し、メンバーリストは以下の通りです：
- John MacFarlane, jgm@berkeley.edu
- David Greenspan, david@meteor.com
- Vicent Marti, vicent@github.com
- Neil Williams, neil@reddit.com
- Benjamin Dumke-von der Ehe, ben@stackexchange.com
- Jeff Atwood, jatwood@codinghorror.com
2014 - Standard Markdown & CommonMark#
Jeff が結成した作業グループは 2 年の努力の末、2014 年 9 月に Standard Markdown というプロジェクトを発表しました。John Gruber がこの名称に反対したため、Jeff はこのプロジェクトの名称を CommonMark に変更しました。CommonMark 仕様は主に Pandoc の作者 John MacFarlane によって作成され、624 のテストケースと C および JavaScript の仕様実装が含まれています。
2016 - text/Markdown#
インターネット技術標準制定機関 IETF は RFC 7763 - The text/Markdown Media Type と RFC 7764 - Guidance on Markdown の 2 つの草案を発表し、Markdown 形式をインターネットメディア標準形式 text/Markdown として収録しました。同時に、異なる Markdown バージョンを区別するために、オプションのパラメータ variant=Identifier を提供しました。RFC7764 には異なる Markdown バージョンの Identifier の値が収録されており、異なるバージョン間の違いが示されています：
text/Markdownまたはtext/Markdown; variant=OriginalJohn Gruber が発表した最初のバージョン；text/Markdown; variant=MultiMarkdownMultiMarkdown；text/Markdown; variant=GFMGitHub Flavored Markdown；text/Markdown; variant=pandocPandoc；text/Markdown; variant=FountainFountain；text/Markdown; variant=CommonMarkCommonMark；text/Markdown; variant=kramdown-rfc2629RFC 用の Markdown；text/Markdown; variant=rfc7328Pandoc2rfc；text/Markdown; variant=ExtraPHP Markdown Extra。
2017 - GitHub Flavored Markdown Spec#
GitHub Flavored Markdown は CommonMark Spec に基づいて独自の spec を発表し、テーブル、タスクリスト、取り消し線をサポートし、HTML の生のタグを禁止しました。テストケースは 624 から 651 に増加しました。
現在#
Markdown は事実上どこにでも存在しています。また、多くのノートや執筆ソフトウェアが最初にサポートする形式でもあります。
John Gruber は彼のブログを更新するために Markdown を発表しましたが、その後の 10 年以上、彼は Markdown を更新することはありませんでした。彼のブログにはその後 Markdown に関する言葉はほとんど見られなくなりました。
一方で、別の人物は 10 年変わらず Markdown を愛し、彼の Stack Overflow や Discourse で Markdown を使用し、長期間にわたり組織的に Markdown を推進しています。
私たちは Markdown の創造者 John Gruber を記憶する一方で、Markdown のために多大な努力をした Jeff Atwood も忘れません。
技術原理#
現在の Markdown の主流バージョンについての分析です。
typora#
皆さんご存知のように、md 界隈には typora というソフトウェアがあり、リアルタイムプレビュー機能で多くのコーダーに歓迎されています。typora の使い方については多くを語る必要はありません。
核心技術点：Electron + node 技術スタック
Electron は JavaScript、HTML、CSS を使用してデスクトップアプリケーションを構築するためのフレームワークです。Chromium と Node.js をバイナリの Electron に埋め込むことで、1 つの JavaScript コードベースを維持し、Windows、macOS、Linux で動作するクロスプラットフォームアプリを作成できます —— ローカル開発の経験は必要ありません。
参考：紹介 | Electron
上記のように typora の表示は本質的には HTML ウェブページの形式で呈現されていますが、Electron の技術実装により、アプリの基盤上で HTML の内容を表示できるようになっています。
vscode の md 機能#
本質的には typora と同じで、vscode 自体もtypescript + electronで実装されたデスクトップアプリです。
プレビュー#
vscode.window.createWebviewPanelを使用して webview を作成し、サイドに開くよう指定します。その後、この panel オブジェクトの webview.html 属性を使用して HTML を設定します。
HTML はエディタの Markdown 内容から生成され、エディタの内容はeditor.document.getText()で取得し、サードパーティの Markdown を HTML に変換するライブラリを呼び出して生成します。
これで Markdown のプレビューが完成します。
編集 + 更新#
プレビューの後、更新が必要です。vscode.workspace.onDidSaveTextDocumentとvscode.workspace.onDidChangeTextDocumentのイベントをリッスンし、文書が更新または保存されるときにエディタの内容を取得し、HTML を再生成して webview に設定します。
webviewPanel はwebview.postMessage(message);の方法でメッセージを送信でき、updateHTMLなどの一連のコマンドをサポートし、メッセージを送信することでトリガーできます。
しかし、どの文書がどの webview を更新するかはどうやって知るのでしょうか？
map を維持し、webviewPanel を作成する際に map に記録します。key はファイルパスとし、更新時に対応する webview を見つけて更新できるようにします。
これで Markdown 内容の更新が完了します。
リアルタイムプレビュー#
ここで typora のリアルタイムプレビューを特別に紹介します。typora の大ヒットは、そのシンプルで使いやすいインターフェースだけでなく、リアルタイムプレビュー機能にもあります。
リアルタイムプレビューは、md 構文のブロックを書き終えると、ページの内容がすぐにレンダリングされることを意味します。
実現の考え方：
- input 入力をリッスンする
- debounce 処理（防抖）後に md パーサーを呼び出してリアルタイム解析を行う
- 対応する位置にレンダリングする
実際の実現の考え方は非常に直感的で、驚くべきアイデアではありません。