Show HN: Writing – A lightweight distraction-free editor (MathJax and Markdown) | Hacker News Reader

Show HN: Writing – A lightweight distraction-free editor (MathJax and Markdown)

github.com

133 pointsjosephernest48 comments

For me, the most satisfying markdown editor is Typora(https://typora.io/), which doesn't need a separate preview pane to show the rendered contents. But I haven't tried the Math support of it yet.

After using Typora for a long time, I really don't think a separate preview is that necessary.

I wholeheartedly agree, Typora is my favourite markdown editor. For those few times you really need to just edit the markdown you can quickly turn off rendering and switch into source mode by hitting cmd-/.

Agreed, Typora has this nailed. Separate edit/preview panes seem clunky by comparison now.

I liked Typora but I ran into issues with cursor placement in complex LaTeX blocks. Do you know if they've been fixed?

Typora seems nice, but it seems it's not in the browser... Sometimes it's ok, but sometimes it's cool to have a solution in the browser (shared computer, university computer, etc.) where you cannot install any binaries.

Typora looks amazing, thanks for sharing!

I just found out about it last night. It's really an awesome markdown editor! The only thing I wish it had was a way to embed another markdown document and have a preview as well as a PDF. But those aren't a deal breaker for me.

That webdesign though, sat for a minute looking at the first image because I thought it was a loadingscreen. Who makes a 4K white image with some animated text on it as their header?!

probably just the windows version, but I find Typora has a terrible lag when typing if there's any strain on the CPU at the time. Dropbox was eating up 30% and Typora keystrokes slowed to what felt like 500ms response time.

a separate preview is unnecessary for some users, it's true.

but when you're using a full range of complex features, it is.

and when something isn't displaying the way you intend, you often need to view the input _with_ the output, to see exactly what's causing the problem and to test possible solutions.

i also found that, while typora is good at showing what the output looks like in a browser-window which is sized exactly like the one you are typing in, it's less informative at showing what the content will look like in a .pdf or a .mobi or an .epub.

and, just for the sake of completion here, typora also became very unresponsive when i tested it with large files. again, not everyone will have that problem, but some users definitely will.

but i'll give typora another go, and see if it's improved since i last tried it...

Why not give VNote(https://github.com/tamlok/vnote/) a try? :)

If you want to test it quickly, copy+paste the following code in the live version (https://josephernest.github.io/writing/):

    #LINEAR ALGEBRA  
    ##1. Introduction  
    **Definition :** A matrix is ... a matrix.

    Examples:  
    $$A = \begin{pmatrix}0&1&-2&3\\5&-3&1&-2\\5&-2&-1&1  \end{pmatrix},\  
     B = \begin{pmatrix}0&8&-5\\0&0&0\\-1&-9&4\\2&19&-8\\1&1&1\end{pmatrix}$$

(paste it without the 4-spaces indentation)

One cool feature would be to scroll-lock the input with the output when scrolling the output pane.

Obviously the challenge is that they don't correspond line-to-line. Embedding an image is a one-liner of input yet might be hundreds of pixels tall in the preview.

VSCode's Markdown preview does this decently when you're scrolling the preview pane.

much of the time, you want the output to sync to the input.

but oftentimes you don't.

the trick is finding a good way to walk that tightrope.

I'm so glad it uses Computer Modern, and supports \align environments etc. I know the latter is just MathJax, but Computer Modern is a detail that every other Markdown/LaTeX mix has forgetten, and it shows.

Funnily the math it renders doesn’t use Computer Modern at all.

What do you mean? At https://josephernest.github.io/writing/ it includes cmunrm.otf:

    @font-face {
        font-family: texroman;
        src: url(cmunrm.otf); /* https://tex.stackexchange.com/a/267197/27733 */
    }

And a spot check of some of symbols in the rendered math seems to prove it is Computer Modern.

Funnily for me, just today I was telling a colleague how I'm happy to see math textbooks that aren't in Computer Modern.

Computer Modern is not a good font. No professional designer would use it for long body text.

The only reason it's still used in CS papers is a persistent blend of hero worship (it's by Knuth!), implementation fetishism (it's a Metafont!), and plain old cargo cult.

CM looks good to me because it matches the standard roman math notation and because I'm used to it. Objectively, mtpro2 is much nicer:

https://www.pctex.com/mtpro2.html

I see this: https://imgur.com/a/vvYpW

The symbols and letters are so wrong. Inspecting the element shows that the font family is STIXGeneral.

On the other hand I find it amusing that an editor that purports to be "distraction-free" uses fake italics (known as \textsl in LaTeX) who are incredibly distracting to me. It also uses fake bold but at least that's slightly more tolerable. Look if you want things to be both minimalistic and "distraction-free" you have to make the typography perfect otherwise mistakes in typography stick out like a sore thumb.

I see CM myself. Perhaps STIX is in your cache or installed locally, since MathJax makes some attempt not to download fonts.

I'm a fan. This is really cool and I like the Markdown parser that was chosen. The HTML output looks really damn clean (especially for code blocks). The `ctrl+s` shortcut is pretty sweet, too.

I'd love to see a couple of features though, namely an HTML export or at least a quick way to view the HTML.

I frequently write in markdown and then have to convert it to HTML for whatever blogging engine I use.

Thanks!

HTML export would be cool, I agree.

The shortcut "CTRL+D" will toggle to preview only (not exactly a quick way to view HTML but at least you see preview only), code only or preview+code view.

One text editor I have always wanted is a word processor with first class vim keybindings support. I don't need too many fanciful features but the most important features would be proper text reflowing and vim integration. Vim doesn't do too well with reflowing text when a hard margin is set, nor when there a single digital line is stretched across several visual lines. Vim by default would treat it as a single digital line and it makes navigating really difficult as cursors would jump across the screen.

I had the same problem and I added the following lines to my vimrc to fix the movement issues.

noremap j gj

noremap k gk

http://vim.wikia.com/wiki/Move_cursor_by_display_lines_when_...

This is not flesh out, but it does support vim keybindings. http://ivanceras.github.io/spongedown-editor/

Nice, I tried Spongedown but it seems to have at least 0.5 or 1 sec delay between typing and rendering, so it wouldn't be really usable for me.

You can look into Boostnote, it has that feature built in.

For me, the speed of rendering is fantastic.

But, the TexRoman font, the lack of lockstep scrolling, and the non-compartmental MathJax rendering causing the entire document to flick-around when making any edits makes this non-feasible for documents > 1 page. I'm also a sucker that needs inline sequence diagrams for my documents.

For now, for me, hackmd.io is king... but, maybe that will change.

Not as fleshed out as, but does support diagrams using plain text http://ivanceras.github.io/spongedown-editor/

Thanks! I don't know which browser/os you use, but for me hackmd.io is a lot more flickering / slow to render (maybe it's different on other browsers than the ones I use).

This is cool, I'm going to have to look at your implementation and possibly add it into Remarkbox (https://www.remarkbox.com).

I have a flicker issue mostly because I'm sending the markdown up to the cluster of servers for rendering.

Very cool! It would be nice to see an Org mode version of this.

Org syntax for the uninitiated: http://orgmode.org/worg/dev/org-syntax.html

It's very similar to Markdown if using Org just as a markup.

---

Can folks interested in Org mode support please upvote this issue: https://github.com/josephernest/writing/issues/13

If nothing else, it will at least help somewhat guage the interest in Org mode :)

I have begun my frail attempt at supporting Org mode here[1]. Calling it frail because I am relying only on my search/replace and regular-expression skills. I don't know Javascript. So JS experts, please help out if you can.

[1]: https://github.com/kaushalmodi/writing/tree/org-mode

Here's the official form of Joseph's writing project that supports Org mode: https://github.com/kaushalmodi/writing-org

Live site: https://org.scripter.co

I got the below Org syntax to work so far.. You can try by copying the test file I have so far ( https://raw.githubusercontent.com/kaushalmodi/writing-org/ma... ) and pasting in the above live site.

Pasting the same below just for reference.

    * Heading level 1
    ** Heading level 2
    *** Heading level 3

    Paragraphs get created
    only after an empty line.

    This will be a new paragraph.

    * List syntax is the same as Markdown

    - List 1
    - List 2

    asdf (*!bug!* non-list breaker text should not be needed. Two empty lines should end a list.)

    1. Ordered
    2. Ordered

    *!bug!* No white-space following an ordered list.

    * Inline Code

    =code=

    == =code= ==

    == abc = def ==
    * Bold
    *bold*
    *bold * asdf*
    - Press =Ctrl+B= to toggle bold.
    * Italics
    /italics / adsf/
    - Press =Ctrl+I= to toggle italics.
    * Horizontal rule
    Above the horizontal rule
    -----
    Below the horizontal rule

    * Source blocks
    #+BEGIN_SRC emacs-lisp
    (message "foo")
    #+END_SRC

Hi, we've built Monod a while ago: https://monod.lelab.tailordev.fr/. It looks very similar to your project :)

This is very neat! It made me think of hackmd.io which offers similar features though maybe less minimalist/distraction free but with collaboration. Thanks for sharing!

Thanks!

I just tried hackmd.io and even if it's cool, it wouldn't be usable for me on everyday use because it's not responsive enough: write some text, wait 0.5sec to see it in the preview, write some text, wait 0.5sec to see it in the preview, etc.

Also it's not "LPWP" enough for me (i.e. the first page that you visit on the website is the page where things actually happen, that means that there is no welcome page or login page). See https://github.com/josephernest/writing#why-another-markdown...

Quite neat. I wouldn't use this myself as I prefer to have an environment which is crash proof and I would be too scared to close the window, however I think this could be quite great as an embedded editor.

It seems like the \pagebreak is not respected when printing on Safari (Chrome works fine). The preview shows a dotted line but the printed pdf is not broken.

Also, the footnotes are not on the correct page but always at the end. (This is on all browsers)

Close the tab (or even close the browser), and open it again: it's still there (backuped in LocalStorage), phew! :)

Lol sweet. This is dope, keep doing what you're doing!

Awesome! Super responsive and fast.

Nice and simple job!

Guys that do not want an extra preview panel could take a look at VNote(https://github.com/tamlok/vnote/).

I might use this instead of LaTeX for short communications , but I wonder if this could work for longer work with several pages.

https://hack.chat/ is essentially this except ad-hoc chatrooms.

Nice update speed. But the font in the preview panel looks really blurry -- both regular and bold...

Which browser/browser version/os? No blur on ff and chrome on windows and linux for me

No dark mode? What is this 1997?

Reply on news.ycombinator.com