Sublime Forum

What do you guys use for previewing Markdown these days? Looking for an OmniMarkupPreviewer replacement

#1

I’ve taken to writing a lot of Markdown and have been using OmniMarkupPreviewer + a little customization. But it’s no longer maintained.

What I’m looking for:
(✓ or ✗ if OmniMarkupPreviewer supports this)

  • Live preview (in the browser or Sublime, doesn’t matter) ✓
  • GitHub-Flavored Markdown support ✓
  • Fenced code ✓
  • Checklists ✓ (added by me)
  • New line to break ✓
  • Subscript and superscript ✓
  • Code highlighting ✓
  • Strikethrough ✓
  • Images ✓
  • Tables ✓
  • Footnotes ✓
  • TOC ✓
  • Emoji ✗

Nice-to-have but not essential:

  • Header anchors ✗ (like on GitHub)
  • Exporting to HTML ✓
  • file:/// links support? So I can link to other projects on local filesystem? ✗
  • Overview mode / collapsible sections (Using The Outliner of Giants - YouTube style) ✗
  • Definition Lists ✓
  • WikiLinks ✗

I’ve already taken a few alternatives for a spin but they don’t seem to work better, not out of the box at least:

  • N4-MarkdownPreview
  • MarkdownLivePreview
0 Likes
#2

these days it seems to be hard to find a Markdown -> HTML converter that is easy to set up locally if you’re not a webdev/fan of Node JS :wink:

I’m a .NET developer, so I wrote a small script that uses the https://github.com/lunet-io/markdig library to convert Markdown to HTML, and a simple build system that opens the output in my browser.

here’s how markdig stacks up:

  • Live preview (in the browser or Sublime, doesn’t matter) ✓ (covered by my build system)
  • GitHub-Flavored Markdown support ✓
    • Fenced code ✓
    • Checklists ✓
    • Code highlighting ✓
    • Strikethrough ✓
    • Tables ✓
  • New line to break ✓
  • Subscript and superscript ✓
  • Images ✓
  • Footnotes ✓
  • TOC ✗? (possible with an extension)
  • Emoji ✓

Nice-to-have but not essential:

  • Header anchors (like on GitHub) ✗? (it supports auto identifiers for headings, so maybe)
  • Exporting to HTML ✓ (duh)
  • file:/// links support? So I can link to other projects on local filesystem? ✓
  • Overview mode / collapsible sections (Using The Outliner of Giants - YouTube style) ✗
  • Definition Lists ✓
  • WikiLinks ✗
0 Likes
#3

Very good Markdown support, but the ecosystem I’m most tied to is NodeJS / NPM, followed by Windows / Chocolatey :cry:, then Python / PIP, which I was hoping to shed (and only use Sublime Package Control things, because I :heart: Sublime Text).

Very taken aback that NuGet !== Chocolatey, I thought Install-Package and choco install were interchangeable. Apparently totally different things: Difference between Chocolatey and NuGet - Stack Overflow

0 Likes
#4

I’ve been using https://packagecontrol.io/packages/Markdown%20Preview for many years now. Runs out of the box and is capable of GFM (github flavoured markdown)

  • Live preview (in the browser or Sublime, doesn’t matter) ✓
  • GitHub-Flavored Markdown support ✓
  • Fenced code ✓
  • Checklists ✓
  • New line to break1 ✗
  • Subscript and superscript ✓
  • Code highlighting ✓
  • Strikethrough ✓
  • Images ✓
  • Tables ✓
  • Footnotes ✓ (I think?)
  • TOC ✗ (https://packagecontrol.io/packages/MarkdownTOC)
  • Emoji ?

Nice-to-have but not essential:

  • Header anchors ✓
  • Exporting to HTML ✓
  • file:/// links support? So I can link to other projects on local filesystem? ✓ (why shouldn’t this be supprted?)
  • Overview mode / collapsible sections (Using The Outliner of Giants - YouTube1 style) ✗
  • Definition Lists ?
  • WikiLinks ✗ (doubt it)
0 Likes
#5

Oh, you have to configure some more things and install LiveReload for refreshing on save.

Well actually the best would be a kind of Jupyter-style Bret Victor-inspired Tangle.JS reactive document with rich editing like Dropbox Paper or Luma but drill-down-to-code easily available, plus Semantic Web enhancements, but that’s not ironed out quite yet now.

It just doesn’t work in OmniMarkupPreviewer…

✓ it has Emoji support out of the :package:, yay! :tada:

So thank you, all things considered MarkdownPreview is a great solution! :thumbsup:

Kinks left so far:

:thumbsdown: Not live, on-keystroke, but on-save.
:white_check_mark: Apparently you need to Enable LiveReload plugin every time you start Sublime Config below
:thumbsdown: Save one file and all the previews will refresh in the browser
:thumbsdown: Because it’s previewed from file:/// you often can’t blend in embeds / badges / scripts
:thumbsdown: tel: links are interpreted wrong as file:///L://XXXXXXXXXX
:thumbsdown: Previews selection if there is one. I gave this a chance as a feature, but can’t get used to it so it’s a bug.
:thumbsdown: Not all emojis are rendered from :shortcodes: :anguished:
:thumbsdown: Emoji not cached or on a sprite sheet. Individually loaded from GitHub CDN every time.

Auto-enable LiveReload plugin

Open menu Preferences > Package Settings > LiveReload > Settings - User and paste:

{
  "port": 35730,
  "enabled_plugins": ["SimpleReloadPluginDelay"]
}

Info via From Atom to Sublime Text
Use a different port so you keep the default 35729 free of conflicts, in case you need to use it for something else.

0 Likes
#6

:-1: If you follow fragment links (...12.html#section-42) livereload will always skip you to that section until you manually remove the hash from the address bar

Use EmojiOne instead of GEmoji

:white_check_mark: Not all emojis are rendered from :shortcodes:

Use the Github emojis if you need that but you can also use the full set from EmojiOne

Fix MathJax / LaTeX support

0 Likes