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.

Published on the Chrome Web Store

How to use

Learn you some Markdown! Specifically, GitHub-flavored Markdown with some extra features. Continue reading to discover those features!

Keyboard Shortcuts

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)
• Esc will close any window that is open, such as the editor, settings, or a color picker.

Settings

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.

• "emoji": true | false Enable/disable emojis to be written as :) to render as a shortcut

• "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 [https://github.com](https://github.com)

• "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 true then 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 linkify may 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.

Screenshot

Tips

Custom HTML

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 option "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:

Credits

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.