@markview/webcomponent

Web Component for beautiful markdown rendering — works with Vue, Angular, Svelte, or plain HTML.

Install

npm install @markview/webcomponent

Optional peer dependencies:

npm install shiki      # syntax highlighting
npm install mermaid    # diagrams
npm install katex      # math equations

Quick Start

Plain HTML

<script type="module">
  import '@markview/webcomponent';
</script>

<mark-view
  content="# Hello World\n\nThis is **markdown**."
  theme="dark"
  shiki
  mermaid
  katex
></mark-view>

Vue

<template>
  <mark-view :content="markdown" theme="dark" shiki mermaid katex />
</template>

<script setup>
import '@markview/webcomponent';
const markdown = ref('# Hello from Vue');
</script>

Angular

// app.module.ts
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@markview/webcomponent';

@NgModule({ schemas: [CUSTOM_ELEMENTS_SCHEMA] })

<mark-view [attr.content]="markdown" theme="dark" shiki mermaid></mark-view>

Svelte

<script>
  import '@markview/webcomponent';
  let markdown = '# Hello from Svelte';
</script>

<mark-view content={markdown} theme="dark" shiki mermaid katex />

Attributes

| Attribute | Type | Default | Description | |-----------|------|---------|-------------| | content | string | '' | Markdown content | | theme | 'dark'\|'light'\|'auto' | 'auto' | Color theme | | shiki | boolean | — | Enable syntax highlighting | | mermaid | boolean | — | Enable diagrams | | katex | boolean | — | Enable math equations |

Events

| Event | Detail | Description | |-------|--------|-------------| | headings-change | TocHeading[] | Fired when headings are extracted | | render-complete | string | Fired with the rendered HTML |

document.querySelector('mark-view')
  .addEventListener('headings-change', (e) => {
    console.log('TOC:', e.detail);
  });

JavaScript API

const el = document.querySelector('mark-view');

// Set content programmatically
el.content = '# Updated content';
el.theme = 'light';

License

AGPL-3.0 — Commercial licenses available