If you are a note-taking enthusiast and also work in programming, you have naturally heard of or used Markdown.
When I first got into programming, I specifically analyzed the technical implementation of Markdown. Fast forward a year or two, and I have become a deep user of Markdown, with all my document notes and SSG blog content coming from Markdown...
Looking back now, I can't help but want to explore the development history of Markdown and consolidate my previous technical analysis into a single document for future reflection.
Key Figures#
Author - John Gruber#
John Gruber was born in Philadelphia and earned a Bachelor’s degree in Computer Science from Drexel University. He has worked at Bare Bones Software and Joyent. John Gruber created his personal blog Daring Fireball in 2002, focusing on various information about Apple Inc.
There is more to say about this guy; he has been running his blog full-time since 2006. He also hosts a podcast called The Talk Show. In recent years during WWDC, The Talk Show has invited Apple executives for face-to-face discussions. Apple Senior Vice Presidents Phil Schiller, Eddy Cue, Craig Federighi, Apple AR head Mike Rockwell, and sales chief Greg Joswiak appeared on The Talk Show during WWDC from 2015 to 2018.
John Gruber wrote in Daring Fireball: Dive Into Markdown about his unpleasant experience of editing and previewing HTML with BBEdit and copying it to Movable Type for publishing before Markdown existed. This frustrating experience prompted him to make a change, and two years later (in 2004), he released a tool called Markdown for better blogging.
Evangelist - Jeff Atwood#
Jeff Atwood is a software engineer. He co-founded the famous programming Q&A site Stack Overflow and the open-source forum software Discourse. The former is one of the three essential tools for programmers to solve problems, along with Google and GitHub; the latter is currently the preferred open-source software for setting up forums.
Jeff started his blog Coding Horror in the same year Markdown was released. In that blog, he expressed his loyalty to Markdown and documented how he used Markdown syntax to write questions and answers on early Stack Overflow (Discourse also integrated Markdown).
Development History#
2004 - The Origin of Markdown#
In March 2004, John Gruber published the first article about Markdown, Daring Fireball: Introducing Markdown, and began public testing of Markdown.
In August of the same year, Markdown 1.0 was officially released.
In December 2004, it was updated to version 1.0.1, fixing some defects. At the same time, the license was changed from the GPL of version 1.0 to a more permissive BSD-style license.
Since then, John Gruber has not updated Markdown, whether it is the Perl tool used for converting to HTML or the syntax rules of Markdown.
2007 - Pandoc#
Pandoc is a universal document conversion tool developed by John MacFarlane. Pandoc can convert between dozens of document formats. It added support for Markdown format early on, which encouraged more early users to try writing with Markdown tools.
2008 - Stack Overflow#
In 2008, Stack Overflow co-founder Jeff Atwood chose Markdown as the syntax scheme for users to write and answer questions. After a year and a half of practice, Jeff Atwood mentioned in Responsible Open Source Code Parenting:
I’m a big fan of John Gruber’s Markdown. When it comes to humane markup languages for the web, I don’t think anyone’s quite nailed it like Mr. Gruber. His philosophy was clear from the outset. I am a loyal fan of Markdown. When it comes to humane markup languages for the web, I believe no one is as excellent as Mr. Gruber. His ideas were very clear from the beginning.
With a year and a half of real-world Markdown experience under our belts on Stack Overflow, we’ve been quite happy. I’d say that Markdown is the worst form of markup except for all the other forms of markup that I’ve tried. After a year and a half of using Markdown online on Stack Overflow, we felt quite satisfied. I must say that Markdown is the worst form of markup, except for all the others I have tried.
On 15 Mar 2008, at 02:55, John Gruber wrote: I despise what you’ve done with Text::Markdown, which is to more or less make it an alias for MultiMarkdown, almost every part of which I disagree with in terms of syntax additions.
John Gruber's attitude towards the Markdown community was extremely cold. Jeff Atwood was very disappointed by this.
Jeff Atwood was the most enthusiastic evangelist for Markdown, continuously explaining the benefits of using Markdown to the world; at the same time, Jeff Atwood complained about John Gruber's indifference to the development of Markdown.
Due to the influence of Stack Overflow, Markdown gradually began to gain popularity in the programming world.
2009 - GitHub Flavored Markdown#
GitHub began using a derivative version of Markdown 1.0 called GitHub Flavored Markdown (GFM) around 2009. The main differences are as follows:
- Definition of paragraph breaks: GitHub considers a line break (the Enter key) to signify a new paragraph, which aligns more with people's expectations. Markdown 1.0 required a blank line (two Enter keys). I deeply understand GitHub's effort, as I was also confused by this when I first used Stack Overflow.
- Underlines used to separate multiple words as a whole should not be treated as italics.
2012 - Who’s With Me?#
In The Future of Markdown, Jeff proposed that other websites with significant traffic, such as Stack Exchange, GitHub, Meteor, and Reddit, work together to establish a standard specification for Markdown and standard test cases for testing Markdown implementations. Jeff hoped that the main content of this standard would include:
- Standardizing John Gruber's Markdown documentation with formal language specifications;
- Providing three options with more reliable default values: a) default off for emphasis markers within words; b) default on for automatically adding hyperlinks; c) default on for line breaks with the Enter key;
- A set of test cases to validate Markdown implementations;
- Cleaning up and adjusting ambiguous boundary cases in Markdown;
- Handling different popular versions of Markdown.
At this time, Jeff began to form a working group, with the following members:
- 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#
After two years of effort, the working group formed by Jeff released a project called Standard Markdown in September 2014. Due to John Gruber's opposition to this name, Jeff changed the project name to CommonMark. The CommonMark specification was mainly written by John MacFarlane, the author of Pandoc, and included 624 test cases, with specifications implemented in C and JavaScript.
2016 - text/Markdown#
The Internet standards organization IETF published two drafts, RFC 7763 - The text/Markdown Media Type and RFC 7764 - Guidance on Markdown, incorporating the Markdown format as the Internet media standard format text/Markdown. To distinguish between different Markdown versions, an optional parameter variant=Identifier was provided. RFC7764 included values for different Markdown version Identifiers and pointed out the differences between versions:
text/Markdown
ortext/Markdown; variant=Original
the original version released by John Gruber;text/Markdown; variant=MultiMarkdown
MultiMarkdown;text/Markdown; variant=GFM
GitHub Flavored Markdown;text/Markdown; variant=pandoc
Pandoc;text/Markdown; variant=Fountain
Fountain;text/Markdown; variant=CommonMark
CommonMark;text/Markdown; variant=kramdown-rfc2629
Markdown for RFCs;text/Markdown; variant=rfc7328
Pandoc2rfc;text/Markdown; variant=Extra
PHP Markdown Extra.
2017 - GitHub Flavored Markdown Spec#
GitHub Flavored Markdown released its own spec based on the CommonMark Spec, supporting tables, task lists, and strikethrough, while prohibiting raw HTML tags. The number of test cases increased from 624 to 651.
Now#
Markdown has become virtually ubiquitous and is the preferred format supported by many note-taking and writing software.
John Gruber released Markdown for the convenience of updating his blog, but in the following decade, he has not updated Markdown, and his blog has hardly mentioned Markdown since then.
On the other hand, another person has loved Markdown for a decade, using it in his Stack Overflow and Discourse, and has long organized efforts to promote Markdown.
As we remember the creator of Markdown, John Gruber, we also remember Jeff Atwood's tremendous efforts for Markdown.
Technical Principles#
An analysis of the current mainstream versions of Markdown.
Typora#
Everyone knows a software called Typora in the Markdown world, which is welcomed by many coders for its real-time preview feature. There is no need to elaborate on how to use Typora.
Core technology stack: Electron + Node.
Electron is a framework for building desktop applications using JavaScript, HTML, and CSS. By embedding Chromium and Node.js into the binary, Electron allows you to maintain a single JavaScript codebase and create cross-platform applications that run on Windows, macOS, and Linux—without needing local development experience.
Reference: Introduction | Electron
As mentioned, Typora's display is essentially presented in the form of an HTML webpage, but due to Electron's technical implementation, it can display HTML content on the app's base.
Markdown Functionality in VSCode#
Essentially the same as Typora, as VSCode itself is also implemented as a desktop app using TypeScript + Electron
.
Preview#
A webview is created using vscode.window.createWebviewPanel, specified to open on the side. The HTML is then set through the webview.html property of that panel object.
The HTML is generated from the editor's Markdown content, obtained through editor.document.getText(), and then a third-party Markdown to HTML library is called to generate it.
This completes the Markdown preview.
Edit + Update#
After previewing, updates are needed. Events such as vscode.workspace.onDidSaveTextDocument and vscode.workspace.onDidChangeTextDocument are listened to, and when the document is updated and saved, the editor's content is obtained, HTML is regenerated, and then set to the webview.
The webviewPanel supports passing messages using webview.postMessage(message); and supports a series of commands like updateHTML, which can be triggered by passing messages.
But how do you know which document updates which webview?
You can maintain a map, recording it when creating the webviewPanel, with the key being the file path, so that during updates, you can find the corresponding webview to update.
This completes the update of the Markdown content.
Real-time Preview#
Here, I would like to introduce Typora's real-time preview separately, as Typora's popularity is not only due to its user-friendly interface but also its real-time preview feature.
Real-time preview means that after writing a syntax block with Markdown syntax, the page content can be rendered immediately.
Implementation idea:
- Listen for input events.
- After debounce processing, call the Markdown parser for real-time parsing.
- Render to the corresponding position.
The implementation idea is quite straightforward and is not a surprising idea.