diff --git a/landing-pages/site/assets/scss/_highlights.scss b/landing-pages/site/assets/scss/_highlights.scss
new file mode 100644
index 0000000..3840a67
--- /dev/null
+++ b/landing-pages/site/assets/scss/_highlights.scss
@@ -0,0 +1,97 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+@import "colors";
+
+.chroma, .highlight {
+  background-color: #ffffff;
+
+  .lntd {
+    vertical-align: top;
+    padding: 0;
+    margin: 0;
+    border: 0;
+  }
+
+  .lntable {
+    border-spacing: 0;
+    padding: 0;
+    margin: 0;
+    border: 0;
+    width: auto;
+    overflow: auto;
+    display: block;
+  }
+
+  .hl {
+    display: block;
+    width: 100%;
+    background-color: #ffffcc;
+  }
+
+  .lnt, .ln {
+    margin-right: 0.4em;
+    padding: 0 0.4em 0 0.4em;
+    color: #7f7f7f;
+  }
+
+  .k, .kc, .kd, .kn, .kp, .kr {
+    color: #0000ff;
+  }
+
+  .kt, .nc {
+    color: #2b91af;
+  }
+
+  .s, .sa, .sb, .sc, .dl, .sd, .s2, .se, .sh, .si, .sx, .sr, .s1, .ss {
+    color: #a31515;
+  }
+
+  .ow {
+    color: #0000ff;
+  }
+
+  .c, .ch, .cm, .c1, .cs {
+    color: #008000;
+  }
+
+  .cp, .cpf {
+    color: #0000ff;
+  }
+
+  .ge {
+    font-style: italic;
+  }
+
+  .gh, .gp, .gs, .gu {
+    font-weight: bold;
+  }
+}
+
+pre {
+  margin: 40px 0;
+  padding: 16px 20px;
+  border: solid 1px map-get($colors, very-light-pink);
+  border-radius: 5px;
+  width: fit-content;
+  max-width: 100%;
+
+  span {
+    @extend .monotext--brownish-grey;
+  }
+}
diff --git a/landing-pages/site/assets/scss/_markdown-content.scss b/landing-pages/site/assets/scss/_markdown-content.scss
index 5d9bd32..6eda9f9 100644
--- a/landing-pages/site/assets/scss/_markdown-content.scss
+++ b/landing-pages/site/assets/scss/_markdown-content.scss
@@ -17,8 +17,6 @@
  * under the License.
  */
 
-@import "colors";
-
 .markdown-content {
   h1, h2, h3, h4, h5 {
     @extend .subtitle__large--greyish-brown;
@@ -31,17 +29,7 @@
     margin-bottom: 30px;
   }
 
-  pre {
-    margin: 40px 0;
-    padding: 16px 20px;
-    background-color: transparent !important;
-    border: solid 1px map-get($colors, very-light-pink);
-    border-radius: 5px;
-    width: fit-content;
-    max-width: 100%;
-
-    span {
-      @extend .monotext--brownish-grey;
-    }
+  pre span {
+    @extend .monotext--brownish-grey;
   }
 }
diff --git a/landing-pages/site/assets/scss/_rst-content.scss b/landing-pages/site/assets/scss/_rst-content.scss
index 8b31684..98ef829 100644
--- a/landing-pages/site/assets/scss/_rst-content.scss
+++ b/landing-pages/site/assets/scss/_rst-content.scss
@@ -68,15 +68,11 @@
   }
 
   code {
-    white-space: nowrap;
     max-width: 100%;
-    background: #fff;
-    border: solid 1px #e1e4e5;
-    font-size: 75%;
+    color: #51504f;
     padding: 0 5px;
     font-family: 'Roboto Mono', monospace;
-    color: #E74C3C;
-    overflow-x: auto
+    overflow-x: auto;
   }
 
   .note, .attention, .caution, .danger, .error, .hint, .important, .tip, .warning, .admonition-todo, .admonition {
@@ -240,39 +236,11 @@
     margin-bottom: 24px
   }
 
-  div[class^='highlight'] {
-    border: 1px solid #e1e4e5;
-    border-radius: 5px;
-    overflow-x: auto;
-    margin: 1px 0 24px 0;
+  pre {
     background-color: #f2f8fe;
   }
 
-  div[class^='highlight'] div[class^='highlight'] {
-    padding: 0;
-    border: none;
-    margin: 0
-  }
-
-  div[class^='highlight'] td.code {
-    width: 100%
-  }
-
-  div[class^='highlight'] pre {
-    white-space: pre;
-    margin: 0;
-    padding: 12px 12px;
-    display: block;
-    overflow: auto
-  }
-
-  div[class^='highlight'] pre .hll {
-    display: block;
-    margin: 0 -12px;
-    padding: 0 12px
-  }
-
-  pre.literal-block, div[class^='highlight'] pre, .linenodiv pre {
+  pre.literal-block, .linenodiv pre {
     font-family: 'Roboto Mono', monospace;
     font-size: 12px;
     line-height: 1.4
@@ -427,12 +395,6 @@
     white-space: nowrap
   }
 
-  code {
-    color: #51504f;
-    font-family: 'Roboto Mono', monospace;
-    padding: 2px 5px
-  }
-
   code big, tt em, code em {
     font-size: 100% !important;
     line-height: normal
@@ -576,7 +538,9 @@
     margin-bottom: 0;
   }
 
-  .example-header ~ div[class^='highlight'] {
+  .example-block-wrapper pre {
+    margin: 0;
+    width: unset;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
   }
diff --git a/landing-pages/site/assets/scss/main-custom.scss b/landing-pages/site/assets/scss/main-custom.scss
index 7b06c2a..30f9c4a 100644
--- a/landing-pages/site/assets/scss/main-custom.scss
+++ b/landing-pages/site/assets/scss/main-custom.scss
@@ -47,6 +47,6 @@
 @import "search";
 @import "rating";
 @import "rst-content";
-@import "pygments";
 @import "content-drawer";
 @import "dropdown";
+@import "highlights";
diff --git a/landing-pages/site/config.toml b/landing-pages/site/config.toml
index fa49bc3..572ee18 100644
--- a/landing-pages/site/config.toml
+++ b/landing-pages/site/config.toml
@@ -34,6 +34,7 @@
 enableMissingTranslationPlaceholders = true
 
 pygmentsStyle = "vs"
+pygmentsUseClasses = true
 
 ## Configuration for BlackFriday markdown parser: https://github.com/russross/blackfriday
 [blackfriday]
diff --git a/landing-pages/site/content/en/roadmap/_index.md b/landing-pages/site/content/en/roadmap/_index.md
index f451d7f..9f5856e 100644
--- a/landing-pages/site/content/en/roadmap/_index.md
+++ b/landing-pages/site/content/en/roadmap/_index.md
@@ -53,11 +53,11 @@
 // Synchronize user data and set up
 var currentUser = new Talk.User({
     id: 79302,                      // user id
-    name: “George Looney”,          // full name
-    email: “george@looney.net”      // for offline email fallback
+    name: "George Looney",          // full name
+    email: "george@looney.net"      // for offline email fallback
 });
 var session = new Talk.Session({
-    appId: “9352938974”,            // your TalkJS account id
+    appId: "9352938974",            // your TalkJS account id
     me: currentUser                 // make George the active user
 });
 {{< /highlight >}}