Styling

Setup

Pass a class to the component and place overrides in your stylesheet. No package stylesheet or Tailwind configuration is required. In a Svelte <style> block, use :global(...) so selectors reach the child renderer's markup.

<script lang="ts">
	import { MarkdownViewer } from 'markdown-svelte'

	const source = '# Hello, **Svelte**!'
</script>

<MarkdownViewer markdown={source} class="document" />

<!-- Or: <MarkdownStream {nodes} class="document" /> -->

<style>
	:global(.document) {
		--markdown-color-text: #292b29;
		--markdown-color-link: #a63f24;
		--markdown-color-surface: #f3f4ee;
		--markdown-radius: 0;
		--markdown-font-sans: system-ui, sans-serif;
		font-size: 1.05rem;
		line-height: 1.8;
	}

	:global(.document .markdown-svelte-heading--2) {
		border-bottom: 0;
		font-family: Georgia, serif;
	}
</style>

In a global CSS file, omit :global(...). The examples below use that form. Base element styles use :where(...) to keep specificity low, so ordinary class selectors can override them. Existing app styles for tags such as a or code can also take precedence; use a scoped element selector when needed.

Theme variables

Set these on the component's class or an ancestor. Font size, line height, spacing, and document background use normal CSS properties. The default palette is light; set colors explicitly for a dark surface.

These variables cover shared theme values. Use element classes for details such as highlight colors, code-toolbar colors, or inline-code corners. Properties beginning with --_markdown- are internal resolved values.

Element reference

Every class below includes the full selector. Some elements only appear for the corresponding parser node type.

.document {
	max-width: 72ch;
	margin-inline: auto;
	line-height: 1.8;
}

.document .markdown-svelte-heading--2 {
	margin-top: 2.5em;
	border-bottom: 0;
}

.document .markdown-svelte-paragraph {
	margin-block: 1em;
}

.document .markdown-svelte-link {
	text-decoration-thickness: 0.1em;
	text-underline-offset: 0.2em;
}

.document .markdown-svelte-link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.document .markdown-svelte-highlight {
	background: #e5edcf;
	color: #34451f;
}

.document .markdown-svelte-inline-code {
	border: 0;
	border-radius: 0;
}

.document .markdown-svelte-list--unordered {
	list-style-type: square;
}

.document .markdown-svelte-list-item::marker {
	color: #6d7461;
}

.document .markdown-svelte-checkbox {
	accent-color: #6d7461;
}

.document .markdown-svelte-definition-description {
	margin-inline-start: 1.5rem;
}

.document .markdown-svelte-blockquote {
	border-radius: 0;
	background: transparent;
	font-style: italic;
}

.document .markdown-svelte-admonition[data-kind='warning'] {
	border-color: #986315;
	background: #fff8e8;
}

.document .markdown-svelte-admonition[data-kind='warning'] .markdown-svelte-admonition-title {
	color: #70460c;
}

.document .markdown-svelte-thematic-break {
	margin-block: 2rem;
}

.document .markdown-svelte-code-block {
	border-radius: 0;
	box-shadow: none;
}

.document .markdown-svelte-code-pre {
	font-size: 0.9rem;
}

.document .markdown-svelte-code-copy[data-state='copied'] {
	color: #bbf7d0;
}

.document .markdown-svelte-table-wrapper {
	border: 0;
	border-radius: 0;
}

.document .markdown-svelte-table-cell {
	padding: 0.75rem 1rem;
}

.document .markdown-svelte-table-body .markdown-svelte-table-row:nth-child(even) {
	background: #f3f4ee;
}

.document .markdown-svelte-image {
	border: 0;
	border-radius: 0;
	margin-inline: 0;
}

.document .markdown-svelte-math-inline {
	border: 0;
	background: transparent;
}

.document .markdown-svelte-math-block {
	border-radius: 0;
	text-align: center;
}

.document .markdown-svelte-footnote {
	font-size: 0.85rem;
}

.document .markdown-svelte-footnote-reference-link {
	text-decoration: none;
}

.document .markdown-svelte-html-block details {
	padding-block: 0.75rem;
	border-bottom: 1px solid #dce1d3;
}

.document .markdown-svelte-html-escaped {
	font-family: ui-monospace, monospace;
}

Streaming motion

Set these variables on your MarkdownStream class to adjust animation timing. Motion respects prefers-reduced-motion. For rendering without animation, use MarkdownRenderer from markdown-svelte with the same nodes array.

.document {
	--markdown-stream-fade-duration: 200ms;
	--markdown-stream-line-duration: 100ms;
	--markdown-stream-size-duration: 160ms;
	--markdown-stream-enter-duration: 140ms;
	--markdown-stream-media-duration: 160ms;
}

Additional streaming classes

The renderer adds these classes for animated content. Prefer timing variables for motion changes. Code and math heights are calculated by the renderer; overriding their height, vertical padding, or overflow can interfere with sizing during a stream.

See the streaming guide for worker parsing and frame-paced state updates.