Add code highlighting

Author: lukechu10

Cargo.lock

@@ -11,4 +11,5 @@ mdsycx = { git = "https://github.com/lukechu10/mdsycx", rev = "eb1ac15" }
 serde = { version = "1.0.210", features = ["derive"] }
 sycamore = "0.9.0-beta.4"
 sycamore-router = "0.9.0-beta.4"
+wasm-bindgen = "0.2.93"
 

Cargo.toml

@@ -91,15 +91,15 @@
     }
 
     code {
-      @apply text-sm;
+      @apply !text-sm;
     }
 
     code:not(pre code) {
       @apply font-mono bg-gray-700 px-1.5 py-0.5 rounded;
     }
 
-    pre code {
-      @apply block bg-gray-800 p-4 rounded mb-4;
+    pre {
+      @apply block !bg-slate-800 p-4 rounded mb-4 !leading-snug !py-3 !px-5;
     }
 
     blockquote {

assets/index.scss

@@ -6,6 +6,10 @@
 	<link data-trunk rel="tailwind-css" href="assets/index.scss" />
 	<link data-trunk rel="copy-file" href="404.html" />
 	<link data-trunk rel="copy-dir" href="assets" />
+
+	<link type="text/css" rel="stylesheet" href="/assets/prism.css" />
+	<script type="text/javascript" src="/assets/prism.js"></script>
+
 	<script type="text/javascript">
 		// Single Page Apps for GitHub Pages
 		// MIT License

assets/prism.css

@@ -2,6 +2,7 @@ use std::{collections::HashMap, sync::LazyLock};
 
 use include_dir::{include_dir, Dir};
 use mdsycx::ParseRes;
+use wasm_bindgen::prelude::*;
 use serde::Deserialize;
 use sycamore::prelude::*;
 
@@ -75,6 +76,9 @@ pub fn PostView(id: String) -> View {
             crate::shell::NotFound()
         };
     };
+    on_mount(move || {
+        highlightAll();
+    });
     view! {
         div(class="max-w-prose mx-auto") {
             crate::components::ShowDate(date=post.front_matter.date)
@@ -84,3 +88,9 @@ pub fn PostView(id: String) -> View {
         }
     }
 }
+
+#[wasm_bindgen]
+extern "C" {
+    #[wasm_bindgen(js_namespace = Prism)]
+    fn highlightAll();
+}