
Show HN: Writing – A lightweight distraction-free editor (MathJax and Markdown) - josephernest
https://github.com/josephernest/writing
======
searene
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.

~~~
josephernest
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.

------
josephernest
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
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
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.

------
singhrac
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
Funnily the math it renders doesn’t use Computer Modern at all.

~~~
kmill
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.

~~~
kccqzy
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.

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

------
antjanus
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
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.

------
Immortalin
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
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_...](http://vim.wikia.com/wiki/Move_cursor_by_display_lines_when_wrapping)

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

~~~
josephernest
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.

------
xdeqx366
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
Not as fleshed out as, but does support diagrams using plain text
[http://ivanceras.github.io/spongedown-
editor/](http://ivanceras.github.io/spongedown-editor/)

------
foxhop
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.

------
kaushalmodi
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
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/ma...](https://raw.githubusercontent.com/kaushalmodi/writing-
org/master/test.org) ) 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

------
couac
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 :)

------
myopicgoat
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
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...](https://github.com/josephernest/writing#why-another-
markdown-editor-why-not-just-use-stackedit)

------
yoz-y
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
Close the tab (or even close the browser), and open it again: it's still there
(backuped in LocalStorage), phew! :)

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

------
nthompson
Awesome! Super responsive and fast.

------
tamlok
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/)).

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

~~~
vortico
[https://hack.chat/](https://hack.chat/) is essentially this except ad-hoc
chatrooms.

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

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

------
in9
No dark mode? What is this 1997?

