Notion Syntax Highlighter

Notion Syntax Highlighter is a Chrome extension that improves Notion's code blocks syntax highlighting and adds tons of theme options.

Contents

• Features
  • 245 themes available
  • Improved syntax highlighting
  • Update syntax highlighting on language change
• Developing
• For Brave users
• Known issues
• Build with

Features

245 themes available

From Groovbox to Solarized, find the theme that suits you best. Whether you prefer light mode or dark mode, I won't judge.

Improved syntax highlighting

Prism, which is used by Notion, has a rather limited keyword library.

It's noticeably improved with this extension.

Update syntax highlighting on language change

Notion lacks automatic updating of syntax highlighting when changing the language. To see the changes, you need to manually click on the code block.

This issue is resolved with this extension.

---

Developing

1. Check if your Node.js version is >= 14

2. Clone this repo and cd into it

   git clone https://github.com/JSerwatka/notion-syntax-highlighter.git
   cd notion-syntax-highlighter

3. Install the dependencies

   npm i

4. Build the project in dev mode

   npm run dev

5. Enable Developer mode in your Manage Extensions tab

6. Click Load unpacked, and select notion-syntax-highlighter/build folder

For Brave users

To make this extension work on Brave browser, please follow this instruction:

1. Right click the extension -> Manage extension
2. Enable developer mode and copy the ID
3. Go to brave shields settings (direct URL: brave://settings/shields/filters) and in the section "custom filters" add an exception: "@@chrome-extension://" (so for current version it will be @@chrome-extension://omapdeaklaaabcegmdikkciplbgignak). Don't forget to save changes.

---

Known issues

• Character limit on highlighting: Syntax highlighting gets disabled after reaching a certain character limit. This mechanism is built into Notion's code blocks originally due to performance issues.

• Slow on large code snippets: When you haven't reached the threshold for disabling syntax highlighting but still working with a very large code snippet, writing code inside a code block can become sluggish. This is an inherent issue with Notion's code blocks. I will explore ways to improve performance by identifying the differences between the previous and new code blocks and implementing granular HTML editing.

• Some languages are not supported by highlight.js: Highlighting and themes will fallback to Notion's default for certain languages, such as:

  • ABAP
  • Agda
  • Dhall
  • Flow
  • Idris
  • Mermaid
  • PureScript
  • Racket

  If you need support for these languages, please create a parser. Check higlightjs parsers for refernece.

• Changing Notion appearance requires page refreshing: When you switch the appearance of Notion from "dark" to "light" (or the other way around), the font color inside the code blocks may not always update. To solve this problem, refresh the page

• Language selector, cursor and option buttons are not visible in some themes: When a user selects a light theme for a code block while having a dark theme as the Notion color scheme, the "language selector" and cursor become invisible. Additionally, hovering over buttons like copy, caption, etc., causes them to disappear. The same issue exists when using a dark theme for the code block and a light theme for Notion

This extension requires thorough testing, so if you encounter any issues, please report them as bugs.

---

Build with

Chrome Extension with Vite template from create-chrome-ext

Themes and syntax highlighting thanks to highlight.js