Skip to content

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

License

Notifications You must be signed in to change notification settings

JSerwatka/notion-syntax-highlighter

Repository files navigation

Notion Syntax Highlighter

Buy Me A Coffee

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

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

Improved syntax highlighting

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

It's noticeably improved with this extension. Default vs Notion Syntax Highlighter

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. language change


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 image
  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. image

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

About

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

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published