| Reddit Syntax Highlighting

Peak Users: 11
Date: May 8, 2024
URL: Chrome Webstore

How it works:

• I setup a content script to fire whenever the active tab domain matches this pattern "https://www.reddit.com/r/*".
• Reddit is a single-page application (SPA), which makes injecting code more challenging than on traditional websites. Since SPAs rerender dynamically, injected code can be erased multiple times.
• To handle this, I used a MutationObserver to monitor changes in the DOM and apply a callback whenever the document updates.
• Reddit marks any pasted code with <pre> tags, so my script loops through the document on each DOM change to check for this tag.
• When a <pre> tag is found, I apply syntax highlighting using a minified version of highlight.js with pre-selected languages and retrieve the current theme from chrome.storage.local.
• An optimization I implemented was adding a highlighted attribute to <pre> tags after applying highlighting. This allowed the script to quickly check for the attribute before reapplying, improving efficiency. Since the MutationObserver monitors the entire document, this optimization roughly doubled performance, providing a seamless user experience.

Key Features:

• Automatic Detection and Highlighting: Automatically detects code blocks and applies syntax highlighting without any manual intervention.
• Wide Range of Languages Supported: Supports a diverse array of programming languages, ensuring that whether you're looking at Python, JavaScript, TypeScript, Java, CPP, and many more!
• Customizable Themes: Choose from multiple highlighting themes to customize the appearance of code blocks according to your preference and comfort.