[skip publish] highlight code blocks

Author: aorcsik

package-lock.json

@@ -22,23 +22,26 @@
     "cloudflare:upload_redirects": "./node-with-env.sh cloudflare.js",
     "build": "./node-with-env.sh build.js"
   },
+  "dependencies": {
+    "@highlightjs/cdn-assets": "^11.11.1"
+  },
   "devDependencies": {
     "@bitrise/eslint-plugin": "^2.12.0",
+    "cloudflare": "^4.5.0",
     "copy-webpack-plugin": "^13.0.0",
     "css-loader": "^6.8.1",
     "eslint": "^8.57.1",
     "eslint-plugin-jsdoc": "^46.2.6",
     "express": "^4.19.2",
+    "html-webpack-plugin": "^5.6.3",
     "jsdom": "^26.0.0",
+    "mini-css-extract-plugin": "^2.9.2",
     "prettier": "^3.2.5",
     "style-loader": "^3.3.3",
     "unzipper": "^0.12.3",
     "webpack": "^5.86.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-middleware": "^7.2.1",
-    "webpack-hot-middleware": "^2.26.1",
-    "cloudflare": "^4.5.0",
-    "html-webpack-plugin": "^5.6.3",
-    "mini-css-extract-plugin": "^2.9.2"
+    "webpack-hot-middleware": "^2.26.1"
   }
 }

package.json

@@ -680,10 +680,15 @@
               line-height: var(--code-md-line-height);
               font-weight: var(--code-md-font-weight);
               letter-spacing: var(--code-md-letter-spacing);
+              font-family: var(--code-font-family) !important;
               direction: ltr;
               word-wrap: pre-wrap;
               -webkit-overflow-scrolling: touch;
 
+              & * {
+                font-family: var(--code-font-family) !important;
+              }
+
               code {
                 font-family: inherit;
                 font-size: inherit;
@@ -738,6 +743,30 @@
                 }
               }
 
+              .copy-toast {
+                position: absolute;
+                top: 0.75rem;
+                right: 4.25rem;
+                background: var(--background-secondary);
+                color: var(--text-primary);
+                font-size: var(--body-sm-regular-font-size);
+                line-height: var(--body-sm-regular-line-height);
+                font-weight: var(--body-sm-regular-font-weight);
+                padding: 0.5rem 1rem;
+                border-radius: 0.25rem;
+                box-shadow: var(--elevation-sm);
+                opacity: 0;
+                pointer-events: none;
+                transform: translateY(-1rem);
+                transition: opacity 0.3s ease, transform 0.3s ease;
+
+                &.visible {
+                  opacity: 1;
+                  pointer-events: auto;
+                  transform: translateY(0);
+                }
+              }
+
               &.code-block {
                 padding-left: 0.25rem;
 

src/css/global.css

@@ -1,5 +1,9 @@
+import hljs from '@highlightjs/cdn-assets/es/highlight.js';
+import '@highlightjs/cdn-assets/styles/vs2015.css';
+
 import { onReset } from "./reset";
 
+
 /**
  * 
  * @param {string} language 
@@ -184,7 +188,7 @@ export const renderCodeBlocks = () => {
     const newCodeFragment = document.createFragment = document.createDocumentFragment();
 
     const originalCode = document.createElement('div');
-    originalCode.className = 'original-code';
+    originalCode.className = 'original-code' + (codeBlock.className ? ' ' + codeBlock.className : '');
     originalCode.innerHTML = codeBlock.innerHTML;
     newCodeFragment.appendChild(originalCode);
 
@@ -194,40 +198,61 @@ export const renderCodeBlocks = () => {
     copyButton.addEventListener('click', () => {
       navigator.clipboard.writeText(originalCode.textContent);
       copyButton.textContent = "Copied!"
+      copyButton.parentElement.querySelector('.copy-toast').classList.add('visible');
       setTimeout(function() {
-        copyButton.textContent = "Copy"
+        copyButton.textContent = "Copy";
+        copyButton.parentElement.querySelector('.copy-toast').classList.remove('visible');
       },
       2000)
     });
     newCodeFragment.appendChild(copyButton);
+    const copyToast = document.createElement("div");
+    copyToast.className = "copy-toast";
+    copyToast.textContent = "Copied to clipboard";
+    newCodeFragment.appendChild(copyToast);
 
+    hljs.highlightElement(codeBlock);
+    console.log('codeBlock:', codeBlock);
     const newCode = [];
     const codeLines = codeBlock.innerHTML.split('\n');
     codeLines.forEach((line, index) => {
-      newCode.push(`<div class="code-line" style="--line-number: '${index + 1}'; --max-line-number-length: ${(codeLines.length + 1).toString().length};">${line}</div>`);
+      newCode.push(`<div class="code-line" style="--line-number: '${index + 1}'; --max-line-number-length: ${(codeLines.length + 1).toString().length};"><span>${line}</span></div>`);
     });
     codeBlock.innerHTML = newCode.join('');
     codeBlock.classList.add('code-block');
     if (codeLines.length === 1) {
       codeBlock.classList.add('single-line');
     }
+
     codeBlock.appendChild(newCodeFragment);
   });
 
   if (import.meta.webpackHot) onReset(() => {
     Array.from(document.querySelectorAll('.programlisting')).forEach((codeBlock) => {
-      const resetCodeFragment = document.createDocumentFragment();
-      resetCodeFragment.appendChild(codeBlock.querySelector('.code-button'));
       const originalCode = codeBlock.querySelector('.original-code');
       if (originalCode) {
         codeBlock.innerHTML = originalCode.innerHTML;
+        codeBlock.className = originalCode.className
+        codeBlock.classList.remove('original-code');
+        delete(codeBlock.dataset.highlighted);
       }
-      codeBlock.appendChild(resetCodeFragment);
-      codeBlock.classList.remove('code-block');
-      codeBlock.classList.remove('single-line');
     });
   });
-}
+};
+
+export const renderCodeBlocksWithHighlightJs = () => {
+  let originalCodeBlocks = [];
+  Array.from(document.querySelectorAll('.programlisting')).forEach((codeBlock) => {
+    originalCodeBlocks.push(codeBlock.innerHTML);
+    hljs.highlightElement(codeBlock);
+  });
+
+  if (import.meta.webpackHot) onReset(() => {
+    Array.from(document.querySelectorAll('.programlisting')).forEach((codeBlock, index) => {
+      codeBlock.innerHTML = originalCodeBlocks[index];
+    });
+  });
+};
 
 export const renderNavbarSearch = () => {
   const navbarHeader = document.querySelector('.navbar-header');