Use highlight.js for <code> styling

diff --git a/404.html b/404.html
index 3bd634cd8684996291ecf97ba3c8e67add5ea1c2..c7d1792c04a24f9bf9828cac09e90f2ff8af1ed9 100644 (file)
--- a/404.html
+++ b/404.html
@@ -7,6 +7,7 @@
   <meta name="description" content="Ardis Lu's personal blog." />
   <link rel="icon" href="/favicon.ico" />
   <link rel="stylesheet" href="/style.css" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/default.min.css">
   <title>ardislu.dev</title>
 </head>
 
@@ -20,6 +21,8 @@
     <article class="post"></article>
   </main>
   <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/languages/powershell.min.js"></script>
   <script>
     const article = document.getElementsByTagName("article")[0];
     article.innerHTML = '<div class="skeleton-line"></div>'.repeat(20);
@@ -54,6 +57,8 @@
       await fetch(url)
         .then((httpResponse) => httpResponse.json())
         .then((googleDoc) => inject(googleDoc));
+
+      hljs.highlightAll();
     })();
   </script>
 </body>