# You Can Easily Access and Tweak Notenik's Default CSS

**URL:** https://discourse.notenik.app/t/you-can-easily-access-and-tweak-noteniks-default-css/52
**Category:** Did You Know That...
**Created:** [June 29, 2022, 5:56pm UTC](https://discourse.notenik.app/t/you-can-easily-access-and-tweak-noteniks-default-css/52 "2022-06-29T17:56:50Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![hbowie](https://discourse.notenik.app/user_avatar/discourse.notenik.app/hbowie/32/6_2.png) [@hbowie](https://discourse.notenik.app/u/hbowie)
#### Post date: [June 29, 2022, 5:56pm UTC](https://discourse.notenik.app/t/you-can-easily-access-and-tweak-noteniks-default-css/52/1 "2022-06-29T17:56:50Z")

</div>

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:

- [nkb/Tailor the Display](https://notenik.app/knowledge-base/EPUB/html/tailor-the-display.html)

---

<div class="post-metadata">

### Author: ![zgr](https://discourse.notenik.app/user_avatar/discourse.notenik.app/zgr/32/225_2.png) [@zgr](https://discourse.notenik.app/u/zgr)
#### Post date: [February 21, 2024, 4:09pm UTC](https://discourse.notenik.app/t/you-can-easily-access-and-tweak-noteniks-default-css/52/2 "2024-02-21T16:09:25Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![hbowie](https://discourse.notenik.app/user_avatar/discourse.notenik.app/hbowie/32/6_2.png) [@hbowie](https://discourse.notenik.app/u/hbowie)
#### Post date: [February 21, 2024, 6:29pm UTC](https://discourse.notenik.app/t/you-can-easily-access-and-tweak-noteniks-default-css/52/3 "2024-02-21T18:29:15Z")

</div>

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

---

<div class="post-metadata">

### Author: ![hbowie](https://discourse.notenik.app/user_avatar/discourse.notenik.app/hbowie/32/6_2.png) [@hbowie](https://discourse.notenik.app/u/hbowie)
#### Post date: [February 22, 2024, 8:55pm UTC](https://discourse.notenik.app/t/you-can-easily-access-and-tweak-noteniks-default-css/52/4 "2024-02-22T20:55:57Z")

</div>

See the [latest beta](https://discourse.notenik.app/t/beta-version-13-9-7-available-for-testing-on-february-22nd-2024/424) for new support for strikethrough, subscripts and superscripts.

---

<div class="post-metadata">

### Author: ![zgr](https://discourse.notenik.app/user_avatar/discourse.notenik.app/zgr/32/225_2.png) [@zgr](https://discourse.notenik.app/u/zgr)
#### Post date: [February 23, 2024, 12:53pm UTC](https://discourse.notenik.app/t/you-can-easily-access-and-tweak-noteniks-default-css/52/5 "2024-02-23T12:53:21Z")

</div>

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.

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

```

According to the [Multimarkdown syntax](https://rawgit.com/fletcher/MultiMarkdown-6-Syntax-Guide/master/index.html) 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

---

<div class="post-metadata">

### Author: ![hbowie](https://discourse.notenik.app/user_avatar/discourse.notenik.app/hbowie/32/6_2.png) [@hbowie](https://discourse.notenik.app/u/hbowie)
#### Post date: [February 23, 2024, 5:29pm UTC](https://discourse.notenik.app/t/you-can-easily-access-and-tweak-noteniks-default-css/52/6 "2024-02-23T17:29:41Z")

</div>

When it comes to this sort of thing, I tend to use the [Markdown Guide](https://www.markdownguide.org/extended-syntax/) 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!

---

<div class="post-metadata">

### Author: ![zgr](https://discourse.notenik.app/user_avatar/discourse.notenik.app/zgr/32/225_2.png) [@zgr](https://discourse.notenik.app/u/zgr)
#### Post date: [February 24, 2024, 3:02am UTC](https://discourse.notenik.app/t/you-can-easily-access-and-tweak-noteniks-default-css/52/7 "2024-02-24T03:02:52Z")

</div>

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