MarkdownViewer Widget

Renders markdown-formatted text as styled HTML. This is used for notes, terms, and any free-text field where users might write markdown (bold, italic, lists, links).

Usage

In your index.ts:

import "../../widgets/markdown-viewer";

In your template.hbs:

{{#if notes}}
  {{> MarkdownViewer (prepareMarkdownViewerData notes) }}
{{/if}}

{{#if terms}}
  {{#each terms}}
    {{#each this.terms}}
      {{> MarkdownViewer (prepareMarkdownViewerData this) }}
    {{/each}}
  {{/each}}
{{/if}}

Notice the prepareMarkdownViewerData helper. You need to wrap your text with this helper before passing it to the partial. It processes the raw text and returns the data the partial needs.

How it works

1. You pass raw text to prepareMarkdownViewerData
2. The helper converts markdown to HTML (bold, italic, headings, lists, links)
3. It sanitizes the HTML to prevent XSS (script injection)
4. The MarkdownViewer partial renders the sanitized HTML with styling

Supported markdown

The viewer supports common markdown:

Markdown	Result
**bold**	bold
*italic*	italic
[link text](url)	Clickable link
- item	Bullet list
1. item	Numbered list
# Heading	Heading (h1 through h6)
`code`	Inline code

Styling

The MarkdownViewer comes with its own CSS that styles the rendered HTML. It handles typography, list spacing, and link colors. The styles are scoped to the .markdown-viewer class so they do not leak into the rest of your template.

Why use this instead of just rendering HTML directly?

Two reasons:

1. Safety: The viewer sanitizes the HTML. If a user writes <script>alert('hack')</script> in their notes, it will not execute.
2. Consistency: The viewer applies consistent styling to the rendered markdown, so it looks good regardless of what the user types.