StartHDS Markdown
StartHDS Markdown is an optional public bundle for browser-side rendering of Markdown into token-backed hds-* article, course, docs, prose, and landing layouts. Use the feature name markdown in routes, files, APIs, and examples.
Load core first, then the optional markdown CSS bundle, then token-only themes and product-local CSS. Load markdown JavaScript only when browser-side parsing is desired.
<link rel="stylesheet" href="/v1/css/starthds-core.css"> <link rel="stylesheet" href="/v1/css/starthds-markdown.css"> <link rel="stylesheet" href="/v1/css/themes/equiask.css"> <link rel="stylesheet" href="/assets/app-local.css"> <script type="module" src="/v1/js/starthds-core.js"></script> <script type="module" src="/v1/js/starthds-markdown.js"></script>
The module exports enhance, parseMarkdown, renderMarkdown, and renderBlocks, and exposes the same API as window.StartHDSMarkdown.
import { enhance, parseMarkdown, renderMarkdown, renderBlocks } from '/v1/js/starthds-markdown.js';
const html = renderMarkdown(markdown, { layout: 'article' });
enhance(document);Short snippets can live directly on an element. The enhancer reads the attribute first, then element text.
<div data-hds-markdown-layout="docs"
data-hds-markdown="# Inline markdown\nUse **strong** copy."></div>Longer documents should use a same-page source element or a host-owned same-origin Markdown URL.
<script type="text/markdown" id="article-source"> --- title: Article layout: article --- # Heading </script> <article data-hds-markdown-source="#article-source"></article>
Common Markdown includes headings, paragraphs, emphasis, strong text, inline code, fenced code, blockquotes, ordered and unordered lists, task checkboxes, horizontal rules, links, images, tables, and frontmatter metadata.
Layout frontmatter can set layout: prose, article, course, docs, or landing. Article and course pages use title, description, author/module, duration/date, tags, and optional media metadata.
Directive blocks start with ::name, may include attributes, and end with ::. Available examples include ::card, ::alert, ::notice, ::cta, ::learning-goals, ::exercise, and landing MVP directives: ::hero, ::landing-hero, ::feature-grid, ::benefits, ::pricing, ::testimonial, ::faq, ::steps, ::logo-strip, ::proof-strip, and ::cta-band.
::hero eyebrow="Markdown" title="Landing from Markdown" primaryLabel="Start" primaryHref="/docs/markdown" Write the hero body in Markdown. :: ::feature-grid - title: Safe text: Raw HTML stays inert. ::
Raw HTML is escaped or stripped by default, event-handler attributes are never trusted, and executable or ambiguous URL schemes such as javascript: are rejected. Relative URLs, same-origin paths, http:, https:, mailto:, and tel: are allowed according to link/media context. Host applications own auth, persistence, payments, tenant state, comments, routing, and analytics.