feat(parse): parse html to Comark Nodes

docs/content/5.api/1.parse.md

@@ -391,6 +391,46 @@ console.log(result.meta.summary)
 // ComarkNode[] with only the content before <!-- more -->
 ```
 
+## HTML Parsing
+
+HTML tags embedded in Comark content are parsed into AST nodes by default and can be mixed freely with Comark components and markdown syntax.
+
+::code-group
+
+```typescript [parse.ts]
+const content = `
+<div class="note">
+  ::alert{type="info"}
+  Hello <strong class="text-red-500">world</strong>
+  ::
+</div>
+`
+
+const result = await parse(content)
+console.log(result.nodes)
+```
+
+```json [Output]
+[
+  ["div", { "class": "note" },
+    ["alert", { "type": "info" },
+      "Hello ",
+      ["strong", { "class": "text-red-500" }, "world"]
+    ]
+  ]
+]
+```
+
+::
+
+To disable HTML parsing and treat tags as plain text, set `html: false`:
+
+```typescript [parse.ts]
+const result = await parse(content, { html: false })
+```
+
+---
+
 ## Error Handling
 
 ```typescript [parse.ts]

docs/content/5.api/3.reference.md

@@ -27,7 +27,8 @@ import { parse } from 'comark'
 
 const result = await parse(markdownContent, {
   autoUnwrap: true,  // Remove <p> wrappers from single-paragraph containers
-  autoClose: true    // Auto-close incomplete syntax
+  autoClose: true,   // Auto-close incomplete syntax
+  html: true         // Parse embedded HTML tags into AST nodes (default: true)
 })
 
 // Returns: ComarkTree
@@ -168,6 +169,7 @@ interface ComarkTree {
 interface ParseOptions {
   autoUnwrap?: boolean           // Remove unnecessary <p> wrappers (default: true)
   autoClose?: boolean            // Auto-close incomplete syntax (default: true)
+  html?: boolean                 // Parse embedded HTML tags into AST nodes (default: true)
   plugins?: ComarkPlugin[]       // Array of plugins to apply
 }
 ```

packages/comark-react/src/components/ComarkRenderer.tsx

@@ -159,7 +159,7 @@ function renderNode(
 
     // Parse special prop values (props starting with :)
     for (const [propKey, value] of Object.entries(nodeProps)) {
-      if (propKey === '$comark') {
+      if (propKey === '$') {
         Reflect.deleteProperty(props, propKey)
       }
       if (propKey === 'style') {

packages/comark-vue/src/components/ComarkRenderer.ts

@@ -123,7 +123,7 @@ function renderNode(
     // Prepare props — use for...in instead of Object.entries() to avoid intermediate array allocation
     const props: Record<string, any> = {}
     for (const k in nodeProps) {
-      if (k === '$comark') {
+      if (k === '$') {
         continue
       }
       if (k === 'className') {

packages/comark/SPEC/HTML/block+component.md

@@ -0,0 +1,58 @@
+---
+timeout:
+  parse: 5ms
+  html: 5ms
+  markdown: 5ms
+---
+
+## Input
+
+```md
+<Hello>
+::component
+Default Slot
+::
+</Hello>
+```
+
+## AST
+
+```json
+{
+  "frontmatter": {},
+  "meta": {},
+  "nodes": [
+    [
+      "hello",
+      {
+        "$": { "html": 1, "block": 1 }
+      },
+      [
+        "component",
+        {},
+        "Default Slot"
+      ]
+    ]
+  ]
+}
+```
+
+## HTML
+
+```html
+<hello>
+  <component>
+    Default Slot
+  </component>
+</hello>
+```
+
+## Markdown
+
+```md
+<hello>
+  ::component
+  Default Slot
+  ::
+</hello>
+```

packages/comark/SPEC/HTML/block.md

@@ -0,0 +1,53 @@
+---
+timeout:
+  parse: 5ms
+  html: 5ms
+  markdown: 5ms
+---
+
+## Input
+
+```md
+<Hello>
+Hello **World**
+</Hello>
+```
+
+## AST
+
+```json
+{
+  "frontmatter": {},
+  "meta": {},
+  "nodes": [
+    [
+      "hello",
+      {
+        "$": { "html": 1, "block": 1 }
+      },
+      "Hello ",
+      [
+        "strong",
+        {},
+        "World"
+      ]
+    ]
+  ]
+}
+```
+
+## HTML
+
+```html
+<hello>
+  Hello <strong>World</strong>
+</hello>
+```
+
+## Markdown
+
+```md
+<hello>
+Hello **World**
+</hello>
+```

packages/comark/SPEC/HTML/inline.md

@@ -0,0 +1,53 @@
+---
+timeout:
+  parse: 5ms
+  html: 5ms
+  markdown: 5ms
+---
+
+## Input
+
+```md
+<Hello>Hello **World**</Hello>
+```
+
+## AST
+
+```json
+{
+  "frontmatter": {},
+  "meta": {},
+  "nodes": [
+    [
+      "p",
+      {},
+      [
+        "hello",
+        {
+          "$": { "html": 1, "block": 0 }
+        },
+        "Hello ",
+        [
+          "strong",
+          {},
+          "World"
+        ]
+      ]
+    ]
+  ]
+}
+```
+
+## HTML
+
+```html
+<p>
+  <hello>Hello <strong>World</strong></hello>
+</p>
+```
+
+## Markdown
+
+```md
+<hello>Hello **World**</hello>
+```

packages/comark/SPEC/HTML/mix+paragraph.md

@@ -0,0 +1,62 @@
+---
+timeout:
+  parse: 5ms
+  html: 5ms
+  markdown: 5ms
+---
+
+## Input
+
+```md
+<Hello>
+Hello **World**
+</Hello>
+Another Pragraph
+```
+
+## AST
+
+```json
+{
+  "frontmatter": {},
+  "meta": {},
+  "nodes": [
+    [
+      "hello",
+      {
+        "$": { "html": 1, "block": 1 }
+      },
+      "Hello ",
+      [
+        "strong",
+        {},
+        "World"
+      ]
+    ],
+    [
+      "p",
+      {},
+      "Another Pragraph"
+    ]
+  ]
+}
+```
+
+## HTML
+
+```html
+<hello>
+  Hello <strong>World</strong>
+</hello>
+<p>Another Pragraph</p>
+```
+
+## Markdown
+
+```md
+<hello>
+Hello **World**
+</hello>
+
+Another Pragraph
+```