@gem-bind/marked

Render markdown with a <gem-bind-marked> web component, powered by marked.

Usage

<script type="module" src="https://esm.sh/@gem-bind/marked"></script>
<gem-bind-marked># Hello *world*</gem-bind-marked>

Content is re-rendered automatically when the light DOM changes.

Streaming

Use the streaming attribute while appending Markdown. Newly rendered text fades in, and active fades keep their progress when the growing Markdown token is re-rendered:

<gem-bind-marked streaming streaming-duration="600">Generating **an answer</gem-bind-marked>

streaming-duration configures the fade duration in milliseconds and defaults to 400. The animation respects prefers-reduced-motion.

Custom rendering

Pass marked extensions via the extensions property to customize how links, code blocks, etc. are rendered:

const el = document.querySelector('gem-bind-marked');
el.extensions = [
  {
    renderer: {
      // open links in a new tab
      link(token) {
        const text = this.parser.parseInline(token.tokens);
        return `<a href="${token.href}" target="_blank" rel="noopener">${text}</a>`;
      },
      code({ text, lang }) {
        const escaped = text.replace(/&/g, '&amp;').replace(/</g, '&lt;');
        return `<pre><code class="language-${lang ?? ''}">${escaped}</code></pre>`;
      },
    },
  },
];

Styling

Shadow DOM styles can be injected via the mdStyle property (CSSStyleSheet):

const style = new CSSStyleSheet();
style.replaceSync('h1 { color: red; }');
el.mdStyle = style;