NVIDIA-Omniverse · JenNVIDIA · Apr 14, 2026 · Apr 10, 2026
diff --git a/docs/_static/css/lousd_custom.css b/docs/_static/css/lousd_custom.css
@@ -110,4 +110,28 @@ html[data-theme="dark"] .home-header > h1 {
     font-style: italic;
     color: var(--pst-color-text-muted);
     text-align: center;
+}
+
+/***********
+* CODE HIGHLIGHTS (Sphinx / Pygments)
+************/
+
+/*
+ * Emphasized lines (:emphasize-lines: / hl_lines): background must span the full width of
+ * long lines inside horizontally scrollable blocks (issue #12).
+ */
+div.highlight {
+    overflow-x: auto;
+}
+
+div.highlight pre {
+    width: max-content;
+    min-width: 100%;
+    box-sizing: border-box;
+}
+
+div.highlight .hll {
+    display: block;
+    width: 100%;
+    box-sizing: border-box;
 }
diff --git a/docs/_static/js/lousd-hljs-theme.js b/docs/_static/js/lousd-hljs-theme.js
@@ -0,0 +1,66 @@
+/*
+ * SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * Toggle Highlight.js stylesheets to match Sphinx/Pygments light vs dark (data-theme).
+ * Notebook outputs embed CDN Highlight.js links; this disables those and applies one
+ * managed github / github-dark theme so colors stay consistent when the reader switches theme.
+ */
+(function () {
+  'use strict';
+
+  var HLJS_LIGHT =
+    'https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/github.min.css';
+  var HLJS_DARK =
+    'https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/github-dark.min.css';
+  var ID_LIGHT = 'lousd-hljs-github-light';
+  var ID_DARK = 'lousd-hljs-github-dark';
+
+  function isDarkTheme() {
+    return document.documentElement.getAttribute('data-theme') === 'dark';
+  }
+
+  function ensureLink(id, href) {
+    var el = document.getElementById(id);
+    if (!el) {
+      el = document.createElement('link');
+      el.rel = 'stylesheet';
+      el.href = href;
+      el.id = id;
+      document.head.appendChild(el);
+    }
+    return el;
+  }
+
+  function sync() {
+    var dark = isDarkTheme();
+    var lightLink = ensureLink(ID_LIGHT, HLJS_LIGHT);
+    var darkLink = ensureLink(ID_DARK, HLJS_DARK);
+    lightLink.disabled = dark;
+    darkLink.disabled = !dark;
+
+    document.querySelectorAll('link[href*="@highlightjs/cdn-assets"][rel="stylesheet"]').forEach(
+      function (l) {
+        if (l.id === ID_LIGHT || l.id === ID_DARK) {
+          return;
+        }
+        l.disabled = true;
+      }
+    );
+  }
+
+  /* Body (notebook embeds) is not parsed yet when this script runs in <head>. */
+  function syncWhenReady() {
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', sync);
+    } else {
+      sync();
+    }
+  }
+
+  syncWhenReady();
+  new MutationObserver(sync).observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ['data-theme'],
+  });
+})();
diff --git a/docs/conf.py b/docs/conf.py
@@ -95,6 +95,9 @@
 html_theme = 'nvidia_sphinx_theme'
 html_static_path = ['_static']
 html_css_files = ['css/lousd_custom.css']
+html_js_files = [
+    ('js/lousd-hljs-theme.js', {'priority': 10}),
+]
 html_theme_options = {
     "secondary_sidebar_items": {
         "**": ["page-toc"],

diff --git a/src/lousd/utils/visualization.py b/src/lousd/utils/visualization.py
@@ -33,9 +33,13 @@ def _get_highlightjs_imports() -> str:
     """
     Return the list of imports required for HighlightJS syntax highlighting features.
 
+    Notebook outputs embed this stylesheet; on the Learn OpenUSD Sphinx site,
+    ``lousd-hljs-theme.js`` disables it and loads GitHub Light/Dark to track ``data-theme``
+    (closer to Pygments than Atom One Dark alone).
+
     Parameters:
         None
-    
+
     Return:
         str: The HTML DOMElement resources required to import the required assets for HighlightJS.