
Show HN: Markdown New Tab – A new tab replacement to jot down notes in Markdown - plibither8
https://github.com/plibither8/markdown-new-tab
======
vanderZwan
> _The code makes use of localStorage() to save the raw text and the time and
> date of when the edit has been made._

Given that localStorage only has 5MiB available to it, you could try using the
localForage library to have a localStorage-like API around IndexedDB, so that
people can store even larger notes (you could even support storing pasted
images as PNG blobs). Even better: is has automatic localForage fallback.

Alternatively, you might want to either compress the text with LZ-String
before storing it[1]. (BTW, version 2.0 is currently in the works and much
faster, especially if you use the _" Unsafe"_ version[2])

[0]
[https://localforage.github.io/localForage/](https://localforage.github.io/localForage/)

[1] [http://pieroxy.net/blog/pages/lz-
string/index.html](http://pieroxy.net/blog/pages/lz-string/index.html)

[2] [https://github.com/pieroxy/lz-
string/pull/98#issuecomment-40...](https://github.com/pieroxy/lz-
string/pull/98#issuecomment-404166788)

~~~
whowouldathunk
You realize that all of Pride and Prejudice is ~280KB, right?

[http://www.gutenberg.org/ebooks/1342](http://www.gutenberg.org/ebooks/1342)

:)

~~~
LyndsySimon
Even so, I often store images within my online notes. Linking out to them is
one option, but of course means that my notes would be dependent upon a third
party host. Being able to paste image blobs into the document and store them
with the text would be an advantage if I were to want to use this.

~~~
asadlionpk
I don't think you can paste images into a Markdown editor.

~~~
shakna
Most Markdown parsers will accept a data:uri blob, as they allow inline HTML.

------
neya
Personally, I bookmarked this piece of code, so that everytime I open a new
tab and want to take notes, I just open one and press my bookmark link:

    
    
        data:text/html, <body contenteditable style="font: 2rem/1.5 monospace;max-width:60rem;margin:0 auto;padding:4rem;">
    

Alternatively, you could also paste this in your browser URL bar and press
enter.

I got this code from some GitHub gist, but it has served me well for many
years.

~~~
vanderZwan
This works great! I can combine it with Firefox' often-forgotten _" Keyword"_
feature of bookmarks so that typing _note_ in the URL bar automatically opens
this. And to save a note I just press CTRL+S

Microscopic tweak: white font on black background

    
    
        data:text/html, <body contenteditable style="font: 2rem/1.5 monospace;max-width:60rem;margin:0 auto;padding:4rem;color:white;background-color:black;">
    

EDIT: Another tweak: give the body focus automatically

    
    
        data:text/html, <html><body id='.' contenteditable style="font: 2rem/1.5 monospace;max-width:60rem;margin:0 auto;padding:4rem;color:white;background-color:black;"></body><script type="text/javascript">var div = document.getElementById('.');setTimeout(function() {div.focus();}, 0);</script></html>

------
soared
I just use the papier chrome extension. Same exact thing except it actually
displays styles and is easier to install.

[https://getpapier.com/](https://getpapier.com/)

~~~
vanderZwan
Not open source though, as far as I can tell. Also, and I know this is stupid,
but any website this fancy for a simple extension makes me a bit suspicious.

~~~
weaksauce
That’s fine to be skeptical but they are a design and consulting firm. Makes
sense that they could bang something nice out and if it’s popular the link
back will help their seo and perhaps directly get them business.

------
ravenstine
Serious question: does anyone regularly use a Markdown notes
app/site/extension?

I've seen this kind of thing appear a few times a year and, while they are
cool and I like Markdown, I find I stop using them rather quickly in favor of
things like the macOS Notes app or Slack because of things like convenience,
ease of sharing, better search, more ease of mind that my notes won't one day
disappear because of a side effect of clearing history or because the
developer didn't understand browser storage API quirks. For example, I used
Dillinger.io until the interface was updated and my notes were gone. I seem to
remember another one that interacted with gist.github.com until one day it
didn't. Hurray.

I think a company around a Markdown based app or extension would be good
because other solutions don't embrace Markdown, and the ones that do might be
a flash in the pan.

~~~
locofocos
I recently started taking notes in markdown. I previously had notes scattered
across txt files, Word docs, ColorNote, and emails to myself.

I take journal-type notes about personal things, and I demand that I have them
available conveniently decades from now. I strongly prefer a dark theme. I was
going to jump ship entirely to OneNote, but I can't get a dark theme on
Desktop and mobile.

Moving to markdown has tremendous benefits. You have proper separation of
concerns- "how do I edit on X platform" vs "how do I store my notes".

For storage, I've considered a git repo, but I'm using Dropbox for now. It has
30 day history, so I can correct for any mistake I'd care about.

For editing, I pick an editor on my current platform. Atom on Desktop. IA
writer on Android.

I don't currently have great search, but I think I can do that with Dropbox.
I'm more concern about future-proofing and dark theme.

~~~
ycombinete
Sounds like you might be a candidate for ConnectedText [0]

[0] [http://www.connectedtext.com/](http://www.connectedtext.com/)

------
arxpoetica
This is really cool and I'll use it. My only negative comment is that white on
black is really harsh on my eyes. It would be nice if the theme could be toned
down a bit somehow.

~~~
swsieber
I much prefer it to a lower contrast setup. And it does mimic a terminal.

I do wonder if it's controlled by the current chrome theme, given that the tab
recorded in the window is also dark.

~~~
stronglikedan
To be fair, most terminals I've encountered aren't _white_ on black, but more
of a light grey on black. I believe that's what OP means by toning it down a
bit. While I do prefer a higher contrast as you do, I agree with OP in that
this is too high.

------
hknd
Reminds me on "Mindful Chrome Extension", which I've been using a lot

[https://chrome.google.com/webstore/detail/mindful-
beta/cieek...](https://chrome.google.com/webstore/detail/mindful-
beta/cieekmjjdkckhpidgaffphlaljdfhhab)

------
coryfklein
I _love this_ , and I wish I could use it, but I've moved to Firefox. You'd
have an instant daily user right here if you released it in Firefox.

~~~
rhelmer
I just tried and appears to work OK (Firefox 61.0.1, macOS)... since it's
unsigned I loaded it as a temporary add-on in about:debugging

plibither8, would you mind adding instructions to load this into Firefox in
your README as well as Chrome? Also please upload to addons.mozilla.org as
well as the Chrome Store.

Nice work!

~~~
rhelmer
In case anyone is curious why this works, Firefox switched to a new extensions
API which tries to stay compatible with the one Chrome uses:

[https://developer.mozilla.org/en-US/Add-
ons/WebExtensions](https://developer.mozilla.org/en-US/Add-ons/WebExtensions)

------
bendavis381
Why would you use markdown to take notes? Markdown is designed to be displayed
as rich-text (headings, lists, etc) after authoring. If you only ever view it
in plaintext as an editor, what's the point?

~~~
bdickason
I take notes in Markdown in an editor that formats it automagically called IA
Writer. Bullets are indented, headlines bolded and out-dented, etc.

~~~
erikbye
Also:

[https://caret.io/](https://caret.io/)
[https://typora.io/](https://typora.io/)

~~~
cben
Also the venerable [https://stackedit.io/](https://stackedit.io/). Also the
new GitBook [https://docs.gitbook.com/v2-changes/feature-
highlights#unifi...](https://docs.gitbook.com/v2-changes/feature-
highlights#unified-experience-between-reading-and-editing)

I'm sure there are a few more markdown "WYSIWYM" I'm forgetting...

To build your own see also [https://simplemde.com/](https://simplemde.com/).
Basically CodeMirror is friendly to mixed-font syntax highlighting.

Also yours truly [https://mathdown.net](https://mathdown.net)

------
tom_usher
I'm a big Moo.do[0] fan - I use it for notes, my todo list, and agenda, so at
the moment I've got it set up as my new tab with some custom CSS to hide the
stuff I don't need to see in that context.

This seems to distill the concept down very nicely - quicker to load and
straight to the point. Sadly I'd miss the structure of Moo.do but I can
definitely see a world in which I'd use it - nice work.

[0] [https://www.moo.do](https://www.moo.do)

------
writepub
Dear HN - you might be interested in Write.Pub
([http://write.pub](http://write.pub)) It has both a WYSIWYG and raw markown
editing mode. The USP is built-in git - if you ever wanted to showcase the
power of version control to a non-programmer, but didn't want to put them
through a git bootcamp, this might be the right tool for a common use case -
note taking and writing

------
robszumski
My favorite scratch pad is a simple bookmarklet:

"data:text/html, <textarea style="font-size: 1.2em; width: 100%; height: 100%;
border: none; outline: none"
autofocus></textarea><script>window.onbeforeunload = function(e) { return
'really close?'; };</script>"

Keep it open as long as you need, and it prompts to confirm before you close
it.

------
TruthSHIFT
I've been using this all day and it's amazing.

It's not a replacement for a notes app. Instead, I'm using it to remind me
where I left off on my work. It's helping me stay focused. Instead of seeing
the distracting new tab screen, I see what I'm supposed to work on.

------
crehn
For those using iCloud, another simple trick is to

    
    
      alias n='vim ~/Library/Mobile\ Documents/com~apple~CloudDocs/Notes.md'
    

Then just type

    
    
      n
    

to access your scratch pad. All nicely synced between devices.

~~~
codetrotter
Wait, so if I do this in macOS, do I get formatted notes when I sync them to
my iPhone if I use markdown syntax?

------
j2kun
I just have a bookmarklet. If you're writing something so detailed it needs
formatting, you shouldn't be doing it in a browser tab.

data:text/html;charset=utf-8,<title>Notepad</title><style>body{background:#fbfbfb;color:#333;margin:0
auto;width:60rem}textarea{background:#fbfbfb;border:0;color:#333;font-
family:monospace;font-size:1.5rem;height:98%;line-height:1.2;margin:0
auto;outline:0;padding:4rem;width:100%}@media (max-
width:768px){body{width:100%;padding:0}textarea{padding:10px}}</style><body><textarea
contenteditable id=TE spellcheck=false autofocus></textarea>

------
nautilus12
Too bad I gave up on Chrome...

~~~
mcguire
Apparently, the Firefox API is now similar to Chrome's, if you use that.
([https://news.ycombinator.com/item?id=17507819](https://news.ycombinator.com/item?id=17507819))

~~~
nitemice
Similar enough that it's possible to run some Chrome extensions in Firefox.
I've been using Foxified [1] to do this for a while, and while it's not always
perfect, it worth a try in most cases.

[1] [https://addons.mozilla.org/en-US/firefox/addon/chrome-
store-...](https://addons.mozilla.org/en-US/firefox/addon/chrome-store-
foxified/)

------
bsg75
This is interesting. Where are notes saved?

~~~
faheywf
The documentation states that the notes are saved in localStorage.

------
olalonde
Cool idea. A vim mode would be neat (e.g.
[https://codemirror.net/demo/vim.html](https://codemirror.net/demo/vim.html)).

------
drcode
Thanks, I'll use this for entering my "three goals for the day" in the
morning! (also, for those who missed it: The particle effects can be disabled
in the settings.)

~~~
nickjj
If you like things like that, try out the Momentum extension.

It's focused on short lived todo lists but also has some amazing random
scenery pictures.

I've never had a more pleasant and welcoming new tab window.

[https://chrome.google.com/webstore/detail/momentum/laookkfkn...](https://chrome.google.com/webstore/detail/momentum/laookkfknpbbblfpciffpaejjkokdgca)

------
Anm
I have the following URL as the first bookmark on all browser bookmark bars:

    
    
      data:text/html, <html contenteditable>
    

It isn't nearly as featureful as a full Markdown editor, and it won't save the
contents of the tab to localstorage or anywhere else, but it is about as
simple a solution as you can get.

------
davidjhall
Nice - but I wish it didn't take over the New Tab button since I use that for
quick access; Since it's icon is in the status bar, why not just click on it
to open a markdown tab?

*Edit: Yes, I know it's in the name of the extension :-) -- just wish I could change the default.

~~~
ake1
just fork it and add your "quick access" at the top of the page?

i've been using a custom new-tab-page extension for a long time, it even comes
with an integrated alarm-clock!

------
coolgoose
I am really confused on why this is useful and not any other proper-ish note
taking application.

~~~
braythwayt
Think about "Why text files won for programming source code."

Rich formats like Smalltalk's images are vastly superior as long as you stay
within the ecosystem. But plain text is "worse is better" at scale. You get
more tools, more interoperability, more of everything.

Markdown is the plain text file winner for uncomplicated words. It's somewhat
portable between a myriad of tools. When you drop into a "Better" tool like
OneNote, you get all sorts of amazing wins... Provided you stay within the
walled garden it provides.

Speaking as an author, I blog in markdown, I take notes in markdown, and I
publish my books from markdown source for this very reason.

Heck, being able to put my books in GitHub and do pull requests is enough
reason all by itself!

\---

If you meant, "Why a tab instead of a separate app that works with Markdown,"
none of what I wrote above applies. I was speaking strictly to why Markdown
instead of some proprietary-format notes app.

~~~
mcguire
" _Why a tab instead of a separate app that works with Markdown_ "

I'll bet the answer is similar: Everyone already has a browser open and quite
a lot of notes are copy-n-pasted from other tabs. Availability,
interoperability, etc.

------
ax0ar
I like this. Could you guys add a mode that hides the right and bottom part
and only shows the notes? Also, popping up a Markdown cheatsheet via a
shortcut would be dope for those who don't use the syntax often.

------
rutierut
For Apple users, I use macdown[0] a stand-alone application that does
basically the same thing, like it a lot.

[0] [https://macdown.uranusjr.com/](https://macdown.uranusjr.com/)]

------
discaler
Look good. However, on mac I would really prefer using native apps for taking
notes as they are fast and has a nice design like bear. Chrome can slow down
easily and is unreliable at times.

~~~
jehlakj
Or because I usually have a gazillion tabs open.

------
mderazon
It would have been nice to have the text automatically formatted while you
type instead of having "edit mode" to switch between plain text and formatted
md.

Dropbox Paper does that really nicely.

------
SolarNet
Use the Gingko App instead. It's even local these days. Whole tree of markdown
in a single page,

[http://gingkoapp.com/](http://gingkoapp.com/)

------
HashBasher
How can I add new notes? Or is it just a single page for all notes?

------
halite
How do you interpret these licensing terms:

License Copyright (c) Mihir Chaturvedi. All rights reserved. Licensed under
the MIT License.

If Mihir has all rights reserved, what's the purpose of adding MIT with it?

~~~
Nokinside
Open source license does not mean giving up intellectual property rights. You
can only license the work if you own the rights to the work.

MIT License starts with copyright notice:

    
    
        Copyright (c) <year> <copyright holders>
    
        Permission is hereby granted, free of charge, to any person
        obtaining a copy of this software and associated 
        documentation files (the "Software"), to deal ....

~~~
jwilk
OTOH, you don't need to say "All rights reserved" to hold your rights:

[https://en.wikipedia.org/wiki/All_rights_reserved](https://en.wikipedia.org/wiki/All_rights_reserved)

------
jordanwallwork
Neat idea. I hope this idea gets dropped though

> To do: Other gimmicks to make it less minimalistic (?)

~~~
plibither8
I too was considering to remove that, I probably will!

------
askvictor
This is neat, but are there any like this that you can pull up on your phone?

------
bdickason
This is a great idea!

