7 ms·

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

133 points by josephernest 9y ago

sixti60 9y ago
I might use this instead of LaTeX for short communications , but I wonder if this could work for longer work with several pages.
- vortico 9y ago
  https://hack.chat/ https://hack.chat/ is essentially this except ad-hoc chatrooms.
josephernest 9y ago
If you want to test it quickly, copy+paste the following code in the live version (https://josephernest.github.io/writing/ 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)
- always_good 9y ago
  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.
  - accordionclown 9y ago
    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.
antjanus 9y ago
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.
- josephernest 9y ago
  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.
myopicgoat 9y ago
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!
- josephernest 9y ago
  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-editor-why-not-just-use-stackedit https://github.com/josephernest/writing#why-another-markdown...
nthompson 9y ago
Awesome! Super responsive and fast.
singhrac 9y ago
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.
- kccqzy 9y ago
  Funnily the math it renders doesn’t use Computer Modern at all.
  - kmill 9y ago
    What do you mean? At https://josephernest.github.io/writing/ 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.
    - pavlov 9y ago
      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.
      - psychometry 9y ago
        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 https://www.pctex.com/mtpro2.html
    - kccqzy 9y ago
      I see this: https://imgur.com/a/vvYpW 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.
justhackedme 9y ago
Why are people obsessed with calling it markdown.
xdeqx366 9y ago
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.
- ivanceras 9y ago
  Not as fleshed out as, but does support diagrams using plain text http://ivanceras.github.io/spongedown-editor/ http://ivanceras.github.io/spongedown-editor/
- josephernest 9y ago
  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).
searene 9y ago
For me, the most satisfying markdown editor is Typora(https://typora.io/ 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.
- patmurraydev 9y ago
  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-/.
- fineline 9y ago
  Agreed, Typora has this nailed. Separate edit/preview panes seem clunky by comparison now.
- tylerhou 9y ago
  I liked Typora but I ran into issues with cursor placement in complex LaTeX blocks. Do you know if they've been fixed?
- josephernest 9y ago
  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.
  - deleted 9y ago
    [deleted]
- trevorriles 9y ago
  Typora looks amazing, thanks for sharing!
- sxldier 9y ago
  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.
voiper1 9y ago
Nice update speed. But the font in the preview panel looks really blurry -- both regular and bold...
- josephernest 9y ago
  Which browser/browser version/os? No blur on ff and chrome on windows and linux for me
Immortalin 9y ago
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.
- ReD90 9y ago
  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_wrapping http://vim.wikia.com/wiki/Move_cursor_by_display_lines_when_...
  - ivanceras 9y ago
    This is not flesh out, but it does support vim keybindings. http://ivanceras.github.io/spongedown-editor/ http://ivanceras.github.io/spongedown-editor/
    - josephernest 9y ago
      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.
- sxldier 9y ago
  You can look into Boostnote, it has that feature built in.
yoz-y 9y ago
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)
- josephernest 9y ago
  Close the tab (or even close the browser), and open it again: it's still there (backuped in LocalStorage), phew! :)
  - sxldier 9y ago
    Lol sweet. This is dope, keep doing what you're doing!
in9 9y ago
No dark mode? What is this 1997?
couac 9y ago
Hi, we've built Monod a while ago: https://monod.lelab.tailordev.fr/ https://monod.lelab.tailordev.fr/. It looks very similar to your project :)
foxhop 9y ago
This is cool, I'm going to have to look at your implementation and possibly add it into Remarkbox (https://www.remarkbox.com https://www.remarkbox.com). I have a flicker issue mostly because I'm sending the markdown up to the cluster of servers for rendering.
astoilkov 9y ago
I am one of the creators of Caret - https://caret.io https://caret.io. We are working on it for 2.5 years full time and we are very serious about making the best markdown editor in the world. Anyone interested can take a look.
kaushalmodi 9y ago
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 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 https://github.com/josephernest/writing/issues/13 If nothing else, it will at least help somewhat guage the interest in Org mode :)
- kaushalmodi 9y ago
  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 https://github.com/kaushalmodi/writing/tree/org-mode
- kaushalmodi 9y ago
  Here's the official form of Joseph's writing project that supports Org mode: https://github.com/kaushalmodi/writing-org https://github.com/kaushalmodi/writing-org Live site: https://org.scripter.co 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/master/test.org 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
tamlok 9y ago
Nice and simple job! Guys that do not want an extra preview panel could take a look at VNote(https://github.com/tamlok/vnote/ https://github.com/tamlok/vnote/).

133 points by josephernest 9y ago

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

vortico 9y ago
https://hack.chat/ https://hack.chat/ is essentially this except ad-hoc chatrooms.

josephernest 9y ago

If you want to test it quickly, copy+paste the following code in the live version (https://josephernest.github.io/writing/ 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)

always_good 9y ago
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.
- accordionclown 9y ago
  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.

antjanus 9y ago

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.

josephernest 9y ago
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.

myopicgoat 9y ago

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!

josephernest 9y ago
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-editor-why-not-just-use-stackedit https://github.com/josephernest/writing#why-another-markdown...

nthompson 9y ago

Awesome! Super responsive and fast.

singhrac 9y ago

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.

kccqzy 9y ago
Funnily the math it renders doesn’t use Computer Modern at all.
- kmill 9y ago
  What do you mean? At https://josephernest.github.io/writing/ 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.
  - pavlov 9y ago
    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.
    - psychometry 9y ago
      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 https://www.pctex.com/mtpro2.html
  - kccqzy 9y ago
    I see this: https://imgur.com/a/vvYpW 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.

justhackedme 9y ago

Why are people obsessed with calling it markdown.

xdeqx366 9y ago

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.

ivanceras 9y ago
Not as fleshed out as, but does support diagrams using plain text http://ivanceras.github.io/spongedown-editor/ http://ivanceras.github.io/spongedown-editor/
josephernest 9y ago
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).

searene 9y ago

For me, the most satisfying markdown editor is Typora(https://typora.io/ 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.

patmurraydev 9y ago
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-/.
fineline 9y ago
Agreed, Typora has this nailed. Separate edit/preview panes seem clunky by comparison now.
tylerhou 9y ago
I liked Typora but I ran into issues with cursor placement in complex LaTeX blocks. Do you know if they've been fixed?
josephernest 9y ago
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.
- deleted 9y ago
  [deleted]
trevorriles 9y ago
Typora looks amazing, thanks for sharing!
sxldier 9y ago
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.

voiper1 9y ago

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

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

Immortalin 9y ago

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.

ReD90 9y ago
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_wrapping http://vim.wikia.com/wiki/Move_cursor_by_display_lines_when_...
- ivanceras 9y ago
  This is not flesh out, but it does support vim keybindings. http://ivanceras.github.io/spongedown-editor/ http://ivanceras.github.io/spongedown-editor/
  - josephernest 9y ago
    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.
sxldier 9y ago
You can look into Boostnote, it has that feature built in.

yoz-y 9y ago

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)

josephernest 9y ago
Close the tab (or even close the browser), and open it again: it's still there (backuped in LocalStorage), phew! :)
- sxldier 9y ago
  Lol sweet. This is dope, keep doing what you're doing!

in9 9y ago

No dark mode? What is this 1997?

couac 9y ago

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

foxhop 9y ago

This is cool, I'm going to have to look at your implementation and possibly add it into Remarkbox (https://www.remarkbox.com https://www.remarkbox.com). I have a flicker issue mostly because I'm sending the markdown up to the cluster of servers for rendering.

astoilkov 9y ago

I am one of the creators of Caret - https://caret.io https://caret.io. We are working on it for 2.5 years full time and we are very serious about making the best markdown editor in the world. Anyone interested can take a look.

kaushalmodi 9y ago

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 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 https://github.com/josephernest/writing/issues/13 If nothing else, it will at least help somewhat guage the interest in Org mode :)

kaushalmodi 9y ago
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 https://github.com/kaushalmodi/writing/tree/org-mode
kaushalmodi 9y ago
Here's the official form of Joseph's writing project that supports Org mode: https://github.com/kaushalmodi/writing-org https://github.com/kaushalmodi/writing-org Live site: https://org.scripter.co 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/master/test.org 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

tamlok 9y ago

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