Add .container

core/src/main/kotlin/eu/iamgio/quarkdown/ast/quarkdown/block/Container.kt

@@ -0,0 +1,24 @@
+package eu.iamgio.quarkdown.ast.quarkdown.block
+
+import eu.iamgio.quarkdown.ast.NestableNode
+import eu.iamgio.quarkdown.ast.Node
+import eu.iamgio.quarkdown.document.size.Sizes
+import eu.iamgio.quarkdown.misc.color.Color
+import eu.iamgio.quarkdown.visitor.node.NodeVisitor
+
+/**
+ * A general-purpose container that groups content.
+ * @param foregroundColor text color
+ * @param backgroundColor background color
+ * @param padding whitespace around the content
+ * @param cornerRadius border radius of the container
+ */
+data class Container(
+    val foregroundColor: Color? = null,
+    val backgroundColor: Color? = null,
+    val padding: Sizes? = null,
+    val cornerRadius: Sizes? = null,
+    override val children: List<Node>,
+) : NestableNode {
+    override fun <T> accept(visitor: NodeVisitor<T>): T = visitor.visit(this)
+}

core/src/main/kotlin/eu/iamgio/quarkdown/rendering/html/BaseHtmlNodeRenderer.kt

@@ -34,6 +34,7 @@ import eu.iamgio.quarkdown.ast.quarkdown.block.Aligned
 import eu.iamgio.quarkdown.ast.quarkdown.block.Box
 import eu.iamgio.quarkdown.ast.quarkdown.block.Clipped
 import eu.iamgio.quarkdown.ast.quarkdown.block.Collapse
+import eu.iamgio.quarkdown.ast.quarkdown.block.Container
 import eu.iamgio.quarkdown.ast.quarkdown.block.Math
 import eu.iamgio.quarkdown.ast.quarkdown.block.PageBreak
 import eu.iamgio.quarkdown.ast.quarkdown.block.SlidesFragment
@@ -253,6 +254,8 @@ open class BaseHtmlNodeRenderer(context: Context) : TagNodeRenderer<HtmlTagBuild
 
     override fun visit(node: Math): CharSequence = throw UnsupportedRenderException(node)
 
+    override fun visit(node: Container): CharSequence = throw UnsupportedRenderException(node)
+
     override fun visit(node: Aligned): CharSequence = throw UnsupportedRenderException(node)
 
     override fun visit(node: Stacked): CharSequence = throw UnsupportedRenderException(node)

core/src/main/kotlin/eu/iamgio/quarkdown/rendering/html/QuarkdownHtmlNodeRenderer.kt

@@ -16,6 +16,7 @@ import eu.iamgio.quarkdown.ast.quarkdown.block.Aligned
 import eu.iamgio.quarkdown.ast.quarkdown.block.Box
 import eu.iamgio.quarkdown.ast.quarkdown.block.Clipped
 import eu.iamgio.quarkdown.ast.quarkdown.block.Collapse
+import eu.iamgio.quarkdown.ast.quarkdown.block.Container
 import eu.iamgio.quarkdown.ast.quarkdown.block.Math
 import eu.iamgio.quarkdown.ast.quarkdown.block.PageBreak
 import eu.iamgio.quarkdown.ast.quarkdown.block.SlidesFragment
@@ -79,6 +80,18 @@ class QuarkdownHtmlNodeRenderer(context: Context) : BaseHtmlNodeRenderer(context
     // Math is processed by the MathJax library which requires text delimiters instead of tags.
     override fun visit(node: Math) = BLOCK_MATH_FENCE + "$" + node.expression + "$" + BLOCK_MATH_FENCE
 
+    override fun visit(node: Container) =
+        div("container") {
+            +node.children
+
+            style {
+                "color" value node.foregroundColor
+                "background-color" value node.backgroundColor
+                "padding" value node.padding
+                "border-radius" value node.cornerRadius
+            }
+        }
+
     override fun visit(node: Aligned) = div("align align-" + node.alignment.name.lowercase(), node.children)
 
     override fun visit(node: Stacked) =

core/src/main/kotlin/eu/iamgio/quarkdown/visitor/node/NodeVisitor.kt

@@ -34,6 +34,7 @@ import eu.iamgio.quarkdown.ast.quarkdown.block.Aligned
 import eu.iamgio.quarkdown.ast.quarkdown.block.Box
 import eu.iamgio.quarkdown.ast.quarkdown.block.Clipped
 import eu.iamgio.quarkdown.ast.quarkdown.block.Collapse
+import eu.iamgio.quarkdown.ast.quarkdown.block.Container
 import eu.iamgio.quarkdown.ast.quarkdown.block.Math
 import eu.iamgio.quarkdown.ast.quarkdown.block.PageBreak
 import eu.iamgio.quarkdown.ast.quarkdown.block.SlidesFragment
@@ -127,6 +128,8 @@ interface NodeVisitor<T> {
 
     fun visit(node: Math): T
 
+    fun visit(node: Container): T
+
     fun visit(node: Aligned): T
 
     fun visit(node: Stacked): T

core/src/main/resources/render/theme/global.css

@@ -255,6 +255,10 @@ code.focus-lines .hljs-ln-line:not(.focused),
     opacity: 0.4;
 }
 
+.container {
+    display: inline-block;
+}
+
 .align {
     width: 100%;
     display: flex;

core/src/test/kotlin/eu/iamgio/quarkdown/HtmlNodeRendererTest.kt

@@ -32,10 +32,12 @@ import eu.iamgio.quarkdown.ast.base.inline.Strong
 import eu.iamgio.quarkdown.ast.base.inline.StrongEmphasis
 import eu.iamgio.quarkdown.ast.base.inline.Text
 import eu.iamgio.quarkdown.ast.dsl.buildBlock
+import eu.iamgio.quarkdown.ast.dsl.buildBlocks
 import eu.iamgio.quarkdown.ast.quarkdown.block.Aligned
 import eu.iamgio.quarkdown.ast.quarkdown.block.Box
 import eu.iamgio.quarkdown.ast.quarkdown.block.Clipped
 import eu.iamgio.quarkdown.ast.quarkdown.block.Collapse
+import eu.iamgio.quarkdown.ast.quarkdown.block.Container
 import eu.iamgio.quarkdown.ast.quarkdown.block.Math
 import eu.iamgio.quarkdown.ast.quarkdown.block.PageBreak
 import eu.iamgio.quarkdown.ast.quarkdown.inline.MathSpan
@@ -46,8 +48,10 @@ import eu.iamgio.quarkdown.context.BaseContext
 import eu.iamgio.quarkdown.context.Context
 import eu.iamgio.quarkdown.context.MutableContext
 import eu.iamgio.quarkdown.context.MutableContextOptions
+import eu.iamgio.quarkdown.document.size.Sizes
 import eu.iamgio.quarkdown.document.size.cm
 import eu.iamgio.quarkdown.document.size.inch
+import eu.iamgio.quarkdown.document.size.px
 import eu.iamgio.quarkdown.flavor.base.BaseMarkdownFlavor
 import eu.iamgio.quarkdown.flavor.quarkdown.QuarkdownFlavor
 import eu.iamgio.quarkdown.function.value.data.Range
@@ -673,6 +677,37 @@ class HtmlNodeRendererTest {
         )
     }
 
+    @Test
+    fun container() {
+        val out = readParts("quarkdown/container.html")
+        val children =
+            buildBlocks {
+                paragraph { text("Foo bar") }
+                blockQuote { paragraph { text("Baz") } }
+            }
+
+        assertEquals(out.next(), Container(children = children).render())
+
+        assertEquals(
+            out.next(),
+            Container(
+                foregroundColor = Color(100, 20, 80),
+                backgroundColor = Color(10, 20, 30),
+                children = children,
+            ).render(),
+        )
+
+        assertEquals(
+            out.next(),
+            Container(
+                backgroundColor = Color(10, 20, 30),
+                padding = Sizes(vertical = 2.0.cm, horizontal = 3.0.cm),
+                cornerRadius = Sizes(all = 12.0.px),
+                children = children,
+            ).render(),
+        )
+    }
+
     @Test
     fun aligned() {
         val out = readParts("quarkdown/aligned.html")

core/src/test/resources/rendering/quarkdown/container.html

@@ -0,0 +1,36 @@
+<div class="container">
+    <p>
+        Foo bar
+    </p>
+    <blockquote>
+        <p>
+            Baz
+        </p>
+    </blockquote>
+</div>
+
+---
+
+<div style="color: rgba(100, 20, 80, 1.0); background-color: rgba(10, 20, 30, 1.0);" class="container">
+    <p>
+        Foo bar
+    </p>
+    <blockquote>
+        <p>
+            Baz
+        </p>
+    </blockquote>
+</div>
+
+---
+
+<div style="background-color: rgba(10, 20, 30, 1.0); padding: 2.0cm 3.0cm 2.0cm 3.0cm; border-radius: 12.0px 12.0px 12.0px 12.0px;" class="container">
+    <p>
+        Foo bar
+    </p>
+    <blockquote>
+        <p>
+            Baz
+        </p>
+    </blockquote>
+</div>

stdlib/src/main/kotlin/eu/iamgio/quarkdown/stdlib/Layout.kt

@@ -7,10 +7,12 @@ import eu.iamgio.quarkdown.ast.quarkdown.block.Aligned
 import eu.iamgio.quarkdown.ast.quarkdown.block.Box
 import eu.iamgio.quarkdown.ast.quarkdown.block.Clipped
 import eu.iamgio.quarkdown.ast.quarkdown.block.Collapse
+import eu.iamgio.quarkdown.ast.quarkdown.block.Container
 import eu.iamgio.quarkdown.ast.quarkdown.block.Stacked
 import eu.iamgio.quarkdown.ast.quarkdown.inline.Whitespace
 import eu.iamgio.quarkdown.context.Context
 import eu.iamgio.quarkdown.document.size.Size
+import eu.iamgio.quarkdown.document.size.Sizes
 import eu.iamgio.quarkdown.function.reflect.annotation.Injected
 import eu.iamgio.quarkdown.function.reflect.annotation.Name
 import eu.iamgio.quarkdown.function.value.NodeValue
@@ -25,6 +27,7 @@ import eu.iamgio.quarkdown.misc.color.Color
  */
 val Layout: Module =
     setOf(
+        ::container,
         ::align,
         ::center,
         ::row,
@@ -37,6 +40,30 @@ val Layout: Module =
         ::table,
     )
 
+/**
+ * A general-purpose container that groups content.
+ * Any layout rules (e.g. from [align], [row], [column], [grid]) are ignored inside this container.
+ * @param foregroundColor text color
+ * @param backgroundColor background color
+ * @param padding whitespace around the content
+ * @param cornerRadius border radius of the container
+ * @param body content to group
+ * @return the new container node
+ */
+fun container(
+    @Name("foreground") foregroundColor: Color? = null,
+    @Name("background") backgroundColor: Color? = null,
+    @Name("padding") padding: Sizes? = null,
+    @Name("radius") cornerRadius: Sizes? = null,
+    body: MarkdownContent,
+) = Container(
+    foregroundColor,
+    backgroundColor,
+    padding,
+    cornerRadius,
+    body.children,
+).wrappedAsValue()
+
 /**
  * Aligns content within its parent.
  * @param alignment content alignment anchor