Settings

Theme

Show HN: Markdown Viewer and Editor

kingsbridge-consultancy.com

31 points by beerglass · 23 comments · 1 min read

Reader

I built an online viewer and editor for .md files where the file stays on your machine. Free to use and code is available under MIT License here: https://github.com/hattray/markdown-editor

You can also install it as a Chrome/Edge app so that it works for files on your desktop by double-clicking.

Supports standard .md files with formatting, syntax-highlighting for code, table of contents, Mermaid diagrams, LaTeX via KaTex. Also supports exporting to .html, .pdf and .png.

Please give it a try and share your feedback for improvements.

6 threads
eleventen

No syntax highlighting in the editor? I vibecoded a pretty robust browser Filesystem API based markdown editor myself too last week. Recommend either rolling your own with a transparent textbox layered approach or just using Monaco or https://codemirror.net/.

I did a markdown kanban thing. Filesystem API is very cool and underused. https://github.com/subdavis/mdello/

  • beerglassOP

    Thanks for your suggestion. I use plain textarea so that Undo, Spellcheck work seamlessly. Monaco at 5MB+ is bigger than the whole app. Will instead try highlight.js for transparent overlay.

    • eleventen

      I also just discovered OverType.dev which is a library for exactly this purpose. I might jettison my editor and just use OverType!

    • nickthegreek

      How does one 'install' into chrome so that double clicking the MD files open in browser?

      • eleventen

        This is the magic of Progressive Web Apps. PWAs support the File Handler api to register themselves as the handler for certain file types.

llagerlof

I like this markdown editor library for creating wysiwyg markdown editors.

https://milkdown.dev

docreator

Was just looking for one today, cuz wherever .MD is produced - not always has a preview like in VSCode or Cursor.

jystervinou

Hi,

Noob question, but how do you author a math equation? There are dedicated editors I guess?

  • beerglassOP

    Included a basic "insert math" option to insert LaTeX for math symbols, greek letters, relations & operators. If you work with Math equations regularly, try it out and share any suggestions for improvements.

  • beerglassOP
  • Garlef

    There's a language for it (LaTeX).

    It looks like this:

    \int_{-\infty}^{\infty} e^{-x^2}\,dx = \sqrt{\pi}

    • jystervinou

      Thank's, i was wondering if people were typing this latex by hand, or with a specialized visual editor.

      • Garlef

        both, of course :)

        i prefer to do it by hand (and in some environments you can also define aliases/macros so that the different constructs you're dealing with are typeset consistently and you don't have to re-type everything)

      • beerglassOP

        Update: added an insert-equation button in the toolbar of my MD Viewer

hyperhello

Thoughtful UI. Really nice. Good job!

  • beerglassOP

    Thanks, mate. If you work with .md files all day, try this for a few days and share feedback or suggestions for improvements.

dssureshk

Nice tool

Keyboard Shortcuts

j
Next item
k
Previous item
o / Enter
Open selected item
?
Show this help
Esc
Close modal / clear selection