JSON Render

Features

This example demonstrates how to use Comark with JSON Render in Vue:

• JSON Render Plugin: Import and configure the json-render plugin to parse json-render code blocks
• Full Spec Format: Define a tree of named elements with a root entry point
• Single Element Shorthand: Use a simplified format for single elements
• Nested Layout: Compose deep component trees by referencing children by key
• Nuxt UI: Styled with Nuxt UI for a polished look with dark mode support

Usage

1. Import the json-render plugin:

   import jsonRender from '@comark/vue/plugins/json-render'

2. Pass the plugin to Comark:

   <Comark :plugins="[jsonRender()]" />

3. Use json-render code blocks in your markdown:

   ```json-render
   {
     "type": "Text",
     "props": { "content": "Hello" }
   }
   ```

Learn More

• JSON Render Plugin Documentation
• JSON Render