comark-solid

Solid renderer for Comark.

Warning

Pre-release: Solid 2.0 RC

This package targets the Solid 2.0 RC versions of solid-js and @solidjs/web. Solid 2.0 is not stable yet, so bugs and compatibility issues may occur.

Installation

npm install comark-solid comark

<Markdown>

Parses Markdown strings and renders them directly.

import { Markdown } from "comark-solid";

const markdown = "# Hello World";

export default function App() {
  return <Markdown value={markdown} />;
}

Props

Prop	Type	Default	Description
value	string | MarkdownDocument	(Required)	Markdown string or pre-parsed document.
options	ParserOptions	undefined	Options passed to parseMarkdown (ignored if value is a MarkdownDocument).
components	Record<string, ValidComponent>	{}	Map of AST node names to Solid components.
data	Record<string, unknown>	{}	Runtime values referenced from markdown via :prop="data.path".
class	string	undefined	Additional class name for the wrapper div (comark-content is always included).

<MarkdownDocument>

Renders a pre-parsed MarkdownDocument AST without invoking the parser. Ideal for server-side rendering (SSR), static site generation, or pre-compiled content.

import { parseMarkdown } from "comark";
import { MarkdownDocument } from "comark-solid";

const document = await parseMarkdown("# Hello World");

export default function App() {
  return <MarkdownDocument value={document} />;
}

Props

Prop	Type	Default	Description
value	MarkdownDocument	(Required)	Pre-parsed Comark document AST.
components	Record<string, ValidComponent>	{}	Map of AST node names to Solid components.
data	Record<string, unknown>	{}	Runtime values referenced from markdown via :prop="data.path".
class	string	undefined	Additional class name for the wrapper div (comark-content is always included).

Custom Components

Map tag to Solid components via the components prop:

import { Markdown } from "comark-solid";
import { Card } from "./Card";
import { CustomHeading } from "./CustomHeading";

const components = {
  h1: CustomHeading,
  card: Card,
};

export default function App() {
  return <Markdown value={markdown} components={components} />;
}

Components can also be loaded asynchronously using Solid's lazy():

import { lazy } from "solid-js";

const components = {
  chart: lazy(() => import("./Chart")),
};

Component bindings

Props

Attributes in Comark syntax are passed as props to your component. Use the : prefix to pass typed values:

Markdown	Prop value
{type="warning"}	"warning" (string)
{:count="5"}	5 (number)
{:active=true}	true (boolean)
{:config='{"key":"val"}'}	{ key: "val" } (object)

Slots

The default slot is passed as children. Named slots (e.g. #header) are passed as camelCase props prefixed with slot (slotHeader).

::card
#header
Header content

#default
Body content
::

interface CardProps {
  slotHeader?: JSX.Element;
  children?: JSX.Element;
}

export default function Card(props: CardProps) {
  return (
    <div>
      <Show when={props.slotHeader}>{(header) => <div>{header}</div>}</Show>
      <div>{props.children}</div>
    </div>
  );
}

Acknowledgements

This project is heavily based on the official Comark React renderer, adapted for Solid's component model and APIs.

The original implementation is licensed under the MIT License.

License

MIT