NewTab Notes Chrome Extension
A Markdown page that comes up everytime you open a new tab
If you're anything like me, you always have a browser open, and constantly opening new tabs. Since I briefly have the new tab open, I thought it would be helpful to have my notes in front of me for quick access and little reminders.
How to use
Learn you some Markdown! Specifically, GitHub-flavored Markdown with some extra features. Continue reading to discover those features!
I like to stay at the keyboard when possible without moving to the mouse. This helps my wrists from repeated stress throughout the day. Here are some keyboard shortcuts to help your wrists out!
ctrl-/will toggle the editor
ctrl-shift-/will toggle the settings (and editor if not open)
Escwill close any window that is open, such as the editor, settings, or a color picker.
There are several settings that you can take advantage of to customize your experience. The settings are saved as a JSON object into your Chrome storage. This means that if you have multiple computers with Chrome signed into your account, your settings and notes will persist between computers!
The settings can be adjusted.
"highlight": true | false. Enable/disable syntax highlighting in code blocks. This uses highlight.js.
"highlightTheme": "sometheme". Use the specified highlight.js theme. For a list of possible themes, see highlight.js themes and use the filename as the value, such as
"monokai-sublime". This only applies to code blocks, and not inline code. For inline code, please use a custom color or one of the built-in color presets.
"linkify": true | false. Enable/disable auto-linking. For example, https://github.com will autolink without requiring it to be written as
"html": true | false. Enable/disable rendering HTML. That is, if you have HTML in your Markdown, normally the HTML is ignored but if this setting is set to
truethen the HTML will pass through and render.
"toc": true | false. Enable/disable generating a table of contents with the markup
[[toc]]. See markdown-it toc for more info. This will create a ToC based on the H1-H2 headers.
"tasklists": true | false. Enable/disable rendering tasks lists with checkboxes.
- [ ]and
- [x]. Note this will render as disabled checkboxes, so they're not interactive.
"preset": "commonmark" | "zero" | "default". For more information on these presets, see the markdown-it docs. Omitted will use
"default". NOTE: if you set to anything other than
"default", other options like
linkifymay be ignored.
"font": "My Custom Font". Use this font as the general font when rendering your markdown. If you have multiple machines with different fonts, you can also specify fallbacks, eg:
"font"; "Comic Sans MS, sans". Defaults to your machine's sans font.
"codeFont": "My Custom Font". Use this font when rendering code blocks and inline code. If you have multiple machines with different fonts, you can also specify fallbacks, eg:
"font"; "Fira Code, mono". Defaults to your machine's mono font.
This uses TailwindCSS and therefore has some classes available for you to use in custom HTML inside your markdown.
If you want to enable HTML pass-thru in your Markdown, you'll need to add the
"html": true into your settings. Then, you can add any HTML to be
rendered in your notes.
For example, if you wanted to add columns for a list of links, you could do something like this:
# Links <div class="flex flex-wrap"> <div class="sm:w-1/2 md:w-1/3"> - github.com - twitter.com </div> <div class="sm:w-1/2 md:w-1/3"> - feedly.com - reddit.com </div> </div>
and it would render like this:
This is a complete rewrite of the upstream fork which served as my initial inspiration. Thanks to the author for publishing their extension! For my own enjoyment, I decided to re-write it to practice some Vue and TailwindCSS from scratch.