JSON Render

SourceOpen in StackBlitz
Example showing how to use Comark with JSON Render and YAML Render in Vue and Vite.
App.vue
<script setup lang="ts">
import { content } from './content'
import { Comark } from '@comark/vue'
import jsonRender from '@comark/vue/plugins/json-render'
import highlight from '@comark/vue/plugins/highlight'
import githubLight from '@shikijs/themes/github-light'
import githubDark from '@shikijs/themes/github-dark'
import { useColorMode } from '@vueuse/core'

const colorMode = useColorMode()

const plugins = [
  jsonRender(),
  highlight({
    themes: { light: githubLight, dark: githubDark },
  }),
]
</script>

<template>
  <UApp>
    <!-- Header -->
    <header class="sticky top-0 z-50 border-b border-default bg-default/80 backdrop-blur">
      <UContainer class="flex h-14 items-center justify-between">
        <div class="flex items-center gap-2">
          <span class="text-base font-bold tracking-tight text-highlighted">Comark</span>
          <span class="text-muted font-light">&middot;</span>
          <UBadge
            color="primary"
            variant="subtle"
            size="sm"
          >
            JSON Render
          </UBadge>
        </div>

        <UTooltip :text="colorMode === 'dark' ? 'Light mode' : 'Dark mode'">
          <UButton
            :icon="colorMode === 'dark' ? 'i-lucide-sun' : 'i-lucide-moon'"
            color="neutral"
            variant="ghost"
            size="md"
            @click="colorMode = colorMode === 'dark' ? 'light' : 'dark'"
          />
        </UTooltip>
      </UContainer>
    </header>

    <!-- Page -->
    <main class="py-12 px-4">
      <UContainer class="max-w-3xl">
        <Suspense>
          <Comark
            class="prose"
            :plugins="plugins"
          >
            {{ content }}
          </Comark>
        </Suspense>
      </UContainer>
    </main>
  </UApp>
</template>

<style>
.prose pre.shiki {
  margin: 0.75rem 0 1.5rem;
  padding: 1.25rem 1.5rem;
  border-radius: 0.75rem;
  border: 1px solid var(--ui-border);
  overflow: auto;
  line-height: 1.65;
  font-size: 0.88rem;
}
.prose .shiki .line {
  display: block;
}
.prose .shiki .line:empty {
  height: 1lh;
}
.dark .prose pre.shiki span {
  color: var(--shiki-dark) !important;
}
</style>
https://comark-json-render.vercel.app

Features

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

  • JSON Render Plugin: Import and configure the json-render plugin to parse json-render and yaml-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
  • YAML Support: Write specs in YAML for improved readability
  • 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 or yaml-render code blocks in your markdown:

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

Learn More

Syntax Highlighting

Example showing how to use Comark with syntax highlighting using Shiki in Vue and Vite.

Math formulas

Example showing how to use Comark with LaTeX math formulas in Vue and Vite.