Skip to content

Add support for highlighting code blocks using highlight.js. #54

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
markcho wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add support for highlighting code blocks using highlight.js. #54

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 44 additions & 0 deletions templates/main.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -418,6 +418,11 @@
background-color: transparent;
padding: 0;
}
/* Highlight.js overrides to match app theme */
pre code.hljs {
background: var(--code-bg);
padding: 0;
}
blockquote {
border-left: 4px solid var(--border-color-light);
padding-left: 16px;
Expand Down Expand Up @@ -454,6 +459,11 @@
{% if mermaid_enabled %}
<script src="/mermaid.min.js"></script>
{% endif %}

<!-- Highlight.js for syntax highlighting -->
<link rel="stylesheet" id="hljs-theme" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github.min.css">

@jfernandez jfernandez Feb 7, 2026

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Mermaid is gated behind {% if mermaid_enabled %} so it only loads when the markdown actually contains diagrams. Consider doing the same here. The server already checks for class="language-mermaid" in the rendered HTML to set that flag; a similar check for any class="language- that isn't mermaid would let you conditionally load highlight.js only when code blocks are present.

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/scala.min.js"></script>
<script>

@jfernandez jfernandez Feb 7, 2026

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The highlight.js core already includes ~40 common languages (Python, JS, Rust, Bash, etc.). This line loads only Scala, which seems like a personal addition. Remove it, or if there's a specific reason for it, add the languages agents commonly produce instead.

@markcho markcho Feb 10, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Working in the data space, Scala is still quite common. That being said, I understand why you wouldn't want every language listed here.

How about a parameter that controls which languages are included? Something like: --highlightjs=scala,foo,bar if you want to include support for languages that are not in the main pack.

@jfernandez jfernandez Feb 12, 2026

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The rendered HTML already contains class="language-scale" or whatever the language used. In the server-side logic, you can extract the language names from the HTML and then pass them to the template.

Then you can do something like this in the template:

<script src=".../highlight.min.js"></script>
{% for lang in languages %}
<script src=".../languages/{{ lang }}.min.js"></script>
{% endfor %}

@rafaelcaricio rafaelcaricio May 9, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, would be great to pull the languages actually used in the content. Makes it flexible enough. Probably needs a allowList somewhere to avoid 404 on unsupported languages by this library.

let lastModified = Date.now();

Expand Down Expand Up @@ -481,6 +491,7 @@
localStorage.setItem('theme', theme);
updateThemeSelection(theme);
updateMermaidTheme();
updateHighlightTheme();
closeThemeModal();
}

Expand Down Expand Up @@ -600,6 +611,38 @@
}
}

// Highlight.js management
function getHighlightTheme() {
const currentTheme = document.documentElement.getAttribute('data-theme');
switch (currentTheme) {
case 'dark':
return 'github-dark';
case 'catppuccin-latte':
return 'atom-one-light';
case 'catppuccin-macchiato':
case 'catppuccin-mocha':
return 'atom-one-dark';
case 'light':
default:
return 'github';
}
}

function initHighlightJs() {
if (typeof hljs !== 'undefined') {
updateHighlightTheme();
hljs.highlightAll();
}
}

function updateHighlightTheme() {
const themeName = getHighlightTheme();
const themeLink = document.getElementById('hljs-theme');
if (themeLink) {
themeLink.href = `https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/${themeName}.min.css`;
}

@jfernandez jfernandez Feb 7, 2026

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The CDN base URL and version 11.11.1 appear in 4 places. Minor, but worth extracting to a variable to make future version bumps easier.

}

// Auto-refresh functionality using WebSocket
function setupLiveReload() {
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
Expand Down Expand Up @@ -638,6 +681,7 @@
initTheme();
initSidebar();
initMermaid();
initHighlightJs();
setupLiveReload();

// Modal close functionality
Expand Down