diff --git a/crates/docs/src/static/styles.css b/crates/docs/src/static/styles.css
index a1706e8735..27577c2cb7 100644
--- a/crates/docs/src/static/styles.css
+++ b/crates/docs/src/static/styles.css
@@ -626,19 +626,42 @@ samp .comment,
 code .comment {
   color: var(--green);
 }
-/* Number, String, Tag, Type literals */
+
+/* Number, String, Tag literals */
+samp .storage.type,
+code .storage.type,
+samp .string,
+code .string,
+samp .string.begin,
+code .string.begin,
+samp .string.end,
+code .string.end,
+samp .constant,
+code .constant,
 samp .literal,
 code .literal {
   color: var(--cyan);
 }
+
 /* Keywords and punctuation */
-samp .kw,
+samp .keyword, 
+code .keyword,
+samp .punctuation.section, 
+code .punctuation.section,
+samp .punctuation.separator, 
+code .punctuation.separator,
+samp .punctuation.terminator, 
+code .punctuation.terminator,
+samp .kw, 
 code .kw {
-  color: var(--magenta);
+    color: var(--magenta);
 }
+
 /* Operators */
 samp .op,
-code .op {
+code .op,
+samp .keyword.operator,
+code .keyword.operator {
   color: var(--orange);
 }
 
@@ -649,12 +672,22 @@ code .delimeter {
 }
 
 /* Variables modules and field names */
+samp .function,
+code .function,
+samp .meta.group,
+code .meta.group,
+samp .meta.block,
+code .meta.block,
 samp .lowerident,
 code .lowerident {
   color: var(--blue);
 }
 
 /* Types, Tags, and Modules */
+samp .type,
+code .type,
+samp .meta.path,
+code .meta.path,
 samp .upperident,
 code .upperident {
   color: var(--green);
diff --git a/examples/static-site-gen/platform/Cargo.toml b/examples/static-site-gen/platform/Cargo.toml
index 7475e40815..b85f497424 100644
--- a/examples/static-site-gen/platform/Cargo.toml
+++ b/examples/static-site-gen/platform/Cargo.toml
@@ -18,6 +18,7 @@ path = "src/main.rs"
 
 [dependencies]
 libc = "0.2"
+syntect = "5.0"
 roc_highlight = { path = "../../../crates/highlight" }
 roc_std = { path = "../../../crates/roc_std" }
 
diff --git a/examples/static-site-gen/platform/src/lib.rs b/examples/static-site-gen/platform/src/lib.rs
index 8e53aee0be..739b5462c6 100644
--- a/examples/static-site-gen/platform/src/lib.rs
+++ b/examples/static-site-gen/platform/src/lib.rs
@@ -8,6 +8,12 @@ use std::fs;
 use std::os::raw::c_char;
 use std::path::{Path, PathBuf};
 
+use syntect::easy::HighlightLines;
+use syntect::parsing::SyntaxSet;
+use syntect::highlighting::{ThemeSet, Style};
+use syntect::util::{LinesWithEndings};
+use syntect::html::{ClassedHTMLGenerator, ClassStyle};
+
 extern "C" {
     #[link_name = "roc__transformFileContentForHost_1_exposed"]
     fn roc_transformFileContentForHost(relPath: &RocStr, content: &RocStr) -> RocStr;
@@ -210,6 +216,8 @@ fn process_file(input_dir: &Path, output_dir: &Path, input_file: &Path) -> Resul
     // And track a little bit of state
     let mut in_code_block = false;
     let mut is_roc_code = false;
+    let ps : syntect::parsing::SyntaxSet = SyntaxSet::load_defaults_newlines();
+    let ts : syntect::highlighting::ThemeSet = ThemeSet::load_defaults();
     
     for event in parser {
         match event {
@@ -235,7 +243,7 @@ fn process_file(input_dir: &Path, output_dir: &Path, input_file: &Path) -> Resul
                 in_code_block = true;
                 is_roc_code = is_roc_code_block(&cbk);
             }
-            pulldown_cmark::Event::End(pulldown_cmark::Tag::CodeBlock(_)) => {
+            pulldown_cmark::Event::End(pulldown_cmark::Tag::CodeBlock(pulldown_cmark::CodeBlockKind::Fenced(cow_str))) => {
                 if in_code_block {
                     match replace_code_with_static_file(&code_to_highlight, input_file) {
                         None => {}
@@ -254,6 +262,14 @@ fn process_file(input_dir: &Path, output_dir: &Path, input_file: &Path) -> Resul
                     let highlighted_html: String;
                     if is_roc_code {
                         highlighted_html = roc_highlight::highlight_roc_code(&code_to_highlight)
+                    } else if let Some(syntax) = ps.find_syntax_by_token(&cow_str) {
+                        let mut h = HighlightLines::new(syntax, &ts.themes["base16-ocean.dark"]);
+
+                        let mut html_generator = ClassedHTMLGenerator::new_with_class_style(syntax, &ps, ClassStyle::Spaced);
+                        for line in LinesWithEndings::from(&code_to_highlight) {
+                            html_generator.parse_html_for_line_which_includes_newline(line);
+                        }
+                        highlighted_html = format!("<pre><samp>{}</pre></samp>", html_generator.finalize())
                     } else {
                         highlighted_html = format!("<pre><samp>{}</pre></samp>", &code_to_highlight)
                     }
diff --git a/www/public/site.css b/www/public/site.css
index aca6a59509..9affbb56b5 100644
--- a/www/public/site.css
+++ b/www/public/site.css
@@ -635,48 +635,78 @@ h4 {
 /* Comments `#` and Documentation comments `##` */
 samp .comment,
 code .comment {
-    color: var(--green);
+  color: var(--green);
 }
 
-/* Number, String, Tag, Type literals */
+/* Number, String, Tag literals */
+samp .storage.type,
+code .storage.type,
+samp .string,
+code .string,
+samp .string.begin,
+code .string.begin,
+samp .string.end,
+code .string.end,
+samp .constant,
+code .constant,
 samp .literal,
 code .literal {
-    color: var(--cyan);
+  color: var(--cyan);
 }
 
 /* Keywords and punctuation */
-samp .kw,
+samp .keyword, 
+code .keyword,
+samp .punctuation.section, 
+code .punctuation.section,
+samp .punctuation.separator, 
+code .punctuation.separator,
+samp .punctuation.terminator, 
+code .punctuation.terminator,
+samp .kw, 
 code .kw {
     color: var(--magenta);
 }
 
 /* Operators */
 samp .op,
-code .op {
-    color: var(--orange);
+code .op,
+samp .keyword.operator,
+code .keyword.operator {
+  color: var(--orange);
 }
 
 /* Delimieters */
 samp .delimeter,
 code .delimeter {
-    color: var(--gray);
+  color: var(--gray);
 }
 
 /* Variables modules and field names */
+samp .function,
+code .function,
+samp .meta.group,
+code .meta.group,
+samp .meta.block,
+code .meta.block,
 samp .lowerident,
 code .lowerident {
-    color: var(--blue);
+  color: var(--blue);
 }
 
 /* Types, Tags, and Modules */
+samp .type,
+code .type,
+samp .meta.path,
+code .meta.path,
 samp .upperident,
 code .upperident {
-    color: var(--green);
+  color: var(--green);
 }
 
 samp .dim,
 code .dim {
-    opacity: 0.55;
+  opacity: 0.55;
 }
 
 .button-container {