Use Prismjs for PHP code

astro.config.mjs

@@ -7,6 +7,6 @@ import mdx from "@astrojs/mdx";
 export default defineConfig({
     integrations: [tailwind(), mdx()],
     markdown: {
-        syntaxHighlight: false,
+        syntaxHighlight: "prism",
     },
 });

src/layouts/ApiLayout.astro

@@ -0,0 +1,31 @@
+---
+import Navbar from "../components/Navbar.astro";
+import BaseLayout from "./BaseLayout.astro";
+---
+
+<BaseLayout>
+    <Navbar />
+
+    <div class="lg:grid lg:grid-cols-[14rem_auto_12rem] lg:container mx-auto">
+        <div
+            id="sidebar"
+            class="pt-12 h-screen lg:sticky top-0 fixed z-10 bg-c-bg w-60 lg:w-auto border-r-2 lg:border-0
+                border-c-border-1 -translate-x-64 lg:translate-x-0 transition-transform"
+        >
+            <nav class="py-4 pr-2 overflow-x-scroll h-[calc(100vh-3rem)]">
+                <a href="/">Home page</a>
+            </nav>
+        </div>
+
+        <main
+            class="py-[3.5rem] lg:pl-12 lg:pr-4 markdown min-w-0 small-container mx-auto"
+        >
+            <slot />
+        </main>
+    </div>
+
+    <script>
+        import {highlightOnDom} from "./thpHighlighter";
+        document.addEventListener("DOMContentLoaded", highlightOnDom);
+    </script>
+</BaseLayout>

src/layouts/PagesLayout.astro

@@ -108,31 +108,8 @@ for (const entry of pagesIndex) {
     </div>
 
     <script>
-        import { thp_highlighter, CodeJar } from "../lexer/highlighter";
+        import {highlightOnDom} from "./thpHighlighter";
-        // Add an editor to all code samples
+        document.addEventListener("DOMContentLoaded", highlightOnDom);
-
-        document.addEventListener("DOMContentLoaded", () => {
-            const code_elements = document.querySelectorAll(".language-thp");
-
-            for (const e of [...code_elements]) {
-                const el = e as HTMLElement;
-                // Some elements with .language-thp don't want to be processed
-                if (e.getAttribute("data-disabled") !== null)  {
-                    continue;
-                }
-                const pre_parent = el.parentElement!;
-                const new_div = document.createElement("div");
-                const code = el.innerText;
-
-                el.parentElement!.className = "language-thp";
-                pre_parent.removeChild(el);
-                pre_parent.appendChild(new_div);
-
-                CodeJar(new_div, thp_highlighter, {
-                    tab: "    ",
-                }).updateCode(code);
-            }
-        });
     </script>
     <script>
         // Highlight the current url of the sidebar

src/layouts/thpHighlighter.ts

@@ -0,0 +1,31 @@
+import { thp_highlighter, CodeJar } from "../lexer/highlighter";
+
+/**
+ * Highlights all THP code snippets mounted in the DOM with class .language-thp
+ * 
+ * It assumes that the code is inside: <pre class="language-thp"><code>...
+ */
+export function highlightOnDom() {
+    const code_elements = document.querySelectorAll("code.language-thp");
+
+    for (const e of [...code_elements]) {
+        const el = e as HTMLElement;
+        // Some elements with .language-thp don't want to be processed
+        if (e.getAttribute("data-disabled") !== null) {
+            continue;
+        }
+
+        const pre_parent = el.parentElement!;
+        const new_div = document.createElement("div");
+        const code = el.innerText;
+
+        el.parentElement!.className = "language-thp";
+        pre_parent.removeChild(el);
+        pre_parent.appendChild(new_div);
+
+        CodeJar(new_div, thp_highlighter, {
+            tab: "    ",
+        }).updateCode(code);
+    }
+}
+

src/pages/api/index.md

@@ -0,0 +1,46 @@
+---
+layout: ../../layouts/ApiLayout.astro
+---
+
+# module `std`
+
+## The THP standard library
+
+This module contains many functions, classes, constant & enums
+commonly used in THP programs. These can be used directly,
+without having to import them.
+
+This module is not a 1:1 map of the global PHP scope. Instead,
+this module contains all those members organized into classes,
+objects or other modules.
+
+For example, to find if a string contains another, in PHP you'd do:
+
+```php
+if (str_contains("abc", "a")) {
+    // ...
+}
+```
+
+In THP there is no `str_contains` function. Instead, you'd use the
+`contains` function inside `String`:
+
+```thp
+if String.contains("abc", "a")
+{
+    // ...
+}
+```
+
+Or even better, you'd use the function as a method:
+
+```thp data-thp
+if "abc".contains("a")
+{
+    // ...
+}
+```
+
+
+
+