@sit-onyx/comark

Render markdown content with onyx components.

It's a wrapper for the @comark/vue package using the onyx design system created by Schwarz Digits.

For runtime parsing and rendering of markdown use the OnyxComark component. Otherwise use the OnyxComarkRenderer for server and build-time parsing with less client code required.

Getting Started

Step 1: Install package

pnpm add @sit-onyx/comark

Step 2: Import styles

Import the CSS file, either globally or in a single component:

// make sure to import the MDC styles AFTER the general "sit-onyx" styles
// import "sit-onyx/style.css";
import "@sit-onyx/comark/style.css";

OnyxComark

Simple runtime parser and renderer component for markdown. Just pass your markdown string:

<!-- App.vue -->
<script setup lang="ts">
import { OnyxComark } from "@sit-onyx/comark";

const content = `# Hello World

This is **markdown** with Comark components.
`;
</script>

<template>
  <!-- It is required to wrap OnyxComark in a Suspense block! -->
  <Suspense>
    <OnyxComark>{{ content }}</OnyxComark>
  </Suspense>
</template>

For more details check the documentation for the Comark component.

OnyxComarkRenderer

Renders a pre-parsed ComarkTree without any parsing. Use it when you parse on the server, in a build step, or via an API, so no parser or plugin code is shipped to the browser.

1. Parse on the server/buildtime

// server.ts

import { createParse } from "comark";
import { readFile } from "node:fs/promises";

const parse = createParse();

// In your server handler
export async function getContentTree(slug: string) {
  const markdown = await readFile(`content/${slug}.md`, "utf-8");
  return parse(markdown);
}

2. Render the parsed tree

<!-- ContentPage.vue -->
<script setup lang="ts">
import { OnyxComarkRenderer } from "@sit-onyx/comark";
const { slug } = defineProps<{ slug: string }>();

const res = await fetch(`/api/content/${slug}`);
const tree = await res.json();
</script>

<template>
  <OnyxComarkRenderer :tree="tree" />
</template>