Markdown

import { Markdown } from "@grassroot/ui-react";
 
const source = `## Release notes
 
The renderer keeps **structure** and \`code\` safe.
 
> [!NOTE]
> This callout is parsed into a semantic render part.
 
- [x] CommonMark and GFM
- [ ] Editor round-trip
 
| Layer | Responsibility |
| --- | --- |
| Core | AST and diagnostics |
| Adapter | Framework markup |
 
[^1]: Footnotes stay addressable after rendering.`;
 
export default function MarkdownDemo() {
  return <Markdown source={source} options={{ gfm: true, footnotes: true, callouts: true }} />;
}

<script setup lang="ts">
import { Markdown } from "@grassroot/ui-vue";
 
const source = `## Release notes
 
The renderer keeps **structure** and \`code\` safe.
 
> [!NOTE]
> This callout is parsed into a semantic render part.
 
- [x] CommonMark and GFM
- [ ] Editor round-trip
 
| Layer | Responsibility |
| --- | --- |
| Core | AST and diagnostics |
| Adapter | Framework markup |
 
[^1]: Footnotes stay addressable after rendering.`;
 
const options = { gfm: true, footnotes: true, callouts: true };
</script>
 
<template>
  <Markdown :source="source" :options="options" />
</template>

import { Component } from "@angular/core";
import { GrassrootMarkdown } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-markdown-demo",
  standalone: true,
  imports: [GrassrootMarkdown],
  host: { style: "display: contents" },
  template: `<grassroot-markdown [source]="source" [options]="options" />`,
})
export class MarkdownDemoComponent {
  protected readonly source = `## Release notes
 
The renderer keeps **structure** and \`code\` safe.
 
> [!NOTE]
> This callout is parsed into a semantic render part.
 
- [x] CommonMark and GFM
- [ ] Editor round-trip
 
| Layer | Responsibility |
| --- | --- |
| Core | AST and diagnostics |
| Adapter | Framework markup |
 
[^1]: Footnotes stay addressable after rendering.`;
 
  protected readonly options = { gfm: true, footnotes: true, callouts: true };
}
 
export default MarkdownDemoComponent;

<script lang="ts">
  import { Markdown } from "@grassroot/ui-svelte";
 
  const source = `## Release notes
 
The renderer keeps **structure** and \`code\` safe.
 
> [!NOTE]
> This callout is parsed into a semantic render part.
 
- [x] CommonMark and GFM
- [ ] Editor round-trip
 
| Layer | Responsibility |
| --- | --- |
| Core | AST and diagnostics |
| Adapter | Framework markup |
 
[^1]: Footnotes stay addressable after rendering.`;
 
  const options = { gfm: true, footnotes: true, callouts: true };
</script>
 
<Markdown {source} {options} />

/** @jsxImportSource solid-js */
import { Markdown } from "@grassroot/ui-solid";
 
const source = `## Release notes
 
The renderer keeps **structure** and \`code\` safe.
 
> [!NOTE]
> This callout is parsed into a semantic render part.
 
- [x] CommonMark and GFM
- [ ] Editor round-trip
 
| Layer | Responsibility |
| --- | --- |
| Core | AST and diagnostics |
| Adapter | Framework markup |
 
[^1]: Footnotes stay addressable after rendering.`;
 
export default function MarkdownDemo() {
  return <Markdown source={source} options={{ gfm: true, footnotes: true, callouts: true }} />;
}