Skip to content

Commit 6177bba

Browse files
committed
Set up code highlighting
1 parent 6236188 commit 6177bba

File tree

8 files changed

+105
-0
lines changed

8 files changed

+105
-0
lines changed

package-lock.json

+10
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

+1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
"lint": "prettier . -c"
88
},
99
"dependencies": {
10+
"prismjs": "^1.29.0",
1011
"tailwindcss": "^4.0.0-beta.9"
1112
},
1213
"devDependencies": {

resources/assets/css/code.css

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
@import 'prismjs/themes/prism-tomorrow.css';
2+
3+
code {
4+
background-color: #f1f5f8;
5+
border-radius: 0.5rem;
6+
color: #266193;
7+
font-size: 0.875em;
8+
font-weight: 400;
9+
padding: 0.25rem 0.5rem;
10+
}
11+
12+
:not(pre) > code[class*='language-'],
13+
pre[class*='language-'] {
14+
border-radius: 0.5rem;
15+
}

resources/assets/js/code.js

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
let Prism;
2+
3+
async function loadPrism() {
4+
if (Prism) {
5+
return;
6+
}
7+
8+
Prism = await import('prismjs');
9+
await import('prismjs/components/prism-javascript');
10+
await import('prismjs/components/prism-json');
11+
await import('prismjs/components/prism-markup-templating');
12+
await import('prismjs/components/prism-php');
13+
await import('prismjs/components/prism-scss');
14+
await import('prismjs/components/prism-turtle');
15+
await import('prismjs/components/prism-typescript');
16+
}
17+
18+
function getLanguage(element) {
19+
for (const className of element.classList) {
20+
if (!className.startsWith('language-')) {
21+
continue;
22+
}
23+
24+
return className.substr(9);
25+
}
26+
}
27+
28+
function highlightCodeElement(element, language) {
29+
if (
30+
element.parentElement &&
31+
element.parentElement.tagName &&
32+
element.parentElement.tagName.toLowerCase() === 'pre'
33+
) {
34+
element.parentElement.classList.add(`language-${language}`);
35+
}
36+
37+
element.innerHTML = Prism.highlight(
38+
element.innerText,
39+
Prism.languages[language],
40+
language,
41+
);
42+
}
43+
44+
async function highlightCode() {
45+
const codeElements = document.querySelectorAll('code');
46+
47+
if (codeElements.length === 0) {
48+
return;
49+
}
50+
51+
await loadPrism();
52+
53+
for (const codeElement of codeElements) {
54+
const language = getLanguage(codeElement);
55+
56+
if (!language) {
57+
continue;
58+
}
59+
60+
highlightCodeElement(codeElement, language);
61+
}
62+
}
63+
64+
if (document.readyState === 'complete') {
65+
highlightCode();
66+
} else {
67+
document.addEventListener('DOMContentLoaded', highlightCode);
68+
}

resources/views/blog/show.blade.php

+4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
@extends('layout', ['minimal' => true])
22

3+
@push('head')
4+
@vite(['resources/assets/css/code.css', 'resources/assets/js/code.js'])
5+
@endpush
6+
37
@section('main')
48
<article>
59
<div class="max-w-readable">

resources/views/layout.blade.php

+1
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
}
2020
</style>
2121
@vite(['resources/assets/css/main.css', 'resources/assets/js/main.js'])
22+
@stack('head')
2223
</head>
2324
<body
2425
x-data="{ navigationOpen: false }"

resources/views/tasks/show.blade.php

+4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
@extends('layout', ['minimal' => true])
22

3+
@push('head')
4+
@vite(['resources/assets/css/code.css', 'resources/assets/js/code.js'])
5+
@endpush
6+
37
@section('main')
48
<article class="max-w-readable">
59
<h1>{{ $title }}</h1>

vite.config.js

+2
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@ export default defineConfig({
77
tailwindcss(),
88
laravel({
99
input: [
10+
'resources/assets/css/code.css',
1011
'resources/assets/css/main.css',
12+
'resources/assets/js/code.js',
1113
'resources/assets/js/main.js',
1214
],
1315
refresh: true,

0 commit comments

Comments
 (0)