Skip to main content
On this page

Code Syntax Highlighting

The Syntax Highlighting feature of the TanaFlows theme is a professional code presentation solution designed for bloggers writing about technology, programming, or technical tutorials.

The theme integrates the popular Prism.js library but optimizes it to the maximum to prevent it from affecting page load speed for standard readers.

Key Benefits for Readers

  • Automatic Language Recognition & Beautiful Styling: Every code block (such as JavaScript, Python, HTML, CSS, C++, etc.) in your posts will automatically be highlighted using the dark “Tomorrow Theme”, which is easy on the eyes, clear, and highly readable.
  • One-click Copy Button (Copy to Clipboard): A toolbar featuring a “Copy” button will automatically appear above every code block. Readers only need to click it once to copy the entire code segment into their clipboard, avoiding manual highlighting and missing characters.
  • Lightning Fast Page Load: For articles that do not contain any code blocks, the system will not load a single byte of the Prism.js library, keeping page speeds at their peak.

Under-the-Hood Smart Mechanisms

To maintain a balance between gorgeous code styling and maximum page performance, Syntax Highlighting operates through the following process:

1. Conditional Loading

When a visitor opens a post, the theme quickly scans to see if there are any code blocks (<pre><code>) present.

  • If none are found: The Prism.js loading process stops immediately, saving user resources.
  • If found: The system waits until the browser is idle (requestIdleCallback) to render all text content and images first, then loads the code highlighter scripts. This removes any initial page-load blocking.

2. Autoloader (Language Loading on Demand)

Instead of pre-loading a massive JavaScript file containing hundreds of programming languages, the theme integrates an intelligent autoloader plugin.

For example, if an article has one JavaScript block and one Python block, the system reads their attributes and loads only the specific processing files for JavaScript and Python from the CDN, minimizing user bandwidth usage.

3. Separation of Styles and Logic

  • The interface CSS file (prism-tomorrow.min.css) is hosted directly on your server to ensure the styling is consistent and rendered instantly.
  • The JS files and helper plugins (Autoloader, Toolbar, Copy-button) are loaded asynchronously from the global Cloudflare CDN to optimize browser cache usage.