Use html block extension

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

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

docs/mkdocs/mkdocs.yml

@@ -88,6 +88,7 @@ markdown_extensions:
       options:
         custom_icons:
           - overrides/.icons
+  - pymdownx.blocks.html
 
 nav:
   - index.md