diff --git a/docs/src/_components/syntax.erb b/docs/src/_components/syntax.erb
deleted file mode 100644
index feeffd1f..00000000
--- a/docs/src/_components/syntax.erb
+++ /dev/null
@@ -1,22 +0,0 @@
-<div class="syntax-block">
-  <div class="syntax-block__actions">
-    <div class="syntax-block__badge">
-      <%= filename_or_language %>
-    </div>
-
-    <clipboard-copy
-      for="<%= id %>"
-      class="button clipboard clipboard--idle syntax-block__clipboard"
-      aria-label="Copy to clipboard"
-      data-controller="clipboard"
-    >
-      <sl-icon class="clipboard__icon--success" name="clipboard-check"></sl-icon>
-      <sl-icon class="clipboard__icon--idle" name="clipboard"></sl-icon>
-    </clipboard-copy>
-
-    <script type="text/plain" id="<%= id %>" hidden><%= content %></script>
-
-  </div>
-  <%= markdownify("```#{language}" + content + "```") %>
-</div>
-
diff --git a/docs/src/_components/syntax.rb b/docs/src/_components/syntax.rb
deleted file mode 100644
index 80be2407..00000000
--- a/docs/src/_components/syntax.rb
+++ /dev/null
@@ -1,30 +0,0 @@
-require "securerandom"
-
-class Syntax < Bridgetown::Component
-  def self.full_language(language)
-    return "" if language.nil?
-
-    Rouge::Lexer.find(language).title || language.titleize
-  end
-
-  attr_accessor :language, :filename
-
-  def initialize(language = "markup", filename = nil)
-    super()
-    @language = language
-    @filename = filename
-  end
-
-  def filename_or_language
-    filename || full_language
-  end
-
-  def full_language
-    Syntax.full_language(@language)
-  end
-
-  def id
-    @id ||= "syntax-#{SecureRandom.uuid}"
-  end
-end
-
diff --git a/docs/src/_documentation/how_tos/01-customizing-the-toolbar.md b/docs/src/_documentation/how_tos/01-customizing-the-toolbar.md
index c913fb33..da091ede 100644
--- a/docs/src/_documentation/how_tos/01-customizing-the-toolbar.md
+++ b/docs/src/_documentation/how_tos/01-customizing-the-toolbar.md
@@ -8,7 +8,7 @@ takes the approach of slotting in HTML.
 
 Heres an example of "slotting" in an embed button.
 
-<%= render Syntax.new("html") do %>
+```html
 <rhino-editor>
   <button
     type="button"
@@ -20,7 +20,7 @@ Heres an example of "slotting" in an embed button.
     Embed
   </button>
 </rhino-editor>
-<% end %>
+```
 
 <rhino-editor>
   <button
@@ -76,9 +76,9 @@ from <https://tabler-icons.io>
 </rhino-editor>
 ) %>
 
-<%= render Syntax.new("html") do %>
+```html
 <%= markdownify(text) %>
-<% end %>
+```
 
 <%= text.html_safe %>
 
diff --git a/docs/src/_documentation/how_tos/03-specifying-accepted-file-types.md b/docs/src/_documentation/how_tos/03-specifying-accepted-file-types.md
index 2bfed69e..6c5aba35 100644
--- a/docs/src/_documentation/how_tos/03-specifying-accepted-file-types.md
+++ b/docs/src/_documentation/how_tos/03-specifying-accepted-file-types.md
@@ -8,9 +8,9 @@ get forwarded to a hidden `<input type="file">` in the shadow root.
 
 <% text = %(<rhino-editor accept="image/*"></rhino-editor>) %>
 
-<%= render Syntax.new("html") do %>
+```html
 <%= markdownify(text) %>
-<% end %>
+```
 
 <%= text.html_safe %>
 
@@ -36,9 +36,9 @@ function pngOnly (event) {
 document.querySelector("#png-only").addEventListener('rhino-file-accept', pngOnly)
 <% end %>
 
-<%= render Syntax.new("js") do %>
+```js
 <%= text.html_safe %>
-<% end %>
+```
 
 <script type="module">
   <%= text.html_safe %>
@@ -46,9 +46,9 @@ document.querySelector("#png-only").addEventListener('rhino-file-accept', pngOnl
 
 
 <% text = %(<rhino-editor id="png-only"></rhino-editor>) %>
-<%= render Syntax.new("html") do %>
+```html
 <%= markdownify(text) %>
-<% end %>
+```
 
 <%= text.html_safe %>
 
diff --git a/docs/src/_documentation/how_tos/04-serialize-to-json.md b/docs/src/_documentation/how_tos/04-serialize-to-json.md
index 57bc9178..7fdd4a75 100644
--- a/docs/src/_documentation/how_tos/04-serialize-to-json.md
+++ b/docs/src/_documentation/how_tos/04-serialize-to-json.md
@@ -8,10 +8,10 @@ instead looking to serialize / deserialize JSON. This
 can be done by rendering the editor with `serializer="json"`
 
 
-<%= render Syntax.new("html") do %>
+```html
 <input id="content" name="content">
 <rhino-editor input="content" serializer="json"></rhino-editor>
-<% end %>
+```
 
 <h2 id="caveats">
   <a href="#caveats">
diff --git a/docs/src/_documentation/how_tos/05-change-the-placeholder.md b/docs/src/_documentation/how_tos/05-change-the-placeholder.md
index 1802fd7c..b0bbbb33 100644
--- a/docs/src/_documentation/how_tos/05-change-the-placeholder.md
+++ b/docs/src/_documentation/how_tos/05-change-the-placeholder.md
@@ -6,7 +6,7 @@ permalink: /how-tos/change-the-placeholder/
 Perhaps you read the [Setup](/tutorials/setup) sections that describe modifying the
 default behavior of the `starterKitOptions`. While you could do the following to modify the placeholder:
 
-<%= render Syntax.new("js") do %>
+```js
 import "rhino-editor/exports/styles/trix.css"
 import { TipTapEditor } from "rhino-editor/exports/elements/tip-tap-editor"
 
@@ -21,12 +21,12 @@ class ExtendedEditor extends TipTapEditor {
     }
   }
 }
-<% end %>
+```
 
 there is actually an easier way if you're only looking to change the placeholder text
 and dont need any additional hooks into the placeholder extension.
 
-<%= render Syntax.new("js") do %>
+```js
 import "rhino-editor/exports/styles/trix.css"
 import { TipTapEditor } from "rhino-editor/exports/elements/tip-tap-editor"
 
@@ -38,4 +38,4 @@ class ExtendedEditor extends TipTapEditor {
     })
   }
 }
-<% end %>
+```
diff --git a/docs/src/_documentation/tutorials/01-getting-started.md b/docs/src/_documentation/tutorials/01-getting-started.md
index 346c6008..a078cf43 100644
--- a/docs/src/_documentation/tutorials/01-getting-started.md
+++ b/docs/src/_documentation/tutorials/01-getting-started.md
@@ -9,17 +9,17 @@ You can either [install with npm](#install-with-npm) or [install with importmaps
 
 ## Install with npm
 
-<%= render Syntax.new("bash") do %>
+```bash
 npm install rhino-editor
-<% end %>
+```
 
 After installing, we can import it in our project.
 
-<%= render Syntax.new("js") do %>
+```js
 // index.js
 import "rhino-editor"
 import "rhino-editor/exports/styles/trix.css"
-<% end %>
+```
 
 The above will auto-register the `<rhino-editor>` element for you.
 For more ways to initialize the editor, checkout the [Setup](/tutorials/setup) page.
@@ -79,9 +79,9 @@ And you should be ready to go!
 
 To see Rhino Editor appear on your page you can write the following HTML:
 
-<%= render Syntax.new("html") do %>
+```html
 <rhino-editor></rhino-editor>
-<% end %>
+```
 
 And you're on your way! But you're not done yet!
 
diff --git a/docs/src/_documentation/tutorials/02-setup.md b/docs/src/_documentation/tutorials/02-setup.md
index f70c3043..17a74db5 100644
--- a/docs/src/_documentation/tutorials/02-setup.md
+++ b/docs/src/_documentation/tutorials/02-setup.md
@@ -44,10 +44,10 @@ If you plan to do the same thing across the entire app and may have many instanc
 RhinoEditor running, it may be worth extending
 the RhinoEditor base class and adding your additional functionality.
 
-<%= render Syntax.new("js") do %>
+```js
 import "rhino-editor/exports/styles/trix.css"
 import { TipTapEditor } from "rhino-editor/exports/elements/tip-tap-editor.js"
-<% end %>
+```
 
 You'll notice we don't want to auto-register the
 `<rhino-editor>` component. Instead, we want to extend it,
@@ -73,10 +73,10 @@ Now let's see how we would add extensions:
 <%= File.read("./frontend/javascript/entrypoints/character-counter.js").chomp.html_safe %>
 ```
 
-<%= render Syntax.new("html") do %>
+```html
 <!-- index.html -->
 <extended-rhino-editor></extended-rhino-editor>
-<% end %>
+```
 
 The above will now have a character counter in place for
 the editor! This can be applied to any extensions. You
diff --git a/docs/src/_documentation/tutorials/04-usage-with-rails.md b/docs/src/_documentation/tutorials/04-usage-with-rails.md
index 8c32ef20..11895505 100644
--- a/docs/src/_documentation/tutorials/04-usage-with-rails.md
+++ b/docs/src/_documentation/tutorials/04-usage-with-rails.md
@@ -18,16 +18,16 @@ the future to make usage easier, but for now we can mimic how Trix handles it.
 
 Let's imagine we had a model like the following:
 
-<%= render Syntax.new("rb") do %>
+```rb
 class Post < ApplicationRecord
   has_rich_text :body
 end
-<% end %>
+```
 
 To achieve the same interaction as `form.rich_text_area :body` from Trix,
 we can do the following:
 
-<%= render Syntax.new("erb") do %>
+```erb
 <%%= form_with model: @post do |form| %>
   <%%= form.hidden_field :body, id: form.field_id(:body), value: form.object.body.try(:to_trix_html) || form.object.body %>
   <rhino-editor
@@ -36,11 +36,11 @@ we can do the following:
     data-direct-upload-url="<%%= rails_direct_uploads_url %>"
   ></rhino-editor>
 <%% end %>
-<% end %>
+```
 
 Which should output HTML that looks something like this:
 
-<%= render Syntax.new("html") do %>
+```html
 <form>
   <input value="" autocomplete="off" type="hidden" name="post[body]" id="post_body">
   <rhino-editor
@@ -49,4 +49,4 @@ Which should output HTML that looks something like this:
     data-direct-upload-url="http://localhost:5100/rails/active_storage/direct_uploads"
   ></rhino-editor>
 </form>
-<% end %>
+```