Fix code block language label to show language name without prefix

Author: bigtiger

default.hbs

@@ -10,6 +10,10 @@
     <script src="//code.jquery.com/jquery-3.6.4.min.js" defer></script>
     <script src="{{asset "dist/app.js"}}" defer></script>
 
+    {{!-- Prism syntax highlighting --}}
+    <script src="https://cdn.jsdelivr.net/npm/prismjs@1/prism.min.js" defer></script>
+    <script src="https://cdn.jsdelivr.net/npm/prismjs@1/plugins/autoloader/prism-autoloader.min.js" defer></script>
+
     {{!-- contentFor/block scripts - use with defer --}}
     {{{block "scripts"}}}
 

src/css/components/code.css

@@ -40,12 +40,12 @@ pre.wrap {
     overflow-x: visible;
 }
 
-/* Language label — Prism adds language-* class to <pre> */
-pre[class*="language-"]::before {
+/* Language label — set via JS from Prism's language-* class */
+pre[data-language]::before {
     background-color: var(--color-yellow);
     border-radius: 0 0 4px 4px;
     color: var(--color-navy);
-    content: attr(class);
+    content: attr(data-language);
     font-family: 'Inter', sans-serif;
     font-size: 0.7rem;
     font-weight: 600;

src/js/post/index.js

@@ -1,6 +1,15 @@
 // Ship JS only active on post pages for better performance
 import tocbot from 'tocbot';
 
+// Set data-language on <pre> elements so CSS can display a clean label.
+// Runs on load to ensure Prism's autoloader has finished highlighting.
+window.addEventListener('load', () => {
+    document.querySelectorAll('pre > code[class*="language-"]').forEach((code) => {
+        const match = code.className.match(/\blanguage-(\w+)\b/);
+        if (match) code.closest('pre').dataset.language = match[1];
+    });
+});
+
 // Apply .wrap class to any <pre> immediately following a <!--wrap--> HTML card
 document.querySelectorAll('pre').forEach((pre) => {
     let node = pre.closest('.kg-code-card') ?? pre;