diff --git a/src/layouts/SpecLayout.astro b/src/layouts/SpecLayout.astro
index e8cfb28..d23e49f 100644
--- a/src/layouts/SpecLayout.astro
+++ b/src/layouts/SpecLayout.astro
@@ -4,7 +4,7 @@ import PagesLayout from "./PagesLayout.astro";
 const { frontmatter, headings } = Astro.props;
 
 const posts = await Astro.glob("../pages/spec/**/*.{md,mdx}");
-const indexSubpath = `/spec/index.md`;
+const indexSubpath = `/spec/index.mdx`;
 ---
 
 <PagesLayout
diff --git a/src/pages/spec/index.md b/src/pages/spec/index.mdx
similarity index 91%
rename from src/pages/spec/index.md
rename to src/pages/spec/index.mdx
index 41594b4..4590a6d 100644
--- a/src/pages/spec/index.md
+++ b/src/pages/spec/index.mdx
@@ -20,6 +20,7 @@ pagesLayout:
   - path: ast
   - path: expression
 ---
+import Code from "../../components/Code.astro"
 
 
 # The THP Language Specification
@@ -100,11 +101,11 @@ greater than before, it emits a Indent token. If it's lower, emits a Dedent toke
 if it's the same it does nothing.
 
 
-```thp
+<Code thpcode={`
 1 + 2
     + 3
     + 4
-```
+`} />
 
 The previous code would emit the following tokens: `1` `+` `2` `NewLine` `Indent` `+` `3` `NewLine`
 `+` `4` `Dedent`
@@ -114,12 +115,12 @@ Additionaly, it is a lexical error to have wrong indentation. The lexer stores a
 previous indentation levels in a stack, and reports an error if a decrease in indentation
 doesn't match a previous level.
 
-```thp
+<Code thpcode={`
 if true {   // 0 indentation
-    print() // 4 indentation
-  print()   // 2 indentation. Error. There is no 2-indentation level
+//    print() // 4 indentation
+//  print()   // 2 indentation. Error. There is no 2-indentation level
 }
-```
+`} />
 
 All productions of the grammar ignore whitespace/indentation, except those involved in
 semicolon inference.
@@ -134,26 +135,26 @@ Statements in THP end when a new line is encountered:
 
 
 
-```thp
+<Code thpcode={`
 // The statement ends         | here, on the newline
 val value = (123 + 456) * 0.75
-```
+`} />
 
-```thp
+<Code thpcode={`
 // Each line contains a different statement. They all end on their new lines
 
 var a = 1 + 2   // a = 3
-+ 3             // this is not part of `a`, this is a different statement
-```
++ 3             // this is not part of \`a\`, this is a different statement
+`} />
 
 This is true even if the line ends with an operator:
 
-```thp
+<Code thpcode={`
 // These are still different statements
 
 var a = 1 + 2 +     // This is now a compile error, there is a hanging `+`
 3                   // This is still a different statement
-```
+`} />
 
 
 ### Parenthesis
@@ -161,16 +162,16 @@ var a = 1 + 2 +     // This is now a compile error, there is a hanging `+`
 Exception 1: When a parenthesis is open, all following whitespace is ignored
 until the closing parenthesis.
 
-```thp
+<Code thpcode={`
 // open parenthesis found, all whitespace is ignored until the closing
 name.contains(
 "weird"
     )
-```
+`} />
 
 However, for a parenthesis to begin to act, it needs to be open on the same line.
 
-```thp
+<Code thpcode={`
 // Still 2 statements, because the parenthesis is in a new line
 print
 (
@@ -181,7 +182,7 @@ print
 print(
     "hello"
 )
-```
+`} />
 
 ### Indented binary operator
 
@@ -189,22 +190,22 @@ Exception 2:
 
 - When a binary operator is followed by indentation:
 
-```thp
+<Code thpcode={`
 val sum = 1 + 2 +   // The line ends with a binary operator
     3               // There is indentation
-```
+`} />
 
 - Or when indentation is followed by a binary operator:
 
-```thp
+<Code thpcode={`
 val sum = 1 + 2
     + 3             // Indentation and a binary operator
-```
+`} />
 
 In theses cases, all whitespace will be ignored
 until the indentation returns to the initial level.
 
-```thp
+<Code thpcode={`
 // This method chain is a single statement because of the indentation
 val person = PersonBuilder()
     .set_name("john")
@@ -215,6 +216,6 @@ val person = PersonBuilder()
 
 // Here indentation returns, and a new statement begins
 print(person)
-```
+`} />
 
 
diff --git a/src/pages/spec/tokens/comments.md b/src/pages/spec/tokens/comments.mdx
similarity index 70%
rename from src/pages/spec/tokens/comments.md
rename to src/pages/spec/tokens/comments.mdx
index 56fc41c..48bebae 100644
--- a/src/pages/spec/tokens/comments.md
+++ b/src/pages/spec/tokens/comments.mdx
@@ -2,6 +2,7 @@
 layout: ../../../layouts/SpecLayout.astro
 title: Comment
 ---
+import Code from "../../../components/Code.astro"
 
 # Comment
 
@@ -9,8 +10,8 @@ title: Comment
 Comment = "//", any_except_new_line
 ```
 
-```thp
+<Code thpcode={`
 // This is a comment
 // 
 // Another // comment
-```
+`} />
diff --git a/src/pages/spec/tokens/identifier.md b/src/pages/spec/tokens/identifier.mdx
similarity index 87%
rename from src/pages/spec/tokens/identifier.md
rename to src/pages/spec/tokens/identifier.mdx
index 0788dc3..9ed7c1a 100644
--- a/src/pages/spec/tokens/identifier.md
+++ b/src/pages/spec/tokens/identifier.mdx
@@ -2,6 +2,7 @@
 layout: ../../../layouts/SpecLayout.astro
 title: Identifiers & Datatypes
 ---
+import Code from "../../../components/Code.astro"
 
 # Identifiers & Datatypes
 
@@ -18,13 +19,13 @@ Identifier        = (underscore | lowercase_letter), identifier_letter*
 identifier_letter = underscore | lowercase_letter | uppercase_letter | decimal_digit
 ```
 
-```thp
+<Code thpcode={`
 identifier
 _identifier
 _123
 _many_letters
 camelCase
-```
+`} />
 
 
 ## Datatype
@@ -33,20 +34,20 @@ camelCase
 Datatype = uppercase_letter, indentifier_letter*
 ```
 
-```thp
+<Code thpcode={`
 Datatype
 PDO
 WEIRD_DATATYPE
-```
+`} />
 
 
 ## Keywords
 
 The following are (currently) THP keywords:
 
-```thp
+<Code thpcode={`
 val     var     fun
-```
+`} />
 
 Keywords are scanned first as identifiers, then transformed
 to their respective tokens.
diff --git a/src/pages/spec/tokens/numbers.md b/src/pages/spec/tokens/numbers.mdx
similarity index 89%
rename from src/pages/spec/tokens/numbers.md
rename to src/pages/spec/tokens/numbers.mdx
index a10df0a..6b20cb9 100644
--- a/src/pages/spec/tokens/numbers.md
+++ b/src/pages/spec/tokens/numbers.mdx
@@ -2,6 +2,7 @@
 layout: ../../../layouts/SpecLayout.astro
 title: Numbers
 ---
+import Code from "../../../components/Code.astro"
 
 # Numbers
 
@@ -15,12 +16,12 @@ hexadecimal_number = "0", ("x" | "X"), hexadecimal_digit+
 decimal_number     = decimal_digit+
 ```
 
-```thp
+<Code thpcode={`
 12345
 01234   // This is a decimal number, not an octal number
 0xff25
 0XFfaA
-```
+`} />
 
 `TODO`: Implement octal `0o777` and binary `0b0110`.
 
@@ -36,14 +37,14 @@ Float = decimal_number, ".", decimal_number+, scientific_notation?
 scientific_notation = "e", ("+" | "-"), decimal_number
 ```
 
-```thp
+<Code thpcode={`
 123.456
 123.456e+4
 123.456e-2
 
 123e+10
 123e-3
-```
+`} />
 
 
 All floating point numbers must start with at least 1 digit.
diff --git a/src/pages/spec/tokens/operator.md b/src/pages/spec/tokens/operator.mdx
similarity index 89%
rename from src/pages/spec/tokens/operator.md
rename to src/pages/spec/tokens/operator.mdx
index becfa6b..e4a8d25 100644
--- a/src/pages/spec/tokens/operator.md
+++ b/src/pages/spec/tokens/operator.mdx
@@ -2,6 +2,7 @@
 layout: ../../../layouts/SpecLayout.astro
 title: Operator
 ---
+import Code from "../../../components/Code.astro"
 
 # Operator
 
@@ -14,9 +15,9 @@ operator_char = "+" | "-" | "=" | "*" | "!" | "/" | "|"
               | "<" | ">" | "^" | "." | ":"
 ```
 
-```thp
+<Code thpcode={`
 + - / * % < > <= >= -> =>
-```
+`} />
 
 These are all the characters that can make an operator.
 
diff --git a/src/pages/spec/tokens/string.md b/src/pages/spec/tokens/string.mdx
similarity index 83%
rename from src/pages/spec/tokens/string.md
rename to src/pages/spec/tokens/string.mdx
index e44bd10..00c661c 100644
--- a/src/pages/spec/tokens/string.md
+++ b/src/pages/spec/tokens/string.mdx
@@ -2,6 +2,7 @@
 layout: ../../../layouts/SpecLayout.astro
 title: String
 ---
+import Code from "../../../components/Code.astro"
 
 # String
 
@@ -19,11 +20,11 @@ escape_seq   = "\n"
 string_char  = any_unicode_except_newline_and_double_quote
 ```
 
-```thp
+<Code thpcode={`
 "hello"
 ""
 "it's me"
-"\"Mario\""
-```
+"\\"Mario\\""
+`} />
 
 `TODO`: String interpolation