the enhancer is essentially a modloader for notion. this document contains the specifications ofhow those modules can be made and what they should contain.

1. Notion Markdown Supported

Notion lets you write in Markdown or use normal keyboard shortcuts and UI elements to format your text. Support for setting the image width when compatible with Markdown syntax. Useful Table insert and LaTeX writing aids. In Notion, markdown is first class citizen so you can. Before Notion, I was experimenting with Quiver because Evernote doesn’t support code syntax at. Notion’s Markdown support is hit or miss. Copying and pasting Markdown-formatted text into Notion generally works the way you’d expect, but using Notion’s live editor to write using Markdown doesn’t always work. Support Markdown language and notion.so style interface. Posted at 18:06h in by Maarten. Main Ideas Support Markdown language and notion.so style.

this file assumes basic working knowledge of modern javascript and css. since these are the languagesexecutable within the notion app, these are the languages enhancements must be written in.

want to contribute? check the contribution guidelines.

for support, join the discord server.

creating a mod

to understand best how notion’s app works, check out the electron docs,explore the contents of your local extracted app.asar, and navigate the html structure with the devtools web inspector.

look through the existing modulesfor examples of the stuff described below in action.

at the moment, for ease of development and use (and security assurance), there’s no way for usersto install their own modules. this means that testing modules requiresrunning a dev build of the enhancer. a better system is in the works.

once your mod is working, open a pull request to add it to the enhancer!

each directory in the mods folder is considered a module, with the file entry points mod.js,variables.css, app.css, tabs.css and menu.css.

mod.js

a module that with the primary function of being a hack should be tagged as an extension,while a module that has the primary function of adding styles should be tagged as a theme.

Affinity photo pixelmator pro. Affinity Photo is an effective non-destructive photo editor with a similar structure and application to Adobe Photoshop, which focuses on photo editing. The main advantage when used for photo retouching purposes is that you can save and restore your work in just one click. Affinity Photo is like Photoshop and if you haven' used PS, then AP can have a steep learning curve. Pixelmator is easier to use but a lot less powerful. I’ve been messing around with Affinity now with the free trial, it’s definitely a curve for me. Haven’t used PS before. Pixelmator Pro is definitely the ‘new’ kid on the block getting all the attention in the wake of the introduction of Affinity photo. Love it or hate the design, it is very similar to the latest macOs applications even behaving like Apple’s own Photos app – with your work front and center and the tools hiding away until you need them.

author

by default this is assumed to be a github username: just pass it as a string andthe link/avatar will be automatically found.

if you’d rather customise this, pass this object:

options

the file option stores only a filepath, not the file itself.

hacks

each “hack” is a function taking 2 arguments.

1. the store argument, which allows access to the module settings/options defined in mod.js(those set in the menu, or used internally by the module). each module store is automatically saved to +loaded from ~/.notion-enhancer/id.json.it should always be called as store({ defaults }) (not stored in a variable),but otherwise treated as a normal object to access and set things.
2. the __exports argument, which is the module.exports of the file being modded.this can be used to call or replace functions from notion.

this hack is applied to whichever file (.js-only) is set as the function key. these can be found within the app folder.

files under the main folder are executed on app launch in a process sharedbetween all app windows (consider it a backend). files under the renderer folder areexecuted on window launch in a pre-window process: the client-side javascriptnormally expected to run on a webpage.

unless scripts need to change app logic (e.g. to add the tray menu),they should usually be applied to renderer/preload.js to interactwith the app window itself.

e.g.

the enhancement:// protocol

any files within the mods folder can be loaded with the enhancement:// protocol.

for example, inserting an image from the core mod: <img src='enhancement://core/image.png'>.

variables.css

inserted into all windows.

(put font import statements here too.)

the enhancer has been designed with theming in mind, so as much of notion’s coloursand typography as possible and some basic spacing (both for the light and dark themes) have been mapped outusing css variables.

this set of variables is 100% mandatory to use if you wish to use or change anything they handle(particularly colours). this is necessary to keep all themes consistently working(e.g. responding properly to light/dark theme changes), and it makes theming a lot easier -notion’s html structure needs some complex selectors to properly modify it,and it means theme authors don’t have to worry about separately updating their theme every time something changes.

the full/up-to-date list of variables and their default values can be found in thecore variables.css file. each variable is named something along the lines of--theme_mode--target_name-property. still not sure what a variable does? try changing it and seeing what happens.

these are all made possible by the core module. if you believe this set of variables is buggy or lacking in any way,consider opening a pull request to fix those issues - please do not try and reinvent the wheel unnecessarily.

using variables

variables should be defined per-mode, but used without specifying. for example:

this to simplify styling and make it possible for things like the “night shift” module to work,by leaving the choice of light/dark theme up to the user and then directing the right values tothe relevant variables.

app.css

inserted into the notion app window.

tabs.css

inserted into the notion app container for styling tabs.

menu.css

inserted into the enhancements menu.

Notion Markdown Supported