You Can Easily Access and Tweak Notenik's Default CSS

Did You Know That...
1

Notenik’s default CSS contains all of the styling Notenik applies to the each of your Notes, as they appear on the Display tab.

This CSS contains the code used to set the light or dark mode, or to use the System setting for light/dark mode (which of these you get will depend on your current light/dark setting in the Notenik preferences).

There are two relatively easy ways to access this CSS.

Option 1: Share Your Note as an HTML Doc

Notenik has a handy Share function beneath the Note menu (easily accessible via a keyboard shortcut). Note that this Share option is different from the one you will get by hitting the Share button in the toolbar!

Select the option beneath the Note menu and you will see a new Window titled Share a Note, giving you several sharing options. Under the Format heading, if you select HTML Document, then you will share all of the generated HTML used to Display the Note – including the embedded CSS, which you will find in the head section, between the starting and ending style tags.

If you select Copy to Clipboard as your output Destination, then hit OK, you can then paste the resulting output into a new file, using your preferred text editor.

Now delete everything up to and including the opening <style> tag, and everything starting with the closing </style> tag and down to the end, and you will have a file containing only the default CSS.

Save this in your Collection folder (the one containing your Notes) and name it display.css. Now reload your Collection and you should see your new CSS styling take effect.

Option 2: Generate Sample Display Template

Select the option named Generate Sample Display Template beneath the Collection menu.

You will then find two new files within your Collections folder, one named display.html and one named display.css.

For our purposes, you can (and should!) delete the one named display.html.

The one named display.css can then be opened and edited, using your preferred text editor, and you can then tweak the settings however it suits you.

When you are done, reload your Collection, and you should see your new CSS take effect.

Reference:

1 Like
2

I’ve played with the CSS and made some cosmetic tweaks. I’ve also added style for code block/fence. However I couldn’t find a solution for strikethrough. Currently only way to strike a word in “display” view is to use HTML tag <s>text</s>, but this is not so user friendly as it is much slower and dirtier compared to typing double tildes.

Additionally, according to my testing, some of the MultiMarkdown syntax are not parsed such as critic markup, subscript, superscript. Would you consider adding support for those?

Thank you.

3

Yes, I can look into adding these at some point. Thanks for the suggestions.

1 Like
4

See the latest beta for new support for strikethrough, subscripts and superscripts.

5

Thanks for the update, I wasn’t expecting that soon, you’re great!!!

Strikethrough is working as expected. However, sub- and superscripts have issues. They all require the closing character, otherwise they’re not parsed.

x^y and x~y→ are not parsed
x^y^ and x~y~→ are parsed

According to the Multimarkdown syntax and x^y and x~y should be parsed. I know every editor could treat these a bit different but I’d prefer the original Multimarkdown syntax.

Thanks

6

When it comes to this sort of thing, I tend to use the Markdown Guide as a reference. It clearly calls for the closing punctuation, without any equivocation.

When we’re talking about extensions to standard Markdown, I often find we’re on shifting sands, with different parsers working differently, often in undocumented ways.

Requiring the closing character is also safer, in the sense that it presents fewer opportunities for misinterpretation.

I always look at the MultiMarkdown syntax when trying to add some new feature to Notenik, but I don’t always treat it as the Bible, since other, later parsers have not all converged in the same way.

Hope you understand!

7

Got it! Thanks for the explanation and reasoning behind it. I really appreciate the effort you put into Notenik!

1 Like