From 5c3ec7c56ffe8c301088a13f30865ea600d93d07 Mon Sep 17 00:00:00 2001
From: Simon Binder <oss@simonbinder.eu>
Date: Mon, 11 Nov 2024 12:18:01 +0100
Subject: [PATCH] Use html block extension

---
 docs/docs/setup.md     |  2 --
 docs/mkdocs/main.py    | 11 +++++++----
 docs/mkdocs/mkdocs.yml |  1 +
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/docs/docs/setup.md b/docs/docs/setup.md
index d2e8824c0..264868751 100644
--- a/docs/docs/setup.md
+++ b/docs/docs/setup.md
@@ -5,8 +5,6 @@ description: All you need to know about adding drift to your project.
 
 ---
 
-
-
 Drift is a powerful database library for Dart and Flutter applications. To
 support its advanced capabilities like type-safe SQL queries, verification of
 your database and migrations, it uses a builder and command-line tooling that
diff --git a/docs/mkdocs/main.py b/docs/mkdocs/main.py
index 692444736..27c7ce869 100644
--- a/docs/mkdocs/main.py
+++ b/docs/mkdocs/main.py
@@ -74,9 +74,12 @@ def markdown_codeblock(content: str, lang: str = "") -> str:
 
 
 def html_codeblock(content: str) -> str:
-    """
-    Create the html for this code block.
-    """
     random_id = "".join(random.choices(string.ascii_lowercase + string.digits, k=8))
-    result = f"""<div class="highlight"><pre id="{random_id}"><code>{content}</code></pre></div>"""
+
+    result = f"""
+/// html | div[class="highlight"]
+    markdown: html
+<pre id="{random_id}"><code>{content}</code></pre>
+///
+    """
     return result
diff --git a/docs/mkdocs/mkdocs.yml b/docs/mkdocs/mkdocs.yml
index a007f65cd..2dee03552 100644
--- a/docs/mkdocs/mkdocs.yml
+++ b/docs/mkdocs/mkdocs.yml
@@ -88,6 +88,7 @@ markdown_extensions:
       options:
         custom_icons:
           - overrides/.icons
+  - pymdownx.blocks.html
 
 nav:
   - index.md