diff --git a/core/src/main/kotlin/eu/iamgio/quarkdown/rendering/html/QuarkdownHtmlNodeRenderer.kt b/core/src/main/kotlin/eu/iamgio/quarkdown/rendering/html/QuarkdownHtmlNodeRenderer.kt
index 267208a2..9575cefe 100644
--- a/core/src/main/kotlin/eu/iamgio/quarkdown/rendering/html/QuarkdownHtmlNodeRenderer.kt
+++ b/core/src/main/kotlin/eu/iamgio/quarkdown/rendering/html/QuarkdownHtmlNodeRenderer.kt
@@ -289,7 +289,7 @@ class QuarkdownHtmlNodeRenderer(context: Context) : BaseHtmlNodeRenderer(context
 
         // The code is wrapped to allow additional content.
         return buildTag("span") {
-            `class`("codespan-content-wrapper")
+            `class`("codespan-content")
 
             +codeTag
 
diff --git a/core/src/main/resources/render/theme/color/darko.css b/core/src/main/resources/render/theme/color/darko.css
index 18729def..494e3a9f 100644
--- a/core/src/main/resources/render/theme/color/darko.css
+++ b/core/src/main/resources/render/theme/color/darko.css
@@ -22,7 +22,7 @@ h1, h2, h3, h4, h5, h6 {
     color: inherit;
 }
 
-.codespan-content-wrapper:not(.box .codespan-content-wrapper) {
+.codespan-content:not(.box .codespan-content) {
     background-color: var(--primary);
 }
 
diff --git a/core/src/main/resources/render/theme/global.css b/core/src/main/resources/render/theme/global.css
index db1761de..dd88d2ce 100644
--- a/core/src/main/resources/render/theme/global.css
+++ b/core/src/main/resources/render/theme/global.css
@@ -84,7 +84,7 @@ a {
     clip-path: circle();
 }
 
-.codespan-content-wrapper {
+.codespan-content {
     display: inline-flex;
     align-items: center;
 }
diff --git a/core/src/main/resources/render/theme/layout/minimal.css b/core/src/main/resources/render/theme/layout/minimal.css
index 869268c7..526289e6 100644
--- a/core/src/main/resources/render/theme/layout/minimal.css
+++ b/core/src/main/resources/render/theme/layout/minimal.css
@@ -98,7 +98,7 @@ p code {
     font-size: 1.2em;
 }
 
-.codespan-content-wrapper {
+.codespan-content {
     padding: 0.1em 0.6em;
     border-radius: 8px;
 }
diff --git a/core/src/test/kotlin/eu/iamgio/quarkdown/HtmlNodeRendererTest.kt b/core/src/test/kotlin/eu/iamgio/quarkdown/HtmlNodeRendererTest.kt
index 5b892e67..58511bf0 100644
--- a/core/src/test/kotlin/eu/iamgio/quarkdown/HtmlNodeRendererTest.kt
+++ b/core/src/test/kotlin/eu/iamgio/quarkdown/HtmlNodeRendererTest.kt
@@ -284,15 +284,21 @@ class HtmlNodeRendererTest {
     fun codeSpan() {
         val out = readParts("inline/codespan.html")
 
-        assertEquals(out.next(), CodeSpan("Foo bar").render())
-        assertEquals(out.next(), CodeSpan("<a href=\"#\">").render())
-        assertEquals(
-            out.next(),
+        // The Quarkdown rendering wraps the content in a span which allows additional content, such as color.
+        val base = MutableContext(BaseMarkdownFlavor)
+        val quarkdown = MutableContext(QuarkdownFlavor)
+
+        val spanWithColor =
             CodeSpan(
                 "#FFFF00",
                 CodeSpan.ColorContent(Color.fromHex("#FFFF00")!!),
-            ).render(),
-        )
+            )
+
+        assertEquals(out.next(), CodeSpan("Foo bar").render(base))
+        assertEquals(out.next(), CodeSpan("<a href=\"#\">").render(base))
+        assertEquals(out.next(), spanWithColor.render(quarkdown))
+        assertEquals(out.next(), spanWithColor.render(base))
+        assertEquals(out.next(), CodeSpan("Foo bar").render(quarkdown))
     }
 
     @Test
diff --git a/core/src/test/resources/rendering/inline/codespan.html b/core/src/test/resources/rendering/inline/codespan.html
index ac94381b..638ed83c 100644
--- a/core/src/test/resources/rendering/inline/codespan.html
+++ b/core/src/test/resources/rendering/inline/codespan.html
@@ -10,10 +10,24 @@
 
 ---
 
-<span class="codespan-content-wrapper">
+<span class="codespan-content">
     <code>
         #FFFF00
     </code>
     <span style="background-color: rgba(255, 255, 0, 1.0);" class="color-preview">
     </span>
+</span>
+
+---
+
+<code>
+    #FFFF00
+</code>
+
+---
+
+<span class="codespan-content">
+    <code>
+        Foo bar
+    </code>
 </span>
\ No newline at end of file
diff --git a/test/src/test/kotlin/eu/iamgio/quarkdown/test/FullPipelineTest.kt b/test/src/test/kotlin/eu/iamgio/quarkdown/test/FullPipelineTest.kt
index 47b1cb7e..acca9545 100644
--- a/test/src/test/kotlin/eu/iamgio/quarkdown/test/FullPipelineTest.kt
+++ b/test/src/test/kotlin/eu/iamgio/quarkdown/test/FullPipelineTest.kt
@@ -120,7 +120,21 @@ class FullPipelineTest {
     @Test
     fun code() {
         execute("`println(\"Hello, world!\")`") {
-            assertEquals("<p><code>println(&quot;Hello, world!&quot;)</code></p>", it)
+            assertEquals("<p><span class=\"codespan-content\"><code>println(&quot;Hello, world!&quot;)</code></span></p>", it)
+            assertFalse(attributes.hasCode)
+        }
+
+        // Color preview
+        execute("`#FF0000`") {
+            assertEquals(
+                "<p>" +
+                    "<span class=\"codespan-content\">" +
+                    "<code>#FF0000</code>" +
+                    "<span style=\"background-color: rgba(255, 0, 0, 1.0);\" class=\"color-preview\"></span>" +
+                    "</span>" +
+                    "</p>",
+                it,
+            )
             assertFalse(attributes.hasCode)
         }
 
@@ -290,12 +304,12 @@ class FullPipelineTest {
             )
         }
 
-        execute(".function {hello}\n  `Hello`!\n\n.hello") {
-            assertEquals("<p><code>Hello</code>!</p>", it)
+        execute(".function {hello}\n  *Hello*!\n\n.hello") {
+            assertEquals("<p><em>Hello</em>!</p>", it)
         }
 
-        execute(".function {hello}\n   target:\n  `Hello` .target!\n\n.hello {world}") {
-            assertEquals("<p><code>Hello</code> world!</p>", it)
+        execute(".function {hello}\n   target:\n  **Hello** .target!\n\n.hello {world}") {
+            assertEquals("<p><strong>Hello</strong> world!</p>", it)
         }
 
         assertFailsWith<InvalidArgumentCountException> {