diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 21bdbf3..d6e3d44 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -85,3 +85,7 @@ jobs:
 
       - name: Test
         run: nr test
+
+      - name: Publish
+        if: runner.os == 'Linux'
+        run: pnpx pkg-pr-new publish --compact --no-template --pnpm
diff --git a/src/syntax/block.ts b/src/syntax/block.ts
index 40f3de1..e6d83da 100644
--- a/src/syntax/block.ts
+++ b/src/syntax/block.ts
@@ -47,10 +47,8 @@ export const MarkdownItMdcBlock: MarkdownIt.PluginSimple = (md) => {
 
           // Create inline container for the content
           const inline = state.push('inline', '', 0)
-          inline.content = ''
-          const text = new state.Token('text', '', 0)
-          text.content = content
-          inline.children = [text]
+          inline.content = content
+          inline.children = []
 
           const tokenClose = state.push('mdc_block_shorthand', name, -1)
           tokenClose.map = [startLine, startLine + 1]
@@ -235,6 +233,16 @@ export const MarkdownItMdcBlock: MarkdownIt.PluginSimple = (md) => {
         })
       }
 
+      // Add bracket content as first paragraph `::bloc[Content]\n::`
+      if (params.content !== undefined) {
+        const pOpen = state.push('paragraph_open', 'p', 1)
+        pOpen.map = [startLine, startLine + 1]
+        const inline = state.push('inline', '', 0)
+        inline.content = params.content
+        inline.children = []
+        state.push('paragraph_close', 'p', -1)
+      }
+
       // Parse content
       const blkIndent = state.blkIndent
       state.blkIndent = indent
diff --git a/src/syntax/inline-component.ts b/src/syntax/inline-component.ts
index c40b44f..a38c35a 100644
--- a/src/syntax/inline-component.ts
+++ b/src/syntax/inline-component.ts
@@ -23,7 +23,8 @@ export const MarkdownItInlineComponent: MarkdownIt.PluginWithOptions<MdcInlineCo
 
     let index = start + 1
     let nameEnd = -1
-    let content: string | undefined
+    let contentStart = -1
+    let contentEnd = -1
 
     // Parse component name
     while (index < state.src.length) {
@@ -32,7 +33,8 @@ export const MarkdownItInlineComponent: MarkdownIt.PluginWithOptions<MdcInlineCo
         nameEnd = index
         const result = parseBracketContent(state.src, index)
         if (result) {
-          content = result.content
+          contentStart = index + 1
+          contentEnd = result.endIndex - 1
           index = result.endIndex
         }
         break
@@ -57,10 +59,18 @@ export const MarkdownItInlineComponent: MarkdownIt.PluginWithOptions<MdcInlineCo
 
     const name = state.src.slice(start + 1, nameEnd)
 
-    if (content !== undefined) {
+    if (contentStart !== -1) {
       state.push('mdc_inline_component', name, 1)
-      const text = state.push('text', '', 0)
-      text.content = content
+
+      // Parse the content between brackets as inline markdown
+      const oldPos = state.pos
+      const oldPosMax = state.posMax
+      state.pos = contentStart
+      state.posMax = contentEnd
+      state.md.inline.tokenize(state)
+      state.pos = oldPos
+      state.posMax = oldPosMax
+
       state.push('mdc_inline_component', name, -1)
     }
     else {
diff --git a/test/fixtures.test.ts b/test/fixtures.test.ts
index 82163e8..20dda58 100644
--- a/test/fixtures.test.ts
+++ b/test/fixtures.test.ts
@@ -37,7 +37,7 @@ describe('fixtures', () => {
           parser: 'html',
         })
 
-        await expect(formatted.trim())
+        await expect(formatted)
           .toMatchFileSnapshot(path.replace('input', 'output').replace('.md', '.html'))
       })
     })
diff --git a/test/input/17.markdonw-directive.md b/test/input/17.markdonw-directive.md
new file mode 100644
index 0000000..ea1799d
--- /dev/null
+++ b/test/input/17.markdonw-directive.md
@@ -0,0 +1,17 @@
+:spoiler[it's a _happy_ ending]
+
+:ref[see **figure 1**]{target=myFigure}
+
+Hello :spoiler[it's a _happy_ ending]
+
+::: note
+The label contains inline content but the body has block content.
+:::
+
+::: note{type="info"}
+The label contains inline content but the body has block content.
+:::
+
+::: note[**Important** Notice]{type="info"}
+The label contains inline content but the body has block content.
+:::
diff --git a/test/output/1.basic.html b/test/output/1.basic.html
index db6ad36..e223e83 100644
--- a/test/output/1.basic.html
+++ b/test/output/1.basic.html
@@ -48,4 +48,4 @@ <h1>Hello</h1>
   .mdc-button {
     background-color: #ff0000;
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/test/output/10.blocks-yaml.html b/test/output/10.blocks-yaml.html
index 9ae6a67..b31a4ee 100644
--- a/test/output/10.blocks-yaml.html
+++ b/test/output/10.blocks-yaml.html
@@ -10,4 +10,4 @@ <h1>Hello World</h1>
   <template #slot="">
     <p>Hello <strong>World</strong></p>
   </template>
-</icon-card>
\ No newline at end of file
+</icon-card>
diff --git a/test/output/11.blocks-list.html b/test/output/11.blocks-list.html
index ca86b00..3c36ebb 100644
--- a/test/output/11.blocks-list.html
+++ b/test/output/11.blocks-list.html
@@ -3,4 +3,4 @@
     <li>Hello</li>
     <li>World</li>
   </ul>
-</custom-list>
\ No newline at end of file
+</custom-list>
diff --git a/test/output/12.frontmatter.html b/test/output/12.frontmatter.html
index 46c27b9..763e355 100644
--- a/test/output/12.frontmatter.html
+++ b/test/output/12.frontmatter.html
@@ -1 +1 @@
-<!-- Content of the page -->
\ No newline at end of file
+<!-- Content of the page -->
diff --git a/test/output/13.vue-template.html b/test/output/13.vue-template.html
index c05744f..536eb5c 100644
--- a/test/output/13.vue-template.html
+++ b/test/output/13.vue-template.html
@@ -1,4 +1,4 @@
 <h1>Foo {{ 1 + 1 }}</h1>
 <p>Hello {{ world }}</p>
 <p>${foo} {{ bar }} {{ <code>b ${a}</code> }}</p>
-<p><code>{foo}</code></p>
\ No newline at end of file
+<p><code>{foo}</code></p>
diff --git a/test/output/14.list-handling.html b/test/output/14.list-handling.html
index 4c88a83..0f7ad56 100644
--- a/test/output/14.list-handling.html
+++ b/test/output/14.list-handling.html
@@ -19,4 +19,4 @@
 </ul>
 <blockquote>
   <p class="foo">Foo</p>
-</blockquote>
\ No newline at end of file
+</blockquote>
diff --git a/test/output/15.blocks-codeblock.html b/test/output/15.blocks-codeblock.html
index a95459b..c7d7f06 100644
--- a/test/output/15.blocks-codeblock.html
+++ b/test/output/15.blocks-codeblock.html
@@ -6,4 +6,4 @@ <h1>Title</h1>
 
 This is a paragraph
 </code></pre>
-</code-group>
\ No newline at end of file
+</code-group>
diff --git a/test/output/16.blocks-headings-in-slots.html b/test/output/16.blocks-headings-in-slots.html
index bb7838b..d714239 100644
--- a/test/output/16.blocks-headings-in-slots.html
+++ b/test/output/16.blocks-headings-in-slots.html
@@ -3,4 +3,4 @@ <h3>Step 1</h3>
   <p>Content for step 1.</p>
   <h3>Step2</h3>
   <p>More content.</p>
-</step>
\ No newline at end of file
+</step>
diff --git a/test/output/17.markdonw-directive.html b/test/output/17.markdonw-directive.html
new file mode 100644
index 0000000..ba5cdeb
--- /dev/null
+++ b/test/output/17.markdonw-directive.html
@@ -0,0 +1,13 @@
+<spoiler>it's a <em>happy</em> ending</spoiler>
+<ref target="myFigure">see <strong>figure 1</strong></ref>
+<p>
+  Hello <spoiler>it's a <em>happy</em> ending</spoiler>
+</p>
+<note>The label contains inline content but the body has block content.</note>
+<note type="info"
+  >The label contains inline content but the body has block content.</note
+>
+<note type="info">
+  <p><strong>Important</strong> Notice</p>
+  <p>The label contains inline content but the body has block content.</p>
+</note>
diff --git a/test/output/2.blocks.html b/test/output/2.blocks.html
index f00b59a..585e3ed 100644
--- a/test/output/2.blocks.html
+++ b/test/output/2.blocks.html
@@ -14,4 +14,4 @@ <h1>Hello</h1>
     <five>Content</five>
   </two>
 </one>
-<my-component>content</my-component>
\ No newline at end of file
+<my-component>content</my-component>
diff --git a/test/output/3.blocks-slots.html b/test/output/3.blocks-slots.html
index d6a4d79..dc02bcf 100644
--- a/test/output/3.blocks-slots.html
+++ b/test/output/3.blocks-slots.html
@@ -4,4 +4,4 @@ <h1>Title</h1>
   <template #description="">
     <p>This will be rendered inside the <code>description</code> slot.</p>
   </template>
-</hero>
\ No newline at end of file
+</hero>
diff --git a/test/output/4.blocks-nesting.html b/test/output/4.blocks-nesting.html
index 177ef8e..e827c57 100644
--- a/test/output/4.blocks-nesting.html
+++ b/test/output/4.blocks-nesting.html
@@ -8,4 +8,4 @@
 <pre><code>::hero
 Indent 4 spaces, should be treated as code block
 ::
-</code></pre>
\ No newline at end of file
+</code></pre>
diff --git a/test/output/5.blocks-props.html b/test/output/5.blocks-props.html
index 7529a18..d2d944c 100644
--- a/test/output/5.blocks-props.html
+++ b/test/output/5.blocks-props.html
@@ -1,2 +1,2 @@
 <h1>Hello</h1>
-<card title="Card title" class="red">The content of the card</card>
\ No newline at end of file
+<card title="Card title" class="red">The content of the card</card>
diff --git a/test/output/6.inline-props.html b/test/output/6.inline-props.html
index 051cc45..7a4013a 100644
--- a/test/output/6.inline-props.html
+++ b/test/output/6.inline-props.html
@@ -10,4 +10,4 @@ <h1 class="text-red">Hello</h1>
 </p>
 <p><code style="color: red">code</code></p>
 <p><em style="color: blue">italic</em></p>
-<p><strong style="color: blue">bold</strong>!</p>
\ No newline at end of file
+<p><strong style="color: blue">bold</strong>!</p>
diff --git a/test/output/7.inline-components.html b/test/output/7.inline-components.html
index 6a69883..f0cdaab 100644
--- a/test/output/7.inline-components.html
+++ b/test/output/7.inline-components.html
@@ -23,4 +23,4 @@ <h1><another-component>Content</another-component></h1>
 </p>
 <p><shorthand /> inline component</p>
 <p><short-hand class="color" /> inline component</p>
-<p><short-hand class="color">content</short-hand> inline component</p>
\ No newline at end of file
+<p><short-hand class="color">content</short-hand> inline component</p>
diff --git a/test/output/8.inline-span.html b/test/output/8.inline-span.html
index 47cb520..ee4f676 100644
--- a/test/output/8.inline-span.html
+++ b/test/output/8.inline-span.html
@@ -1,4 +1,4 @@
 <p>Hello <span>World</span></p>
 <p>Hello <span class="bg-blue-500">World</span>!</p>
 <p>Hello <span>World] Yes</span>!</p>
-<p>Hello <span style="">World</span>!</p>
\ No newline at end of file
+<p>Hello <span style="">World</span>!</p>
diff --git a/test/output/9.blocks-slots.html b/test/output/9.blocks-slots.html
index 875fb34..f0a39d5 100644
--- a/test/output/9.blocks-slots.html
+++ b/test/output/9.blocks-slots.html
@@ -13,4 +13,4 @@ <h1>Title</h1>
   <template #bar="">
     <baz>Baz <inline-component /></baz>
   </template>
-</foo>
\ No newline at end of file
+</foo>