OneMark use CSS to stylish all contents and supports common markdown themes, especially from Typora. You could download, modify or write your own custom theme.

Usually all notes will be affected when applying theme in other editors. However it is hard to do that in OneNote, so it will only affect current note and future notes.

Install Themes

  1. Click Open Theme Folder.
  2. Copy or move .css file into the opened folder.
  3. Click Reload Themes.

Icons in Blockquote

Headers in blockquote > # comes with extra icons, for example:

You can add following rules to customize icons, with any emoji or characters.

:root {
/* h1-h6 icons in sequence */
--blockquote-heading-icons: 🔍,⭐,💡,📝,⚠️,⛔;

This feature can also be disabled.

:root {
    --enable-heading-in-blockquote: false;

Supported CSS Properties

OneNote has limited support for CSS. Here’s the full introduction.

Property Description
color,background no support for gradient or image
font-family only take first value in the list
border only for blockquote and code block; no control for single side, width or color
padding,margin not for inline elements; only top/bottom for block elements, left/right for ::before/after
font-weight only bold, normal
font-style only italic, normal
text-decoration only underline, line-through, none
width only for <body> (to assign page width)

Code Highlighting

OneMark use highlight.js to highlight code. You can choose one from the gallery, view the source and paste it into your own .css file.

OneMark also supports CodeMirror themes.