Issues for Utilizing Markdown Writing Apps on Static Websites

No Comments

When you run or have lately switched to a static web site generator, you would possibly end up writing a number of Markdown. And the extra you write it, the extra you need the tooling expertise to vanish in order that the content material takes focus.

I’m going to present you some choices (together with my favourite), however extra importantly, I’ll stroll although options that these apps supply which are particularly related when selecting. Listed here are some key concerns for Markdown enhancing apps to assist the phrases movement.

Consideration #1: Separate writing and studying modes

UX ideas inform us that modes are problematic. However maybe there may be an exception for textual content enhancing software program. From vi(m) to Google Docs, separate modes for writing and studying appear to enchantment to writers. Equally, many Markdown editors have separate modes or views for writing, enhancing and studying.

I occur to love Markdown editors that present a side-by-side or paned design the place I can see each without delay. Writing Markdown will not be the identical as writing code. What it appears like issues, and having a preview may give you a really feel for that. It’s type of like static web site mills that auto-refresh as a way to see your modifications as you make them.

Having each edit and preview mode lively without delay will help you’re feeling extra linked to the completed product.

In distinction, I’m not a fan of the one-mode-to-rule-them-all design the place Markdown formatting robotically converts to styled textual content, hiding the formatted code (applied in some type by Dropbox Paper, Typora, Ulysses, and Bear). I can’t stand the work of futzing with the app to alter a heading degree, for instance. Do I click on it, double-click, triple-click? What if I’m simply utilizing the keyboard?

It’s not a lot that these options aren’t helpful, it’s that they break my movement.

I wish to see all of the Markdown that I’ve written, even when the top consumer gained’t. That’s one factor that I do desire a Markdown editor to borrow from code editors.

Consideration #2: Good themes

Some Markdown editors enable full customization of editor themes, whereas others ship with good ones out of the field. Regardless, I feel a superb editor ought to have simply the correct quantity of styling to distinguish plain textual content from formatted textual content, however not a lot that it distracts you from having the ability to learn it and concentrate on the content material. Even with the preview pane open, I usually spend most of my time trying on the enhancing view.

Totally different colours for every fashion

Since a lot of the textual content within the editor isn’t going to be rendered as it might within the browser, it’s good to rapidly see which textual content you’ve formatted utilizing Markdown. This helps you identify, for instance, whether or not a URL is definitely written out within the textual content or is used inside a hyperlink. So, I wish to have a distinct shade for every Markdown fashion (headings, hyperlinks, daring, italic, quotes, photographs, code, bullets, and so on.)

Colours let you know which textual content has Markdown formatting utilized.

Apply daring and italics types too

I choose to make use of asterisks for Markdown formatting all over the place I’m capable of (e.g., daring, italics, and unordered lists), so I discover it useful to have further styling past shade to differentiate daring, italic, and daring+italic. When skimming it may be arduous to distinguish between **that is vital** and *that is vital*, whereas **that is vital** and *that is vital* are simpler to separate. It additionally helps me see if I’ve by accident mismatched asterisks (e.g., **is that this vital?*).

Totally different font sizes for every heading degree

This is perhaps a bit controversial and will break up the viewers. Code editors don’t present completely different font sizes inside a file. Colours and types, positive, however not sizes. However, for me, it helps.

When writing, hierarchy is the important thing to group. With completely different font sizes for every heading, you may see the define of no matter you’re writing simply by skimming by means of it.

Seeing the headings in numerous font sizes is a refined manner that will help you visualize the construction. That is particularly useful for lengthy content material.

Shortcuts and sensible keyboard behaviors

I count on all the usual shortcuts that work in a textual content editor to work. CTRL/CMD + B for daring, I for italic, and so on., in addition to some which are nice-to-have when writing articles, particularly CTRL/CMD + (quantity) for headings. CTRL/CMD + 1 for H1, and so on.

Making one thing right into a heading must be a easy shortcut.

However there are additionally some keyboard behaviors I like which are borrowed from code editors. For instance, if I choose some textual content and press [ or ( it gained’t overwrite that textual content, however, as a substitute, enclose it with the opening and shutting character. Identical for utilizing textual content formatting characters like *, `, and _.

Markdown editor gained’t overwrite your textual content when you choose it and press a sound Markdown formatting character.

I additionally depend on keyboard shortcuts to create hyperlinks and pictures. Even after greater than 5 years of writing Markdown frequently, I nonetheless typically overlook whether or not the brackets or parentheses comes first. So, I actually like having a useful shortcut to insert them appropriately.

Even higher, in some editors, in case you have a URL in your clipboard and you choose textual content then use a keyboard shortcut to make it right into a hyperlink, it’s going to insert the URL within the hyperlink discipline. This has actually sped up my workflow.

When I’ve a URL within the clipboard and use the create hyperlink shortcut, it assumes that’s what I wish to hyperlink to. Helpful!

Bonus function: Copy to HTML

The editor that I exploit most frequently has a one-click “Copy HTML” function (with keyboard shortcut) that takes the entire Markdown I’ve written and copies the HTML to the clipboard. This may be very handy when utilizing a web based editor (e.g., WordPress) that has a code/supply possibility.

Straightforward peasy!

Consideration #3: Stand-alone editor vs. CMS/IDE plugin

I do know that lots of people who work with static web site mills love their IDEs and will even leap forwards and backwards between code and Markdown in a single day. I typically do. So I can see why utilizing a well-known IDE can be extra enticing than having a separate app for Markdown.

However once I’m sitting down to put in writing a web page in Markdown or an article, the place I’m specializing in the textual content itself, I choose a separate app.

I’m not fanatical about utilizing standalone Markdown editors over IDE editor or plugins; I exploit one sometimes for advanced find-and-replace duties and different edits. So long as it presents the advantages listed above, I wouldn’t attempt to speak anybody out of it.

Listed here are a number of explanation why a standalone app would possibly work higher for writing:

Cleaner interface. I’m not somebody who wants “Zen mode” in my writing app, however I do wish to have as few panels open as doable once I’m writing, which generally requires turning a number of issues off in an IDE.Efficiency. Most Markdown instruments simply really feel lighter to me. They’re definitely much less advanced and do much less stuff, in order that they ought to be sooner. I don’t ever wish to really feel like my writing app is exerting any effort. It ought to launch quick and reply immediately, at all times.Availability. I simply haven’t discovered a Markdown editor in an IDE that I actually like. Maybe there may be one on the market; I simply don’t have time to attempt all of them. However I like most standalone Markdown editors that I’ve used, and I can’t say the identical for what I’ve tried in IDE-land.Psychological shift. Once I open my IDE, I’m fascinated by writing code, however once I open my Markdown editor, I’m fascinated by writing phrases. I like that it will get me into the fitting mindset.

That’s a number of too many decisions.

My favourite Markdown editors for writing

Whereas these are my prime picks, it doesn’t imply that if an app isn’t on this checklist that it’s dangerous. There are a number of good apps that I didn’t point out as a result of that they had too many options or had been too costly given the variety of respectable free or low-cost choices. And much like IDE packages, there are a ton of Markdown apps on the market and I haven’t tried all of them (however I’ve tried a number of them!).

A observe about options that show you how to get “into the zone,” akin to “typewriter” or “focus” modes, or soothing background music. They’ve by no means actually labored for me and I ultimately flip them off, in order that they aren’t a function that I’m going searching for. (Though if you’re into these, you may attempt Typora, which is free (throughout Beta) and runs on Mac, Home windows, and Linux.)

My best choice


Free; Mac

Meets all the factors listed above. It’s mild and snappy, and open supply.

, related different for Home windows and Linux is Ghostwriter (additionally free).

Honorable mentions


$15; Mac

Good for if you need only a bit extra performance. It provides a 3rd pane as a way to simply change between your information and folders.


Free for private use; Mac, Home windows, Linux

For a extra full-featured app, the editor interface is fairly good, and meets a lot of the standards talked about above. Zettlr presents related options, however simply feels extra difficult, IMO.


$11; Mac, iOS

Not my favourite app for writing and enhancing textual content, nevertheless it has the good added capacity to publish to varied platforms (e.g., Medium, WordPress, Tumblr, Blogger, and Evernote).


Free or $1.49/mo. for Professional model; Mac, iOS

A sensible choice for those who use Markdown for extra than simply web site content material (private notes, process administration, and so on.). Scores excessive in look and usefulness, too.


With Markdown syntax being supported in an increasing number of locations — together with Slack, GitHub, WordPress, and so on. — it’s rapidly changing into a lingua franca for richer communication in our more and more text-based lives. It’s right here to remain as a result of it’s not solely straightforward to be taught and use, it’s intuitive. And fortunately we’re at the moment spoiled for selection in relation to high quality Markdown writing apps.

The submit Issues for Utilizing Markdown Writing Apps on Static Websites appeared first on CSS-Methods. You may assist CSS-Methods by being an MVP Supporter.

    About Marketing Solution Australia

    We are a digital marketing company with a focus on helping our customers achieve great results across several key areas.

    Request a free quote

    We offer professional SEO services that help websites increase their organic search score drastically in order to compete for the highest rankings even when it comes to highly competitive keywords.

    Subscribe to our newsletter!

    More from our blog

    See all posts

    Leave a Comment