From 49faed4fcb98bf807cab3d171925cac54daf75e9 Mon Sep 17 00:00:00 2001
From: Araozu <fernando@araozu.dev>
Date: Fri, 5 Jul 2024 16:58:50 -0500
Subject: [PATCH] Move code snippets to use new component

---
 src/components/Code.astro                     |  3 +-
 src/layouts/ApiLayout.astro                   |  8 +-
 src/layouts/PagesLayout.astro                 | 17 ++++-
 src/layouts/thpHighlighter.ts                 | 15 +++-
 .../basics/{comments.md => comments.mdx}      | 13 ++--
 .../basics/{datatypes.md => datatypes.mdx}    | 24 +++---
 src/pages/learn/basics/hello-world.mdx        |  9 ++-
 .../basics/{operators.md => operators.mdx}    | 39 +++++-----
 .../basics/{variables.md => variables.mdx}    | 26 +++----
 .../classes/{anonymous.md => anonymous.mdx}   | 10 ++-
 .../classes/{definition.md => definition.mdx} | 73 ++++++++++---------
 .../classes/{interfaces.md => interfaces.mdx} |  5 +-
 .../learn/classes/{magic.md => magic.mdx}     |  9 ++-
 .../learn/classes/{static.md => static.mdx}   | 13 ++--
 .../data-structures/{arrays.md => arrays.mdx} |  9 ++-
 .../data-structures/{enums.md => enums.mdx}   |  9 ++-
 .../data-structures/{maps.md => maps.mdx}     | 37 +++++-----
 .../data-structures/{tuples.md => tuples.mdx} | 10 ++-
 .../data-structures/{unions.md => unions.mdx} |  9 ++-
 .../error-handling/{null.md => null.mdx}      | 31 ++++----
 src/pages/learn/error-handling/try.mdx        | 27 +++----
 .../flow-control/{blocks.md => blocks.mdx}    |  7 +-
 .../{conditionals.md => conditionals.mdx}     | 13 ++--
 .../flow-control/{loops.md => loops.mdx}      | 27 +++----
 .../flow-control/{match.md => match.mdx}      |  5 +-
 .../{declaration.md => declaration.mdx}       | 29 ++++----
 .../{higher-order.md => higher-order.mdx}     |  9 ++-
 .../functions/{lambdas.md => lambdas.mdx}     | 21 +++---
 .../{parameters.md => parameters.mdx}         | 38 +++++-----
 src/pages/learn/index.mdx                     | 21 +++---
 src/pages/learn/templating/intro.mdx          |  4 +-
 31 files changed, 301 insertions(+), 269 deletions(-)
 rename src/pages/learn/basics/{comments.md => comments.mdx} (84%)
 rename src/pages/learn/basics/{datatypes.md => datatypes.mdx} (80%)
 rename src/pages/learn/basics/{operators.md => operators.mdx} (81%)
 rename src/pages/learn/basics/{variables.md => variables.mdx} (88%)
 rename src/pages/learn/classes/{anonymous.md => anonymous.mdx} (82%)
 rename src/pages/learn/classes/{definition.md => definition.mdx} (87%)
 rename src/pages/learn/classes/{interfaces.md => interfaces.mdx} (81%)
 rename src/pages/learn/classes/{magic.md => magic.mdx} (76%)
 rename src/pages/learn/classes/{static.md => static.mdx} (82%)
 rename src/pages/learn/data-structures/{arrays.md => arrays.mdx} (83%)
 rename src/pages/learn/data-structures/{enums.md => enums.mdx} (89%)
 rename src/pages/learn/data-structures/{maps.md => maps.mdx} (90%)
 rename src/pages/learn/data-structures/{tuples.md => tuples.mdx} (74%)
 rename src/pages/learn/data-structures/{unions.md => unions.mdx} (91%)
 rename src/pages/learn/error-handling/{null.md => null.mdx} (85%)
 rename src/pages/learn/flow-control/{blocks.md => blocks.mdx} (69%)
 rename src/pages/learn/flow-control/{conditionals.md => conditionals.mdx} (86%)
 rename src/pages/learn/flow-control/{loops.md => loops.mdx} (84%)
 rename src/pages/learn/flow-control/{match.md => match.mdx} (89%)
 rename src/pages/learn/functions/{declaration.md => declaration.mdx} (85%)
 rename src/pages/learn/functions/{higher-order.md => higher-order.mdx} (82%)
 rename src/pages/learn/functions/{lambdas.md => lambdas.mdx} (84%)
 rename src/pages/learn/functions/{parameters.md => parameters.mdx} (69%)

diff --git a/src/components/Code.astro b/src/components/Code.astro
index eb3c1c1..0be5525 100644
--- a/src/components/Code.astro
+++ b/src/components/Code.astro
@@ -7,5 +7,4 @@ const html_code = thp_highlighter(leftTrimDedent(thpcode).join("\n"));
 ---
 
 <pre
-    class="language-thp"
-    data-language="thp"><code class="language-thp" set:html={html_code} /><span class="absolute top-2 right-2 inline-block text-sm select-none opacity-75">thp</span></pre>
+    class="language-thp"><code class="language-thp" set:html={html_code} /><span class="absolute top-2 right-2 inline-block text-sm select-none opacity-75">thp</span></pre>
diff --git a/src/layouts/ApiLayout.astro b/src/layouts/ApiLayout.astro
index 60472f4..bd1346f 100644
--- a/src/layouts/ApiLayout.astro
+++ b/src/layouts/ApiLayout.astro
@@ -3,8 +3,7 @@ import Navbar from "../components/Navbar.astro";
 import BaseLayout from "./BaseLayout.astro";
 import TOC from "../components/TOC.astro";
 
-const {headings} = Astro.props;
-
+const { headings } = Astro.props;
 ---
 
 <BaseLayout>
@@ -41,9 +40,4 @@ const {headings} = Astro.props;
     </div>
 
     <div class="h-32"></div>
-
-    <script>
-        import {highlightOnDom} from "./thpHighlighter";
-        document.addEventListener("DOMContentLoaded", highlightOnDom);
-    </script>
 </BaseLayout>
diff --git a/src/layouts/PagesLayout.astro b/src/layouts/PagesLayout.astro
index 78acc5b..bdfeae3 100644
--- a/src/layouts/PagesLayout.astro
+++ b/src/layouts/PagesLayout.astro
@@ -4,7 +4,13 @@ import BaseLayout from "./BaseLayout.astro";
 import TOC from "../components/TOC.astro";
 import Sidebar from "../components/Sidebar.astro";
 
-const { frontmatter, headings, posts: _posts, indexSubpath, basePath } = Astro.props;
+const {
+    frontmatter,
+    headings,
+    posts: _posts,
+    indexSubpath,
+    basePath,
+} = Astro.props;
 const posts: Record<string, any>[] = _posts;
 
 const indexPage = posts.find((post) => post.file.endsWith(indexSubpath));
@@ -30,8 +36,10 @@ if (pagesIndex === undefined) {
 function validateEntry(entry: PageEntry, basePath: string) {
     if (!entry.children) {
         // Attempt to get the page title from frontmatter
-        const pageData = posts.find((post) =>
-            post.file.endsWith(entry.path + ".md") || post.file.endsWith(entry.path + ".mdx"),
+        const pageData = posts.find(
+            (post) =>
+                post.file.endsWith(entry.path + ".md") ||
+                post.file.endsWith(entry.path + ".mdx"),
         );
 
         if (pageData === undefined) {
@@ -112,7 +120,8 @@ for (const entry of pagesIndex) {
         document.addEventListener("DOMContentLoaded", () => {
             let current_uri = window.location.pathname;
 
-            const sidebar = document.getElementById("sidebar")!.children[0]! as HTMLElement;
+            const sidebar = document.getElementById("sidebar")!
+                .children[0]! as HTMLElement;
             const links = sidebar.querySelectorAll("a");
             for (const link of [...links]) {
                 if (link.getAttribute("href") === current_uri) {
diff --git a/src/layouts/thpHighlighter.ts b/src/layouts/thpHighlighter.ts
index 56907cb..d03e725 100644
--- a/src/layouts/thpHighlighter.ts
+++ b/src/layouts/thpHighlighter.ts
@@ -1,4 +1,15 @@
-import { thp_highlighter, CodeJar } from "../lexer/highlighter";
 
-export function highlightOnDom() {}
+export function highlightOnDom() {
+    const pre_elements = document.querySelectorAll("pre");
+    for (const pre_el of pre_elements) {
+        const language = pre_el.getAttribute("data-language");
+        if (language === null) { continue; }
+
+        // Create a visual indicador
+        const indicator = document.createElement("span");
+        indicator.className = "absolute top-2 right-2 inline-block text-sm select-none opacity-75";
+        indicator.innerText = language;
+        pre_el.appendChild(indicator);
+    }
+}
 
diff --git a/src/pages/learn/basics/comments.md b/src/pages/learn/basics/comments.mdx
similarity index 84%
rename from src/pages/learn/basics/comments.md
rename to src/pages/learn/basics/comments.mdx
index 65f7dc8..897f69a 100644
--- a/src/pages/learn/basics/comments.md
+++ b/src/pages/learn/basics/comments.mdx
@@ -2,6 +2,7 @@
 layout: ../../../layouts/DocsLayout.astro
 title: Comments
 ---
+import Code from "../../../components/Code.astro"
 
 # Comments
 
@@ -12,12 +13,12 @@ THP supports single and multi line comments:
 
 Begin with double slash `//` and continue until the end of the line.
 
-```thp
+<Code thpcode={`
 // This is a single line comment
 print("hello!")
 
 print("the result is {5 + 5}") // This will print 10
-```
+`} />
 
 
 ## Multi line
@@ -26,19 +27,19 @@ These begin with `/*` and end with `*/`. Everything in between is ignored.
 
 Multi line comments can be nested in THP.
 
-```thp
+<Code thpcode={`
 /*
     This is a
     multiline comment
 */
-```
+`} />
 
-```thp
+<Code thpcode={`
 /*
     Multiline comments
     can be /* nested */
 */
-```
+`} />
 
 ## Documentation comments
 
diff --git a/src/pages/learn/basics/datatypes.md b/src/pages/learn/basics/datatypes.mdx
similarity index 80%
rename from src/pages/learn/basics/datatypes.md
rename to src/pages/learn/basics/datatypes.mdx
index 4837e36..403444e 100644
--- a/src/pages/learn/basics/datatypes.md
+++ b/src/pages/learn/basics/datatypes.mdx
@@ -2,6 +2,7 @@
 layout: ../../../layouts/DocsLayout.astro
 title: Datatypes
 ---
+import Code from "../../../components/Code.astro"
 
 # Datatypes
 
@@ -14,7 +15,7 @@ The following are basic datatypes.
 
 Same as php int
 
-```thp
+<Code thpcode={`
 Int age = 32
 // Hexadecimal numbers start with 0x
 Int red = 0xff0000
@@ -24,10 +25,10 @@ Int permissions = 0o775
 Int char_code = 0b01000110
 
 // IMPORTANT!
-// Since Octal starts with `0o`, using just a leading 0
+// Since Octal starts with \`0o\`, using just a leading 0
 // will result in a decimal!
 Int not_octal = 032     // This is 32, not 26
-```
+`} />
 
 
 ## Float
@@ -35,10 +36,10 @@ Int not_octal = 032     // This is 32, not 26
 Same as php float
 
 
-```thp
+<Code thpcode={`
 Float pi = 3.141592
 Float light = 2.99e+8
-```
+`} />
 
 
 ## String
@@ -46,15 +47,15 @@ Float light = 2.99e+8
 THP strings use **only** double quotes. Single quotes are
 used elsewhere.
 
-```thp
+<Code thpcode={`
 String name = "Rose"
-```
+`} />
 
 Strings have interpolation with `{}`.
 
-```thp
+<Code thpcode={`
 print("Hello, {name}")      // Hello, Rose
-```
+`} />
 
 
 ## Bool
@@ -62,10 +63,11 @@ print("Hello, {name}")      // Hello, Rose
 THP booleans are `true` and `false`. They are case sensitive,
 **only lowercase.**
 
-```thp
+<Code thpcode={`
 Bool is_true = true
 Bool is_false = false
 
 // This is a compile error
 val invalid = TRUE
-```
+`} />
+
diff --git a/src/pages/learn/basics/hello-world.mdx b/src/pages/learn/basics/hello-world.mdx
index 6201166..55107b3 100644
--- a/src/pages/learn/basics/hello-world.mdx
+++ b/src/pages/learn/basics/hello-world.mdx
@@ -3,6 +3,7 @@ layout: ../../../layouts/DocsLayout.astro
 title: Hello world
 ---
 import InteractiveCode from "../../../components/InteractiveCode.astro";
+import Code from "../../../components/Code.astro"
 
 # Hello, world!
 
@@ -16,9 +17,9 @@ detailed later on.
 
 To write a hello world program write the following code in a file:
 
-```thp
+<Code thpcode={`
 print("Hello, world!")
-```
+`} />
 
 Then run `thp hello.thp` from your terminal.
 
@@ -34,11 +35,11 @@ echo("B");
 echo("C");
 ```
 
-```thp
+<Code thpcode={`
 print("A")
 print("B")
 print("C")
-```
+`} />
 
 As a consequence of this, there can only be 1 statement per line.
 
diff --git a/src/pages/learn/basics/operators.md b/src/pages/learn/basics/operators.mdx
similarity index 81%
rename from src/pages/learn/basics/operators.md
rename to src/pages/learn/basics/operators.mdx
index e17c88f..5fc8cbb 100644
--- a/src/pages/learn/basics/operators.md
+++ b/src/pages/learn/basics/operators.mdx
@@ -2,6 +2,7 @@
 layout: ../../../layouts/DocsLayout.astro
 title: Operators
 ---
+import Code from "../../../components/Code.astro"
 
 # Operators
 
@@ -10,7 +11,7 @@ Most of the PHP operators are present in THP.
 
 ## Numbers
 
-```thp
+<Code thpcode={`
 var number = 322
 
 number + 1
@@ -24,48 +25,48 @@ number -= 1
 number *= 1
 number /= 1
 number %= 2
-```
+`} />
 
 **There are no prefix/postfix increment**, use `+=` or `-=`.
 
-```thp
+<Code thpcode={`
 // Use
 number += 1
 
 // instead of
-number++   // This is a compile error 
-```
+number++   // This is a compile error
+`} />
 
 ### Comparison
 
 These operators will not do implicit type conversion. They can
 only be used with same datatypes.
 
-```thp
+<Code thpcode={`
 v1 < v2
 v1 <= v2
 v1 > v2
 v1 >= v2
-```
+`} />
 
 There is only `==` and `!=`. They are equivalent to `===` and `!==`.
 
-```thp
+<Code thpcode={`
 v1 == v2
 v1 != v2
-```
+`} />
 
 
 ### Bitwise
 
 TBD
 
-```thp
+<Code thpcode={`
 number and 1
 number or 2
 number xor 1
 number xand 1
-```
+`} />
 
 ## Strings
 
@@ -73,15 +74,15 @@ TBD.
 
 Strings **do not use `.`** for concatenation. They use `+`.
 
-```thp
+<Code thpcode={`
 "Hello " + "world."
-```
+`} />
 
 However, the plus operator `+` does not implicitly convert types.
 
-```thp
+<Code thpcode={`
 "Hello " + 322      // This is an error
-```
+`} />
 
 
 ## Boolean
@@ -89,10 +90,10 @@ However, the plus operator `+` does not implicitly convert types.
 These operators work **only with booleans**, they do not perform
 type coercion.
 
-```thp
+<Code thpcode={`
 c1 && c2
 c1 || c2
-```
+`} />
 
 ## Ternary
 
@@ -103,7 +104,7 @@ There is no ternary operator. See [Conditionals](/learn/flow-control/conditional
 
 These are detailed in their section: [Nullable types](/learn/error-handling/null)
 
-```thp
+<Code thpcode={`
 val person = some_fun()
 
 person?.name
@@ -114,7 +115,7 @@ if person?
 {
     person.name
 }
-```
+`} />
 
 
 
diff --git a/src/pages/learn/basics/variables.md b/src/pages/learn/basics/variables.mdx
similarity index 88%
rename from src/pages/learn/basics/variables.md
rename to src/pages/learn/basics/variables.mdx
index 8953f42..21d6627 100644
--- a/src/pages/learn/basics/variables.md
+++ b/src/pages/learn/basics/variables.mdx
@@ -3,6 +3,7 @@ layout: ../../../layouts/DocsLayout.astro
 title: Variables
 
 ---
+import Code from "../../../components/Code.astro"
 
 # Variables
 
@@ -23,27 +24,27 @@ As a regex: `[a-z_][a-zA-Z0-9_]*`
 
 Defined with `val`, followed by a variable name and a value.
 
-```thp
+<Code thpcode={`
 val surname = "Doe"
 val year_of_birth = 1984
-```
+`} />
 
 ### Datatype annotation
 
 Written after the `val` keyword but before the variable name.
 
-```thp
+<Code thpcode={`
 val String surname = "Doe"
 val Int year_of_birth = 1984
-```
+`} />
 
 When annotating an immutable variable the `val` keyword is optional
 
-```thp
+<Code thpcode={`
 // Equivalent to the previous code
 String surname = "Doe"
 Int year_of_birth = 1984
-```
+`} />
 
 This means that if a variable only has a datatype, it is immutable.
 
@@ -53,28 +54,27 @@ This means that if a variable only has a datatype, it is immutable.
 
 Defined with `var`, followed by a variable name and a value.
 
-```thp
+<Code thpcode={`
 var name = "John"
 var age = 32
-```
+`} />
 
 ### Datatype annotation
 
 Written after the `var` keywords but before the variable name.
 
-```thp
+<Code thpcode={`
 var String name = "John"
 var Int age = 32
-```
+`} />
 
 When annotating a mutable variable the keyword `var` is still **required**.
 
-```thp
+<Code thpcode={`
 // Equivalent to the previous code
 var String name = "John"
 var Int age = 32
-```
-
+`} />
 
 
 
diff --git a/src/pages/learn/classes/anonymous.md b/src/pages/learn/classes/anonymous.mdx
similarity index 82%
rename from src/pages/learn/classes/anonymous.md
rename to src/pages/learn/classes/anonymous.mdx
index e722aa7..1a2cf7b 100644
--- a/src/pages/learn/classes/anonymous.md
+++ b/src/pages/learn/classes/anonymous.mdx
@@ -2,10 +2,12 @@
 layout: ../../../layouts/DocsLayout.astro
 title: Anonymous classes
 ---
+import Code from "../../../components/Code.astro"
+
 # Anonymous classes
 
 
-```thp
+<Code thpcode={`
 class Logger
 {
     pub fun log(String msg)
@@ -25,9 +27,9 @@ setLogger(class
         print(msg)
     }
 })
-```
+`} />
 
-```thp
+<Code thpcode={`
 setLogger(class(Int param1) -> SomeClass(param1), SomeInterface
 {
     pub fun method()
@@ -35,4 +37,4 @@ setLogger(class(Int param1) -> SomeClass(param1), SomeInterface
         // code
     }
 })
-```
+`} />
diff --git a/src/pages/learn/classes/definition.md b/src/pages/learn/classes/definition.mdx
similarity index 87%
rename from src/pages/learn/classes/definition.md
rename to src/pages/learn/classes/definition.mdx
index 5b95c86..23afc7d 100644
--- a/src/pages/learn/classes/definition.md
+++ b/src/pages/learn/classes/definition.mdx
@@ -2,6 +2,7 @@
 layout: ../../../layouts/DocsLayout.astro
 title: Classes
 ---
+import Code from "../../../components/Code.astro"
 
 # Classes
 
@@ -13,26 +14,26 @@ Syntax and semantics heavily inspired by Kotlin.
 To create an instance of a class call it as if it were a function,
 without `new`.
 
-```thp
+<Code thpcode={`
 val animal = Animal()
-```
+`} />
 
 ## Simple class 
 
 Classes are declared with the `class` keyword.
 
-```thp
+<Code thpcode={`
 class Animal
 
 val instance = Animal()
-```
+`} />
 
 ## Properties
 
 Properties are declared with `var`/`val`.
 They **must** declare their datatype.
 
-```thp
+<Code thpcode={`
 class Person
 {
     // This is an error. Properties must declare their datatype,
@@ -42,21 +43,21 @@ class Person
     // This is correct
     val String name = "Jane Doe"
 }
-```
+`} />
 
 Properties are private by default,
 but can be made public with `pub`.
 
-```thp
+<Code thpcode={`
 class Person
 {
     // Properties are private by default
     val String name = "John Doe"
 
-    // To make a property public use `pub`
+    // To make a property public use \`pub\`
     pub var Int age = 30
 }
-```
+`} />
 
 More information about how properties interact with the constructor
 is found in the contructor section.
@@ -66,7 +67,7 @@ is found in the contructor section.
 
 Methods are declared with `fun`, as regular functions.
 
-```thp
+<Code thpcode={`
 class Person
 {
     fun greet()
@@ -74,11 +75,11 @@ class Person
         print("Hello")
     }
 }
-```
+`} />
 
 Methods are private by default, and are made public with `pub`.
 
-```thp
+<Code thpcode={`
 class Person
 {
     // This method is private
@@ -87,7 +88,7 @@ class Person
         print("Hello from private method")
     }
 
-    // Use `pub` to make a method public
+    // Use \`pub\` to make a method public
     pub fun greet()
     {
         print("Hello from greet")
@@ -97,14 +98,14 @@ class Person
 val p = Person()
 p.greet()           //: Hello from greet
 p.private_greet()   // Compile time error. Private method.
-```
+`} />
 
 ## This
 
 THP uses the dollar sign `$` as this. It is **required** when
 using a class property/method.
 
-```thp
+<Code thpcode={`
 class Person
 {
     val String name = "Jane Doe"
@@ -120,7 +121,7 @@ class Person
         print("Hello, I'm {person_name}")
     }
 }
-```
+`} />
 
 ## Static members
 
@@ -134,17 +135,17 @@ Static members are detailed in their own page.
 PHP only allows a single constructor, and so does THP.
 The basic constructor has the syntax of function parameters.
 
-```thp
+<Code thpcode={`
 //          |this is the constructor |
 class Animal(String fullname, Int age)
 
 val a1 = Animal("Nal", 4)
-```
+`} />
 
 The class properties can be declared in the constructor,
 using the keywords `pub`, `var`, `val`:
 
-```thp
+<Code thpcode={`
 class Animal(
     // Since we are using val/var, these are promoted to class properties
     val String fullname,
@@ -160,7 +161,7 @@ class Animal(
 
 val a1 = Animal("Nal", 4)
 a1.say()    //: My name is Nal and i'm 4 years old
-```
+`} />
 
 By using this syntax you are declaring properties and assigning them
 at the same time.
@@ -173,14 +174,14 @@ The contructor parameters can also have default values.
 The constructor is public by default. It can be made private/protected
 like this:
 
-```thp
+<Code thpcode={`
 class Animal
 private constructor(
     val String fullname,
     var Int age,
 )
 {...}
-```
+`} />
 
 
 ### Derived properties
@@ -188,19 +189,19 @@ private constructor(
 You can declare properties whose values depend on values
 on the constructor.
 
-```thp
+<Code thpcode={`
 class Animal(
     val String fullname,
 )
 {
-    // A property whose value depends on `fullname`
+    // A property whose value depends on \`fullname\`
     // This is executed after the contructor
     pub val Int name_length = $fullname.length
 }
 
 val a2 = Animal("Doa")
 print(a2.name_length)   //: 3
-```
+`} />
 
 
 ### Init block
@@ -208,7 +209,7 @@ print(a2.name_length)   //: 3
 If you need to additional logic in the constructor you can
 use a `init` block.
 
-```thp
+<Code thpcode={`
 class Animal(
     val String fullname,
 )
@@ -220,13 +221,13 @@ class Animal(
 }
 
 val a3 = Animal("Lola")     //: Lola in construction
-```
+`} />
 
 
 ## Inheritance
 
 
-```thp
+<Code thpcode={`
 // Base class
 class Animal(var String name)
 {
@@ -241,13 +242,13 @@ class Cat(String name, Int lives)
 extends Animal(name)
 
 Cat("Michi", 9).say_name()
-```
+`} />
 
 ## Mutable methods
 
 By default methods cannot mutate the state of the object.
 
-```thp
+<Code thpcode={`
 class Animal(var String name)
 {
     pub fun set_name(String new_name)
@@ -255,12 +256,12 @@ class Animal(var String name)
         $name = new_name    // Error: Cannot mutate $
     }
 }
-```
+`} />
 
 To do so the method must be annotated. The caller must also
 declare a mutable variable.
 
-```thp
+<Code thpcode={`
 class Animal(var String name)
 {
     pub mut fun set_name(String new_name)
@@ -271,13 +272,13 @@ class Animal(var String name)
 
 var michi = Animal("Michifu")
 michi.set_name("Garfield")
-```
+`} />
 
 ## Class constructor that may return an error
 
 Working theory:
 
-```thp
+<Code thpcode={`
 class Fish(
     val String name,
     var Int lives = 9,
@@ -285,9 +286,9 @@ class Fish(
 extends Animal(name)
 throws Error
 
-val fish_result = Fish("bubble")   // fish_result will be a `Result[Fish,Error]`
+val fish_result = Fish("bubble")   // fish_result will be a \`Result[Fish,Error]\`
 val fish = try fish_result
-```
+`} />
 
 
 
diff --git a/src/pages/learn/classes/interfaces.md b/src/pages/learn/classes/interfaces.mdx
similarity index 81%
rename from src/pages/learn/classes/interfaces.md
rename to src/pages/learn/classes/interfaces.mdx
index 235a710..8c2e3c9 100644
--- a/src/pages/learn/classes/interfaces.md
+++ b/src/pages/learn/classes/interfaces.mdx
@@ -2,12 +2,13 @@
 layout: ../../../layouts/DocsLayout.astro
 title: Interfaces
 ---
+import Code from "../../../components/Code.astro"
 
 # Interfaces
 
 
 
-```thp
+<Code thpcode={`
 interface Serializable
 {
     // Methods are always public in interfaces
@@ -24,7 +25,7 @@ class Cat -> Serializable
     }
 }
 
-```
+`} />
 
 No interface inheritance.
 
diff --git a/src/pages/learn/classes/magic.md b/src/pages/learn/classes/magic.mdx
similarity index 76%
rename from src/pages/learn/classes/magic.md
rename to src/pages/learn/classes/magic.mdx
index 1d9a7da..6279067 100644
--- a/src/pages/learn/classes/magic.md
+++ b/src/pages/learn/classes/magic.mdx
@@ -2,12 +2,13 @@
 layout: ../../../layouts/DocsLayout.astro
 title: Magic methods
 ---
+import Code from "../../../components/Code.astro"
 
 # Magic methods
 
 Don't get special treatment.
 
-```thp
+<Code thpcode={`
 
 class Cat
 {
@@ -17,13 +18,13 @@ class Cat
     }
 }
 
-```
+`} />
 
 
-```thp
+<Code thpcode={`
 val option = Some("GAAA")
 val Some(value) = option
 
 val colors = Array("red", "green", "blue")
 val Array()
-```
+`} />
diff --git a/src/pages/learn/classes/static.md b/src/pages/learn/classes/static.mdx
similarity index 82%
rename from src/pages/learn/classes/static.md
rename to src/pages/learn/classes/static.mdx
index 3509318..aa20eb8 100644
--- a/src/pages/learn/classes/static.md
+++ b/src/pages/learn/classes/static.mdx
@@ -2,13 +2,14 @@
 layout: ../../../layouts/DocsLayout.astro
 title: Static
 ---
+import Code from "../../../components/Code.astro"
 
 # Static in classes
 
 
 ## Class constants
 
-```thp
+<Code thpcode={`
 class Cat
 {
     // Stateful code
@@ -20,7 +21,7 @@ static Cat
 }
 
 print(Cat::CONSTANT)
-```
+`} />
 
 
 ## Static methods
@@ -28,7 +29,7 @@ print(Cat::CONSTANT)
 aka. plain, old functions
 
 
-```thp
+<Code thpcode={`
 static Cat
 {
     fun static_method() -> Int
@@ -38,7 +39,7 @@ static Cat
 }
 
 Cat::static_method()
-```
+`} />
 
 
 ## Static properties
@@ -46,7 +47,7 @@ Cat::static_method()
 aka. global variables
 
 
-```thp
+<Code thpcode={`
 static Cat
 {
     pub var access_count = 0
@@ -55,7 +56,7 @@ static Cat
 print(Cat::access_count)    // 0
 Cat::access_count += 1
 print(Cat::access_count)    // 1
-```
+`} />
 
 
 
diff --git a/src/pages/learn/data-structures/arrays.md b/src/pages/learn/data-structures/arrays.mdx
similarity index 83%
rename from src/pages/learn/data-structures/arrays.md
rename to src/pages/learn/data-structures/arrays.mdx
index c7e39d5..fb21e00 100644
--- a/src/pages/learn/data-structures/arrays.md
+++ b/src/pages/learn/data-structures/arrays.mdx
@@ -2,6 +2,7 @@
 layout: ../../../layouts/DocsLayout.astro
 title: Arrays
 ---
+import Code from "../../../components/Code.astro"
 
 # Arrays
 
@@ -9,7 +10,7 @@ Use square brackets as usual.
 
 ## Usage
 
-```thp
+<Code thpcode={`
 val fruits = ["apple", "banana", "cherry"]
 val apple = fruits[0]
 
@@ -21,16 +22,16 @@ var numbers = [0, 1, 2, 3]
 numbers[3] = 5
 
 print(numbers[3])  // 5
-```
+`} />
 
 
 ## Type signature
 
 
-```thp
+<Code thpcode={`
 Array[String]
 Array[Int]
-```
+`} />
 
 The Array signature __requires__ the word `Array`.
 There is no `Int[]` or `[Int]` signature, since that would cause
diff --git a/src/pages/learn/data-structures/enums.md b/src/pages/learn/data-structures/enums.mdx
similarity index 89%
rename from src/pages/learn/data-structures/enums.md
rename to src/pages/learn/data-structures/enums.mdx
index 7a26df8..e6cba14 100644
--- a/src/pages/learn/data-structures/enums.md
+++ b/src/pages/learn/data-structures/enums.mdx
@@ -2,6 +2,7 @@
 layout: ../../../layouts/DocsLayout.astro
 title: Enums
 ---
+import Code from "../../../components/Code.astro"
 
 # Enums
 
@@ -15,7 +16,7 @@ THP enums are a 1 to 1 map of PHP enums, with a slightly different syntax.
 
 Enums don't have a scalar value by default.
 
-```thp
+<Code thpcode={`
 enum Suit
 {
     Hearts,
@@ -25,14 +26,14 @@ enum Suit
 }
 
 val suit = Suit::Hearts
-```
+`} />
 
 ## Backed enums
 
 Backed enums can have a scalar for each case. The scalar values can only be
 `String` or `Int`.
 
-```thp
+<Code thpcode={`
 enum Suit(String)
 {
     Hearts = "H",
@@ -40,7 +41,7 @@ enum Suit(String)
     Clubs = "C",
     Spades = "S",
 }
-```
+`} />
 
 All cases must explicitly define their value, there is no automatic generation.
 
diff --git a/src/pages/learn/data-structures/maps.md b/src/pages/learn/data-structures/maps.mdx
similarity index 90%
rename from src/pages/learn/data-structures/maps.md
rename to src/pages/learn/data-structures/maps.mdx
index e0f4271..d48067b 100644
--- a/src/pages/learn/data-structures/maps.md
+++ b/src/pages/learn/data-structures/maps.mdx
@@ -2,6 +2,7 @@
 layout: ../../../layouts/DocsLayout.astro
 title: Maps
 ---
+import Code from "../../../components/Code.astro"
 
 # Maps
 
@@ -14,7 +15,7 @@ There can also be anonymous maps, which may contain any key.
 
 ## Named Maps
 
-```thp
+<Code thpcode={`
 // Here we define a map, called Person
 map Person {
     String name,
@@ -36,21 +37,21 @@ var Person mary_jane = .{
     surname: "Jane",
     age: 27,
 }
-```
+`} />
 
 To access the fields of a map we use square braces `[]`.
 
-```thp
+<Code thpcode={`
 mary_jane["age"] += 1
 print(mary_jane["name"])  // Mary
-```
+`} />
 
 Or dot access `.` if the field's name is a valid identifier.
 
-```thp
+<Code thpcode={`
 mary_jane.age += 1
 print(mary_jane.name)
-```
+`} />
 
 
 ## Anonymous maps
@@ -58,23 +59,23 @@ print(mary_jane.name)
 An anonymous map allows us to store and retrieve any key of any datatype.
 They are declared as `Map`.
 
-```thp
+<Code thpcode={`
 val car = Map {
     brand: "Toyota",
     model: "Corolla",
     year: 2012,
 }
-```
+`} />
 
 Anonymous maps can also can have their type omitted.
 
-```thp
+<Code thpcode={`
 var car = .{
     brand: "Toyota",
     model: "Corolla",
     year: 2012,
 }
-```
+`} />
 
 If the compiler encounters a map without a type (that is, `.{}`)
 and doesn't expect a specific type, it will assume it is an
@@ -82,30 +83,30 @@ anonymous map.
 
 We can freely assign fields to an anonymous map:
 
-```thp
+<Code thpcode={`
 // Modify an existing field
 car["year"] = 2015
 // Create a new field
 car["status"] = "used"
-```
+`} />
 
 However, if we try to access a field of an anonymous map we'll get
 a nullable type, and we must annotate it.
 
-```thp
+<Code thpcode={`
 // This is ok, we are declaring what datatype we expect
 String? car_status = car["status"]
 
 // This won't work, the compiler doesn't know what datatype to use
 var car_status = car["status"]
-```
+`} />
 
 Instead, we can use the `get` function of the map, which expects a
 datatype and returns that type as nullable
 
-```thp
+<Code thpcode={`
 val car_status = car.get[String]("status")
-```
+`} />
 
 Both ways to get a value will check that the key exists in the map,
 and that it has the correct datatype. If either the key doesn't exist
@@ -113,10 +114,10 @@ or it has a different datatype, it will return `null`.
 
 We can also use dynamic keys, following the same rules:
 
-```thp
+<Code thpcode={`
 val generated_value = "key"
 
 String? v = map[generated_value]
 // or
 val v = map[String](generated_value)
-```
+`} />
diff --git a/src/pages/learn/data-structures/tuples.md b/src/pages/learn/data-structures/tuples.mdx
similarity index 74%
rename from src/pages/learn/data-structures/tuples.md
rename to src/pages/learn/data-structures/tuples.mdx
index d43ecca..a93701a 100644
--- a/src/pages/learn/data-structures/tuples.md
+++ b/src/pages/learn/data-structures/tuples.mdx
@@ -2,6 +2,7 @@
 layout: ../../../layouts/DocsLayout.astro
 title: Tuples
 ---
+import Code from "../../../components/Code.astro"
 
 # Tuples
 
@@ -9,18 +10,19 @@ Uses `#()` just to avoid confusion with function calls and grouping (`()`).
 
 ## Definition
 
-```thp
+<Code thpcode={`
 val person = #("John", "Doe", 32)
 
 val #(name, surname, age) = person
-```
+`} />
+
 
 
 ## Signature
 
-```thp
+<Code thpcode={`
 #(String, String, Int)
-```
+`} />
 
 
 
diff --git a/src/pages/learn/data-structures/unions.md b/src/pages/learn/data-structures/unions.mdx
similarity index 91%
rename from src/pages/learn/data-structures/unions.md
rename to src/pages/learn/data-structures/unions.mdx
index b6f3b25..4a661df 100644
--- a/src/pages/learn/data-structures/unions.md
+++ b/src/pages/learn/data-structures/unions.mdx
@@ -2,12 +2,13 @@
 layout: ../../../layouts/DocsLayout.astro
 title: Tagged unions
 ---
+import Code from "../../../components/Code.astro"
 
 # Tagged unions
 
 Tagged unions can hold a value from a fixed selection of types.
 
-```thp
+<Code thpcode={`
 union Shape
 {
     Dot,
@@ -18,11 +19,11 @@ union Shape
 val dot        = Shape::Dot
 val square1    = Shape::Square(10)
 val rectangle1 = Shape::Rectangle(5, 15)
-```
+`} />
 
 ## Pattern matching
 
-```thp
+<Code thpcode={`
 match shape_1
 case ::Square(side)
 {
@@ -32,7 +33,7 @@ case ::Rectangle(length, height)
 {
     print("Area of the rectangle: {length * height}")
 }
-```
+`} />
 
 ## Internal representation
 
diff --git a/src/pages/learn/error-handling/null.md b/src/pages/learn/error-handling/null.mdx
similarity index 85%
rename from src/pages/learn/error-handling/null.md
rename to src/pages/learn/error-handling/null.mdx
index 1e4f54b..d6d5035 100644
--- a/src/pages/learn/error-handling/null.md
+++ b/src/pages/learn/error-handling/null.mdx
@@ -2,6 +2,7 @@
 layout: ../../../layouts/DocsLayout.astro
 title: Nullable types
 ---
+import Code from "../../../components/Code.astro"
 
 # Nullable types
 
@@ -12,18 +13,18 @@ by the question mark `?` character.
 For instance, a POST request may have a `username` parameter,
 or it may not. This can be represented with an `String?`.
 
-```thp
+<Code thpcode={`
 String? new_username = POST::get("username")
-```
+`} />
 
 When we have a `Type?` we cannot use it directly. We must first
 check if the value is null, and then use it.
 
-```thp
+<Code thpcode={`
 if new_username != null {
-    // Here `new_username` is automatically casted to String
+    // Here \`new_username\` is automatically casted to String
 }
-```
+`} />
 
 We must check explicitly that the value is not null. Doing
 `if new_username {}` alone is not allowed.
@@ -32,30 +33,30 @@ We must check explicitly that the value is not null. Doing
 
 To create a nullable type we must explicitly annotate the type.
 
-```thp
+<Code thpcode={`
 val favorite_color = null      // Error, we must define the type
 
 String? favorite_color = null  // Ok
-```
+`} /> 
 
 Other examples:
 
-```thp
+<Code thpcode={`
 fun get_first(Array[String?] values) -> String? {}
 
 val result = get_first([])
-```
+`} />
 
 ## Optional chaining
 
 If you have a `Type?` and you wish to access a field of `Type` if it exists,
 you can use the optional chaining operator.
 
-```thp
+<Code thpcode={`
 Person? person = ...
 
 val name = person?.name
-```
+`} />
 
 - If `person` is null, `person?.name` will return `null`
 - If `person` is not null, `person?.name` will return `name`
@@ -65,12 +66,12 @@ val name = person?.name
 
 The Elvis operator `??` is used to give a default value in case a `null` is found.
 
-```thp
+<Code thpcode={`
 // This is a function that may return a Int
 fun get_score() -> Int? {...}
 
 val test_score = get_score() ?? 0
-```
+`} />
 
 For the above code:
 
@@ -79,9 +80,9 @@ For the above code:
 
 You can use the Elvis operator to return early
 
-```thp
+<Code thpcode={`
 val username = get_username() ?? return
-```
+`} />
 
 
 
diff --git a/src/pages/learn/error-handling/try.mdx b/src/pages/learn/error-handling/try.mdx
index 0c2ec84..c09dbd3 100644
--- a/src/pages/learn/error-handling/try.mdx
+++ b/src/pages/learn/error-handling/try.mdx
@@ -3,6 +3,7 @@ layout: ../../../layouts/DocsLayout.astro
 title: Try/Exceptions
 ---
 import InteractiveCode from "../../../components/InteractiveCode.astro";
+import Code from "../../../components/Code.astro"
 
 # Try/exceptions
 
@@ -17,7 +18,7 @@ is used.
 For example, a function that returned a `DivisionByZero`
 may be written like this:
 
-```thp
+<Code thpcode={`
 fun invert(Int number) -> Int!DivisionByZero
 {
     if number == 0
@@ -27,7 +28,7 @@ fun invert(Int number) -> Int!DivisionByZero
 
     return 1 / number
 }
-```
+`} />
 
 In the previous segment, `Int!DivisionByZero` denotates
 that the function may return either an `Int` or an `DivisionByZero`.
@@ -44,12 +45,12 @@ TODO: fix?
 If there are multiple error types that the function can return,
 you can use the `|` operator:
 
-```thp
+<Code thpcode={`
 type Exceptions = Exception1 | Exception2 | Exception3
 
 fun sample() -> Int!Exceptions
 { /* ... */}
-```
+`} />
 
 
 
@@ -132,14 +133,14 @@ otherwise will assign the success value and continue.
 Try/return will run a function and assign its value if `Ok` is found.
 Otherwise, it will return a new value specified by the programmer.
 
-```thp
+<Code thpcode={`
 fun run() -> Int
 {
     val result = try dangerous() return 0
 
     // ...
 }
-```
+`} />
 
 In the previous example:
 
@@ -226,27 +227,27 @@ Either way, the function will continue executing.
 Try/catch allows the error to be manually used & handled.
 
 
-```thp
+<Code thpcode={`
 fun run()
 {
     val result = try dangerous()
     catch Exception e
     {
-        // This is run if `dangerous()` throws.
-        // `e` is the thrown error
+        // This is run if \`dangerous()\` throws.
+        // \`e\` is the thrown error
 
         // Handle the error
         // ...
 
-        // Return a new value to be assigned to `result`
+        // Return a new value to be assigned to \`result\`
         0
     }
 }
-```
+`} />
 
 A try/catch may have many `catch` clauses:
 
-```thp
+<Code thpcode={`
 try dangerous()
 catch Exception1 e
 {...}
@@ -254,6 +255,6 @@ catch Exception2 e
 {...}
 catch Exception3 e
 {...}
-```
+`} />
 
 
diff --git a/src/pages/learn/flow-control/blocks.md b/src/pages/learn/flow-control/blocks.mdx
similarity index 69%
rename from src/pages/learn/flow-control/blocks.md
rename to src/pages/learn/flow-control/blocks.mdx
index 1aa9737..95dd5db 100644
--- a/src/pages/learn/flow-control/blocks.md
+++ b/src/pages/learn/flow-control/blocks.mdx
@@ -2,6 +2,7 @@
 layout: ../../../layouts/DocsLayout.astro
 title: Blocks
 ---
+import Code from "../../../components/Code.astro"
 
 # Blocks
 
@@ -11,13 +12,13 @@ Blocks can be assigned to variables, in which case
 they are executed and their last expression is
 returned.
 
-```thp
+<Code thpcode={`
 val result = {
     val temp = 161
 
-    temp * 2    // This will be assigned to `result`
+    temp * 2    // This will be assigned to \`result\`
 }
 
 print(result)   // 322
-```
+`} />
 
diff --git a/src/pages/learn/flow-control/conditionals.md b/src/pages/learn/flow-control/conditionals.mdx
similarity index 86%
rename from src/pages/learn/flow-control/conditionals.md
rename to src/pages/learn/flow-control/conditionals.mdx
index 3fabea4..b1cdce5 100644
--- a/src/pages/learn/flow-control/conditionals.md
+++ b/src/pages/learn/flow-control/conditionals.mdx
@@ -2,6 +2,7 @@
 layout: ../../../layouts/DocsLayout.astro
 title: Conditionals
 ---
+import Code from "../../../components/Code.astro"
 
 # Conditionals
 
@@ -12,7 +13,7 @@ title: Conditionals
 - There's no ternary operator
 
 
-```thp
+<Code thpcode={`
 if condition
 {
     // code
@@ -28,25 +29,25 @@ else
 
 
 val result = if condition { value1 } else { value2 }
-```
+`} />
 
 
 
 ## Check for datatypes
 
-```thp
+<Code thpcode={`
 if variable is Datatype
 {
     // code using variable
 }
-```
+`} />
 
 
 ## If variable is of enum
 
 TBD
 
-```thp
+<Code thpcode={`
 val user_id = POST::get("user_id")
 
 if Some(user_id) = user_id
@@ -58,7 +59,7 @@ if Some(user_id) = user_id && user_id > 0
 {
     print("user_id is greater than 0: {user_id}")
 }
-```
+`} />
 
 
 
diff --git a/src/pages/learn/flow-control/loops.md b/src/pages/learn/flow-control/loops.mdx
similarity index 84%
rename from src/pages/learn/flow-control/loops.md
rename to src/pages/learn/flow-control/loops.mdx
index 34d6eb3..3dd53a7 100644
--- a/src/pages/learn/flow-control/loops.md
+++ b/src/pages/learn/flow-control/loops.mdx
@@ -2,6 +2,7 @@
 layout: ../../../layouts/DocsLayout.astro
 title: Loops
 ---
+import Code from "../../../components/Code.astro"
 
 # Loops
 
@@ -11,16 +12,16 @@ This is simmilar to PHP's `foreach`. There is no equivalent to PHP's `for`.
 
 Braces are required.
 
-```thp
+<Code thpcode={`
 val numbers = [0, 1, 2, 3]
 
 for #(index, number) in numbers
 {
     print(number)
 }
-```
+`} />
 
-```thp
+<Code thpcode={`
 val dict = .{
     apple: 10,
     banana: 7,
@@ -31,13 +32,13 @@ for #(key, value) in dict
 {
     print("{key} => {value}")
 }
-```
+`} />
 
 
 
 ## While loop
 
-```thp
+<Code thpcode={`
 val colors = ["red", "green", "blue"]
 var index = 0
 
@@ -46,14 +47,14 @@ while index < colors.size()
     print("{colors[index]}")
     index += 1
 }
-```
+`} />
 
 
 ## Infinite loop
 
 Instead of doing `while true {}` use `loop`.
 
-```thp
+<Code thpcode={`
 loop
 {
     print("looping")
@@ -63,14 +64,14 @@ loop
         break
     }
 }
-```
+`} />
 
 
 ## Labelled loops
 
 You can give labels to loops, allowing you to `break` and `continue` in nested loops.
 
-```thp
+<Code thpcode={`
 :top for i in values_1
 {
     for j in values_2
@@ -79,12 +80,6 @@ You can give labels to loops, allowing you to `break` and `continue` in nested l
         break :top
     }
 }
-```
-
-
-
-
-
-
+`} />
 
 
diff --git a/src/pages/learn/flow-control/match.md b/src/pages/learn/flow-control/match.mdx
similarity index 89%
rename from src/pages/learn/flow-control/match.md
rename to src/pages/learn/flow-control/match.mdx
index 6419f81..de79cd5 100644
--- a/src/pages/learn/flow-control/match.md
+++ b/src/pages/learn/flow-control/match.mdx
@@ -2,6 +2,7 @@
 layout: ../../../layouts/DocsLayout.astro
 title: Match
 ---
+import Code from "../../../components/Code.astro"
 
 # Match
 
@@ -9,7 +10,7 @@ title: Match
 
 Braces are **required**.
 
-```thp
+<Code thpcode={`
 val user_id = POST::get("user_id")
 
 
@@ -47,5 +48,5 @@ else
 {
     print("hello dear")
 }
-```
+`} />
 
diff --git a/src/pages/learn/functions/declaration.md b/src/pages/learn/functions/declaration.mdx
similarity index 85%
rename from src/pages/learn/functions/declaration.md
rename to src/pages/learn/functions/declaration.mdx
index ba2c1ae..1cab1c6 100644
--- a/src/pages/learn/functions/declaration.md
+++ b/src/pages/learn/functions/declaration.mdx
@@ -2,6 +2,7 @@
 layout: ../../../layouts/DocsLayout.astro
 title: Declaration
 ---
+import Code from "../../../components/Code.astro"
 
 # Declaration
 
@@ -10,42 +11,42 @@ Function names **must** begin with a lowercase letter.
 
 ## No parameters, no return
 
-```thp
+<Code thpcode={`
 fun say_hello()
 {
     print("Hello")
 }
 
 say_hello()
-```
+`} />
 
 
 ## With return type
 
-```thp
+<Code thpcode={`
 fun get_random_number() -> Int
 {
     Random::get(0, 35_222)
 }
 
 val number = get_random_number()
-```
+`} />
 
 ## With parameters and return type
 
-```thp
+<Code thpcode={`
 fun get_secure_random_number(Int min, Int max) -> Int
 {
     Random::get_secure(min, max)
 }
 
 val number = get_secure_random_number(0, 65535)
-```
+`} />
 
 
 ## Generic types
 
-```thp
+<Code thpcode={`
 fun get_first_item[T](Array[T] array) -> T
 {
     array[0]
@@ -55,23 +56,23 @@ val first = get_first_item[Int](numbers)
 // The type annotation is optional if the compiler can infer the type
 
 val first = get_first_item(numbers)
-```
+`} />
 
 
 ## Signature
 
 
-```thp
+<Code thpcode={`
 () -> ()
 () -> Int
 (Int, Int) -> Int
 [T](Array[T]) -> T
-```
+`} />
 
 
 ## Named arguments
 
-```thp
+<Code thpcode={`
 fun html_special_chars(
     String input,
     Int? flags,
@@ -83,13 +84,13 @@ fun html_special_chars(
 }
 
 html_special_chars(input, double_encoding: false)
-```
+`} />
 
 TBD: If & how named arguments affect the order of the parameters
 
 ## Named arguments with different names
 
-```thp
+<Code thpcode={`
 fun greet(
     String name,
     String from: city,
@@ -99,7 +100,7 @@ fun greet(
 }
 
 greet("John", from: "LA")
-```
+`} />
 
 
 
diff --git a/src/pages/learn/functions/higher-order.md b/src/pages/learn/functions/higher-order.mdx
similarity index 82%
rename from src/pages/learn/functions/higher-order.md
rename to src/pages/learn/functions/higher-order.mdx
index 4b24183..790ac40 100644
--- a/src/pages/learn/functions/higher-order.md
+++ b/src/pages/learn/functions/higher-order.mdx
@@ -2,23 +2,24 @@
 layout: ../../../layouts/DocsLayout.astro
 title: Higher Order Functions 
 ---
+import Code from "../../../components/Code.astro"
 
 # Higher Order functions
 
 
 ## Function as parameter
 
-```thp
+<Code thpcode={`
 fun map[A, B](Array[A] input, (A) -> B function) -> Array[B]
 {
     // implementation
 }
 
-```
+`} />
 
 ## Function as return
 
-```thp
+<Code thpcode={`
 fun generate_generator() -> () -> Int
 {
     // code...
@@ -30,7 +31,7 @@ fun generate_generator() -> () -> Int
 
 val generator = generate_generator()  // A function
 val value = generate_generator()()    // An Int
-```
+`} />
 
 
 
diff --git a/src/pages/learn/functions/lambdas.md b/src/pages/learn/functions/lambdas.mdx
similarity index 84%
rename from src/pages/learn/functions/lambdas.md
rename to src/pages/learn/functions/lambdas.mdx
index 03d1665..2d18872 100644
--- a/src/pages/learn/functions/lambdas.md
+++ b/src/pages/learn/functions/lambdas.mdx
@@ -2,13 +2,14 @@
 layout: ../../../layouts/DocsLayout.astro
 title: Lambdas
 ---
+import Code from "../../../components/Code.astro"
 
 # Lambdas / Anonymous functions
 
 
 ## Anonymous function
 
-```thp
+<Code thpcode={`
 fun(Int x, Int y) -> Int {
     x + y
 }
@@ -17,7 +18,7 @@ fun(Int x, Int y) -> Int {
 numbers.map(fun(x) {
     x * 2
 })
-```
+`} />
 
 
 
@@ -26,7 +27,7 @@ numbers.map(fun(x) {
 By default closures **always** capture variables as **references**.
 
 
-```thp
+<Code thpcode={`
 var x = 20
 
 val f = fun() {
@@ -37,18 +38,18 @@ f()     // 20
 
 x = 30
 f()     // 30
-```
+`} />
 
 
 You can force a closure to capture variables by value.
 
-```thp
+<Code thpcode={`
 fun(parameters) clone(variables) {
     // code
 }
-```
+`} />
 
-```thp
+<Code thpcode={`
 var x = 20
 
 val f = fun() clone(x) {
@@ -59,7 +60,7 @@ f()     // 20
 
 x = 30
 f()     // 20
-```
+`} />
 
 
 ## Lambdas
@@ -70,7 +71,7 @@ Inside the lambda you can access the parameters as `$1`, `$2`, etc.
 
 Finally, lambdas be written outside of the parenthesis of function calls.
 
-```thp
+<Code thpcode={`
 numbers.map() #{
     $1 * 2
 }
@@ -80,7 +81,7 @@ numbers.map() #{
 numbers.map(fun(param1) {
     $1 * 2
 })
-```
+`} />
 
 
 
diff --git a/src/pages/learn/functions/parameters.md b/src/pages/learn/functions/parameters.mdx
similarity index 69%
rename from src/pages/learn/functions/parameters.md
rename to src/pages/learn/functions/parameters.mdx
index f47bd6c..f5d1769 100644
--- a/src/pages/learn/functions/parameters.md
+++ b/src/pages/learn/functions/parameters.mdx
@@ -2,39 +2,40 @@
 layout: ../../../layouts/DocsLayout.astro
 title: Function parameters
 ---
+import Code from "../../../components/Code.astro"
 
 # Function parameters
 
 
 ## Immutable reference
 
-```thp
+<Code thpcode={`
 fun add_25(Array[Int] numbers) {
-    numbers.push(25)    // Error: `numbers` is immutable
+    numbers.push(25)    // Error: \`numbers\` is immutable
 }
-```
+`} />
 
 When using a regular type as a parameter, only it's immutable
 properties can be used
 
-```thp
+<Code thpcode={`
 fun count(Array[Int] numbers) -> Int {
-    val items_count = numbers.size()    // Ok, `size` is pure
+    val items_count = numbers.size()    // Ok, \`size\` is pure
 
     items_count
 }
-```
+`} />
 
 To use immutable properties you must use a mutable reference.
 
 
 ## Mutable reference
 
-```thp
+<Code thpcode={`
 fun push_25(mut Array[Int] numbers) {
     numbers.push(25)    // Ok, will also mutate the original array
 }
-```
+`} />
 
 Placing a `mut` before the type makes the parameter a mutable
 reference. Mutable methods can be used, and the original
@@ -42,37 +43,34 @@ data **can** be mutated.
 
 The caller *must* also use `mut`.
 
-```thp
+<Code thpcode={`
 val numbers = Array(0, 1, 2, 3)
 
-push_25(mut numbers)    // Pass `numbers` as reference.
+push_25(mut numbers)    // Pass \`numbers\` as reference.
 
-print(numbers(4))   // `Some(25)`
-```
+print(numbers(4))   // \`Some(25)\`
+`} />
 
 
 
 ## Clone
 
-```thp
+<Code thpcode={`
 fun add_25(clone Array[Int] numbers) {
     numbers.push(25)    // Ok, the original array is unaffected
 }
-```
+`} />
 
 Using the `clone` keyword before the type creates a mutable copy
 of the parameter (CoW). The original data will **not** be mutated.
 
 
-```thp
+<Code thpcode={`
 val numbers = Array(1, 2, 3, 4)
 
-add_25(clone numbers)    // Pass `numbers` as clone.
+add_25(clone numbers)    // Pass \`numbers\` as clone.
 
 print(numbers(4))   // None
-```
-
-
-
+`} />
 
 
diff --git a/src/pages/learn/index.mdx b/src/pages/learn/index.mdx
index 9b764af..066945d 100644
--- a/src/pages/learn/index.mdx
+++ b/src/pages/learn/index.mdx
@@ -54,6 +54,7 @@ pagesLayout:
   - path: intro
 ---
 import InteractiveCode from "../../components/InteractiveCode.astro";
+import Code from "../../components/Code.astro"
 
 
 # Welcome
@@ -144,11 +145,11 @@ $has_key = str_contains($haystack, 'needle');
 print("has key? " . $has_key);
 ```
 
-```thp
+<Code thpcode={`
 // THP
 val has_key = haystack.contains("needle")
 print("has key? " + has_key)
-```
+`} />
 
 - Explicit variable declaration
 - No `$` for variable names (and thus no `$$variable`, use a map instead)
@@ -170,14 +171,14 @@ $obj = [
 ]
 ```
 
-```thp
+<Code thpcode={`
 // THP
 val obj = .{
     names: #("Toni", "Stark"), // Tuple
     age: 33,
     numbers: [32, 64, 128]
 }
-```
+`} />
 
 - Tuples, Arrays, Sets, Maps are clearly different
 - JSON-like object syntax
@@ -192,11 +193,11 @@ $cat->meow();
 ```
 
 
-```thp
+<Code thpcode={`
 // THP
 val cat = Cat("Michifu", 7)
 cat.meow();
-```
+`} />
 
 - Instantiate classes without `new`
 - Use dot `.` instead of arrow `->` syntax
@@ -211,10 +212,10 @@ use \Some\Deeply\Nested\Interface
 ```
 
 
-```thp
+<Code thpcode={`
 // THP
 use Some::Deeply::Nested::{Class, Interface}
-```
+`} />
 
 - Different module syntax
 - Explicit module declaration
@@ -237,7 +238,7 @@ Where possible THP will compile to available PHP functions/classes/methods/etc.
 
 For example:
 
-```thp
+<Code thpcode={`
 // This expression
 val greeting = 
     match get_person()
@@ -253,7 +254,7 @@ val greeting =
     {
         "Nobody is here"
     }
-```
+`} />
 
 ```php
 // Would compile to:
diff --git a/src/pages/learn/templating/intro.mdx b/src/pages/learn/templating/intro.mdx
index d240510..7653f57 100644
--- a/src/pages/learn/templating/intro.mdx
+++ b/src/pages/learn/templating/intro.mdx
@@ -61,13 +61,13 @@ and compose them.
 
 The following would be the equivalent in THP:
 
-```thp
+<Code thpcode={`
 fun Button(String name) -> Html {
     <button class="some tailwind classes">
         Hello {name}!
     </button>
 }
-```
+`} />
 
 It is very similar to React. The HTML is inside the THP code, not the other
 way around, so you can have arbitrary logic in the component.