hb-markdown-viewer

Category: content · Tags: content, markdown · Package: @htmlbricks/hb-markdown-viewer

Description

hb-markdown-viewer renders Markdown supplied through a data payload (typically { content: string }). The implementation uses marked with GitHub Flavored Markdown (GFM) enabled, line breaks turned on (breaks: true), and smart lists enabled. Before parsing, the component normalizes compact, single-line Markdown (for example inline * list items and bold section headers after punctuation) so lists and headings read more reliably when content arrives as one long string.

The output is injected into a Bulma-based layout: a section with a fluid container and an inner .markdown-body region styled in styles/webcomponent.scss (headings, lists, links, blockquotes, code, tables, and horizontal rules).

Security note

Rendered output is applied with {@html ...}. Treat data.content as trusted input, or sanitize it upstream. Untrusted Markdown can still carry HTML depending on your Markdown pipeline and options.

Data model and attributes

Web component attributes and reflected properties are strings. Pass structured data as a JSON string.

| Concern | Details | |--------|---------| | data | Required for meaningful output. JSON string shaped like { "content": "<markdown string>" }. If the host passes a string, the component attempts JSON.parse; parse failures are logged to the console. | | id | Optional string identifier for the host element. | | style | Optional in the authoring Component type (types/webcomponent.type.d.ts). The current component.wc.svelte implementation does not read a style prop; use host style / stylesheets or CSS variables for appearance. |

data.content

• Type: string (Markdown source).
• Updates: Whenever data / data.content changes, the component re-parses JSON (when needed) and re-renders HTML.
• Errors: Markdown rendering errors are logged; on failure the component falls back to using the raw content string as the HTML source string (still applied via {@html}), so avoid relying on this for untrusted input.

Markdown behavior

• GFM: tables, task lists, strikethrough, autolinks, and other GFM features supported by marked with gfm: true.
• Line breaks: single newlines in the source can produce line breaks in output (breaks: true).
• Normalization: helps when content has few newlines—for example inserts breaks before inline list markers and improves spacing before bold headings following . or :.

Styling (CSS custom properties)

The host can theme the viewer using Bulma CSS variables (see Bulma: CSS variables) and the component-specific token below. Defaults and roles match extra/docs.ts.

| Variable | Type (conceptual) | Default | Role | |----------|-------------------|---------|------| | --bulma-text | color | #363636 | Default body text in the markdown column. | | --bulma-text-strong | color | #363636 | Heading emphasis color. | | --bulma-link | color | #485fc7 | Link color inside fenced blocks and anchors. | | --bulma-border | color | #dbdbdb | Horizontal rules, blockquote border, and code borders. | | --bulma-scheme-main-bis | color | #f5f5f5 | Blockquote background tint. | | --bulma-scheme-main-ter | color | #f0f0f0 | Inline and fenced code background. | | --bulma-line-height-main | number | 1.6 | Body line height inside .markdown-body. | | --bulma-weight-semibold | number | 600 | Heading font weight. | | --bulma-radius-small | length | 0.25rem | Code block corner radius. | | --bulma-column-gap | string | 0.75rem | Gap between Bulma columns wrapping the content (from styleSetup; use when aligning with Bulma column layouts). | | --hb-markdown-body-tab-size | number | 4 | Tab size for preformatted / code display (tab-size on .markdown-body). |

CSS parts

None (styleSetup.parts is empty).

HTML slots

None.

Custom element

hb-markdown-viewer

Events

No custom events are declared in the public Events typing for this package. The component does not document a stable custom event API for hosts.

TypeScript (Component / Events)

Authoring types for props and events live in types/webcomponent.type.d.ts:

export type Component = {
  id?: string;
  style?: string;
  data: {
    content: string;
  };
};

export type Events = {};

Examples

Minimal HTML

<hb-markdown-viewer data='{"content":"# Hello\n\n**world**"}'></hb-markdown-viewer>

Headings and lists

<hb-markdown-viewer
  data='{"content":"## Release notes\n\n### Highlights\n\n- Faster startup\n- Smaller bundle\n\n### Steps\n\n1. Install dependencies\n2. Run the build\n3. Deploy"}'
></hb-markdown-viewer>

Inline and fenced code

<hb-markdown-viewer
  data='{"content":"Example `npm` command:\n\n```bash\nnpm run build:wc -- input-text\n```\n\nInline code like `Component` is supported too."}'
></hb-markdown-viewer>

When embedding JSON in HTML attributes, escape quotes as required by your templating system so the attribute value remains valid JSON.

Package metadata (from extra/docs.ts)

• Name: hb-markdown-viewer
• npm-style repo name: @htmlbricks/hb-markdown-viewer
• License: Apache-2.0 (see package LICENSE.md where applicable)