Set up code highlighting

NoelDeMartin · Jan 20, 2025 · 6177bba · 6177bba
1 parent 6236188
commit 6177bba
Show file tree

Hide file tree

Showing 8 changed files with 105 additions and 0 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,6 +7,7 @@
         "lint": "prettier . -c"
     },
     "dependencies": {
+        "prismjs": "^1.29.0",
         "tailwindcss": "^4.0.0-beta.9"
     },
     "devDependencies": {

diff --git a/resources/assets/css/code.css b/resources/assets/css/code.css
@@ -0,0 +1,15 @@
+@import 'prismjs/themes/prism-tomorrow.css';
+
+code {
+    background-color: #f1f5f8;
+    border-radius: 0.5rem;
+    color: #266193;
+    font-size: 0.875em;
+    font-weight: 400;
+    padding: 0.25rem 0.5rem;
+}
+
+:not(pre) > code[class*='language-'],
+pre[class*='language-'] {
+    border-radius: 0.5rem;
+}
diff --git a/resources/assets/js/code.js b/resources/assets/js/code.js
@@ -0,0 +1,68 @@
+let Prism;
+
+async function loadPrism() {
+    if (Prism) {
+        return;
+    }
+
+    Prism = await import('prismjs');
+    await import('prismjs/components/prism-javascript');
+    await import('prismjs/components/prism-json');
+    await import('prismjs/components/prism-markup-templating');
+    await import('prismjs/components/prism-php');
+    await import('prismjs/components/prism-scss');
+    await import('prismjs/components/prism-turtle');
+    await import('prismjs/components/prism-typescript');
+}
+
+function getLanguage(element) {
+    for (const className of element.classList) {
+        if (!className.startsWith('language-')) {
+            continue;
+        }
+
+        return className.substr(9);
+    }
+}
+
+function highlightCodeElement(element, language) {
+    if (
+        element.parentElement &&
+        element.parentElement.tagName &&
+        element.parentElement.tagName.toLowerCase() === 'pre'
+    ) {
+        element.parentElement.classList.add(`language-${language}`);
+    }
+
+    element.innerHTML = Prism.highlight(
+        element.innerText,
+        Prism.languages[language],
+        language,
+    );
+}
+
+async function highlightCode() {
+    const codeElements = document.querySelectorAll('code');
+
+    if (codeElements.length === 0) {
+        return;
+    }
+
+    await loadPrism();
+
+    for (const codeElement of codeElements) {
+        const language = getLanguage(codeElement);
+
+        if (!language) {
+            continue;
+        }
+
+        highlightCodeElement(codeElement, language);
+    }
+}
+
+if (document.readyState === 'complete') {
+    highlightCode();
+} else {
+    document.addEventListener('DOMContentLoaded', highlightCode);
+}
diff --git a/resources/views/blog/show.blade.php b/resources/views/blog/show.blade.php
@@ -1,5 +1,9 @@
 @extends('layout', ['minimal' => true])
 
+@push('head')
+    @vite(['resources/assets/css/code.css', 'resources/assets/js/code.js'])
+@endpush
+
 @section('main')
     <article>
         <div class="max-w-readable">

diff --git a/resources/views/layout.blade.php b/resources/views/layout.blade.php
@@ -19,6 +19,7 @@
             }
         </style>
         @vite(['resources/assets/css/main.css', 'resources/assets/js/main.js'])
+        @stack('head')
     </head>
     <body
         x-data="{ navigationOpen: false }"

diff --git a/resources/views/tasks/show.blade.php b/resources/views/tasks/show.blade.php
@@ -1,5 +1,9 @@
 @extends('layout', ['minimal' => true])
 
+@push('head')
+    @vite(['resources/assets/css/code.css', 'resources/assets/js/code.js'])
+@endpush
+
 @section('main')
     <article class="max-w-readable">
         <h1>{{ $title }}</h1>

diff --git a/vite.config.js b/vite.config.js
@@ -7,7 +7,9 @@ export default defineConfig({
         tailwindcss(),
         laravel({
             input: [
+                'resources/assets/css/code.css',
                 'resources/assets/css/main.css',
+                'resources/assets/js/code.js',
                 'resources/assets/js/main.js',
             ],
             refresh: true,