test

Author: khadni

src/components/HeadCommon.astro

@@ -58,6 +58,31 @@ const { title } = Astro.props
 <!-- Scrollable a11y code helper - defer to not block render -->
 <script src="/make-scrollable-code-focusable.js" defer></script>
 
+<!-- Prism.js for client-side syntax highlighting (to fix browser extension conflicts) -->
+<script is:inline>
+  window.Prism = window.Prism || {}
+  window.Prism.manual = true // Prevent auto-highlighting on load, we'll control it via our script
+</script>
+<script
+  src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"
+  integrity="sha512-9khQRAUBYEJDCDVP2yw3LRUQvjJ0Pjx0EShmaQjcHa6AXiOv6qHQu9lCAIR8O+/D8FtaCoJ2c0Tf9Xo7hYH01Q=="
+  crossorigin="anonymous"
+  referrerpolicy="no-referrer"
+  defer></script>
+<script
+  src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"
+  integrity="sha512-SkmBfuA2hqjzEVpmnMt/LINrjop3GKWqsuLSSB3e7iBmYK7JuWw4ldmmxwD9mdm2IRTTi0OxSAfEGvgEi0i2Kw=="
+  crossorigin="anonymous"
+  referrerpolicy="no-referrer"
+  defer></script>
+<script is:inline>
+  // Configure Prism autoloader to use CDN
+  window.Prism = window.Prism || {}
+  window.Prism.plugins = window.Prism.plugins || {}
+  window.Prism.plugins.autoloader = window.Prism.plugins.autoloader || {}
+  window.Prism.plugins.autoloader.languages_path = "https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/"
+</script>
+
 <!-- Preconnects to speed GTM/GA when they load -->
 <link rel="preconnect" href="https://www.googletagmanager.com" crossorigin />
 <link rel="preconnect" href="https://www.google-analytics.com" crossorigin />

src/scripts/fix-prism-extension-conflict.ts

@@ -30,14 +30,18 @@ function isPrismCompromised(): boolean {
   // Look for code elements with language-* class but no token spans inside
   const codeBlocks = document.querySelectorAll('pre code[class*="language-"]')
 
+  console.log("[Prism Fix] Checking", codeBlocks.length, "code blocks")
+
   for (const block of Array.from(codeBlocks)) {
     const hasTokens = block.querySelector('[class*="token"]')
     if (!hasTokens && block.textContent && block.textContent.trim().length > 0) {
       // Found a code block that should be highlighted but isn't
+      console.log("[Prism Fix] Found compromised block:", block)
       return true
     }
   }
 
+  console.log("[Prism Fix] All code blocks appear to be properly highlighted")
   return false
 }
 
@@ -79,16 +83,35 @@ function checkAndFix(delay = 100) {
  * Initialize the fix
  */
 function init() {
-  // Check immediately after DOM is ready
-  if (document.readyState === "loading") {
-    document.addEventListener("DOMContentLoaded", () => checkAndFix(50))
-  } else {
-    checkAndFix(50)
+  console.log("[Prism Fix] Initializing browser extension fix")
+  console.log("[Prism Fix] Prism available?", typeof window.Prism !== "undefined")
+
+  // Wait for Prism to load before attempting fixes
+  function waitForPrism() {
+    if (typeof window.Prism !== "undefined") {
+      console.log("[Prism Fix] Prism loaded successfully")
+      startChecking()
+    } else {
+      console.log("[Prism Fix] Waiting for Prism to load...")
+      setTimeout(waitForPrism, 100)
+    }
+  }
+
+  function startChecking() {
+    // Check immediately after DOM is ready
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", () => checkAndFix(50))
+    } else {
+      checkAndFix(50)
+    }
+
+    // Check again after a short delay (in case extension runs after us)
+    checkAndFix(200)
+    checkAndFix(500)
+    checkAndFix(1000)
   }
 
-  // Check again after a short delay (in case extension runs after us)
-  checkAndFix(200)
-  checkAndFix(500)
+  waitForPrism()
 
   // Set up a MutationObserver to detect if extension modifies code blocks
   const observer = new MutationObserver((mutations) => {

src/styles/index.css

@@ -92,20 +92,25 @@ strong {
 /* Override browser extensions (1Password, etc.) that inject dark themes into INLINE code elements ONLY */
 /* Specifically target ONLY inline code, never code inside pre tags or with token classes */
 /* Target: inline code in paragraphs, tables, and CopyText components */
-body p > code:not([class*="token"]),
-body li > code:not([class*="token"]),
-body td > code:not([class*="token"]),
-body th > code:not([class*="token"]),
-body .copyContainer > code:not([class*="token"]),
-body h1 > code:not([class*="token"]),
-body h2 > code:not([class*="token"]),
-body h3 > code:not([class*="token"]),
-body h4 > code:not([class*="token"]),
-body h5 > code:not([class*="token"]),
-body h6 > code:not([class*="token"]),
-body blockquote > code:not([class*="token"]),
-body a > code:not([class*="token"]),
-body span > code:not([class*="token"]) {
+/* Use descendant selector (space) to catch nested code (e.g., inside <strong>) */
+body p code:not([class*="token"]),
+body li code:not([class*="token"]),
+body td code:not([class*="token"]),
+body th code:not([class*="token"]),
+body .copyContainer code:not([class*="token"]),
+body h1 code:not([class*="token"]),
+body h2 code:not([class*="token"]),
+body h3 code:not([class*="token"]),
+body h4 code:not([class*="token"]),
+body h5 code:not([class*="token"]),
+body h6 code:not([class*="token"]),
+body blockquote code:not([class*="token"]),
+body a code:not([class*="token"]),
+body strong code:not([class*="token"]),
+body em code:not([class*="token"]),
+body b code:not([class*="token"]),
+body i code:not([class*="token"]),
+body span code:not([class*="token"]) {
   background: var(--theme-code-inline-bg) !important;
   background-color: var(--theme-code-inline-bg) !important;
   color: var(--theme-code-inline-text) !important;