https://github.com/humanspeak/svelte-markdown
📝 Fast, lightweight Markdown renderer component for Svelte applications with full CommonMark support
https://github.com/humanspeak/svelte-markdown
javascript markdown markdown-parser markdown-to-html svelte sveltekit typescript ui-components web-components
Last synced: about 2 months ago
JSON representation
📝 Fast, lightweight Markdown renderer component for Svelte applications with full CommonMark support
- Host: GitHub
- URL: https://github.com/humanspeak/svelte-markdown
- Owner: humanspeak
- License: mit
- Created: 2024-10-29T22:38:46.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-03-24T17:23:32.000Z (about 2 months ago)
- Last Synced: 2025-03-28T19:00:24.465Z (about 2 months ago)
- Topics: javascript, markdown, markdown-parser, markdown-to-html, svelte, sveltekit, typescript, ui-components, web-components
- Language: TypeScript
- Homepage: https://markdown.svelte.page
- Size: 3.39 MB
- Stars: 21
- Watchers: 1
- Forks: 2
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# @humanspeak/svelte-markdown
A powerful, customizable markdown renderer for Svelte with TypeScript support. Built as a successor to the original svelte-markdown package by Pablo Berganza, now maintained and enhanced by Humanspeak, Inc.
[](https://www.npmjs.com/package/@humanspeak/svelte-markdown)
[](https://github.com/humanspeak/svelte-markdown/actions/workflows/npm-publish.yml)
[](https://coveralls.io/github/humanspeak/svelte-markdown?branch=main)
[](https://github.com/humanspeak/svelte-markdown/blob/main/LICENSE)
[](https://www.npmjs.com/package/@humanspeak/svelte-markdown)
[](https://github.com/humanspeak/svelte-markdown/actions/workflows/codeql.yml)
[](https://packagephobia.com/result?p=@humanspeak/svelte-markdown)
[](https://trunk.io)
[](http://www.typescriptlang.org/)
[](https://www.npmjs.com/package/@humanspeak/svelte-markdown)
[](https://github.com/humanspeak/svelte-markdown/graphs/commit-activity)
## Features
- 🚀 Full markdown syntax support through Marked
- 💪 Complete TypeScript support with strict typing
- 🎨 Customizable component rendering system
- 🔒 Secure HTML parsing via HTMLParser2
- 🎯 GitHub-style slug generation for headers
- ♿ WCAG 2.1 accessibility compliance
- 🧪 Comprehensive test coverage (vitest and playwright)
- 🔄 Svelte 5 runes compatibility
- 🛡️ XSS protection and sanitization
## Installation
```bash
npm i -S @humanspeak/svelte-markdown
```
Or with your preferred package manager:
```bash
pnpm add @humanspeak/svelte-markdown
yarn add @humanspeak/svelte-markdown
```
## External Dependencies
This package carefully selects its dependencies to provide a robust and maintainable solution:
### Core Dependencies
- **marked**
- Industry-standard markdown parser
- Battle-tested in production
- Extensive security features
- **github-slugger**
- GitHub-style heading ID generation
- Unicode support
- Collision handling
- **htmlparser2**
- High-performance HTML parsing
- Streaming capabilities
- Security-focused design
## Basic Usage
```svelte
import SvelteMarkdown from '@humanspeak/svelte-markdown'
const source = `
# This is a header
This is a paragraph with **bold** and <em>mixed HTML</em>.
* List item with \`inline code\`
* And a [link](https://svelte.dev)
* With nested items
* Supporting full markdown
`
```
## TypeScript Support
The package is written in TypeScript and includes full type definitions:
```typescript
import type {
Renderers,
Token,
TokensList,
SvelteMarkdownOptions
} from '@humanspeak/svelte-markdown'
```
## Custom Renderer Example
Here's a complete example of a custom renderer with TypeScript support:
```svelte
import type { Snippet } from 'svelte'
interface Props {
children?: Snippet
href?: string
title?: string
text?: string
}
const { href = '', title = '', text = '', children }: Props = $props()
{@render children?.() ?? text}
```
## Advanced Features
### Table Support with Mixed Content
The package excels at handling complex nested structures and mixed content:
```markdown
| Type | Content |
| ---------- | --------------------------------------- |
| Nested |
**bold** and _italic_ |
| Mixed List | - Item 1
- Item 2
| Code |
`inline code` |
```
### HTML in Markdown
Seamlessly mix HTML and Markdown:
```markdown
### This is a Markdown heading inside HTML
And here's some **bold** text too!
Click to expand
- This is a markdown list
- Inside an HTML details element
- Supporting **bold** and _italic_ text
```
## Available Renderers
- `text` - Text within other elements
- `paragraph` - Paragraph (`
`)
- `em` - Emphasis (``)
- `strong` - Strong/bold (``)
- `hr` - Horizontal rule (`
`)
- `blockquote` - Block quote (``)
- `del` - Deleted/strike-through (``)
- `link` - Link (``)
- `image` - Image (``)
- `table` - Table (``)
- `tablehead` - Table head (``)
- `tablebody` - Table body (``)
- `tablerow` - Table row (``)
- `tablecell` - Table cell (``/``)
- `list` - List (``/`
`)
- `listitem` - List item (`
- `heading` - Heading (``-`
`)
- `codespan` - Inline code (``)
- `code` - Block of code (``)
- `html` - HTML node
- `rawtext` - All other text that is going to be included in an object above
### Optional List Renderers
For fine-grained styling:
- `orderedlistitem` - Items in ordered lists
- `unorderedlistitem` - Items in unordered lists
### HTML Renderers
The `html` renderer is special and can be configured separately to handle HTML elements:
| Element | Description |
| -------- | -------------------- |
| `div` | Division element |
| `span` | Inline container |
| `table` | HTML table structure |
| `thead` | Table header group |
| `tbody` | Table body group |
| `tr` | Table row |
| `td` | Table data cell |
| `th` | Table header cell |
| `ul` | Unordered list |
| `ol` | Ordered list |
| `li` | List item |
| `code` | Code block |
| `em` | Emphasized text |
| `strong` | Strong text |
| `a` | Anchor/link |
| `img` | Image |
You can customize HTML rendering by providing your own components:
```typescript
import type { HtmlRenderers } from '@humanspeak/svelte-markdown'
const customHtmlRenderers: Partial = {
div: YourCustomDivComponent,
span: YourCustomSpanComponent
}
```
## Events
The component emits a `parsed` event when tokens are calculated:
```svelte
import SvelteMarkdown from '@humanspeak/svelte-markdown'
const handleParsed = (tokens: Token[] | TokensList) => {
console.log('Parsed tokens:', tokens)
}
```
## Props
| Prop | Type | Description |
| --------- | ----------------------- | ------------------------------------- |
| source | `string \| Token[]` | Markdown content or pre-parsed tokens |
| renderers | `Partial` | Custom component overrides |
| options | `SvelteMarkdownOptions` | Marked parser configuration |
| isInline | `boolean` | Toggle inline parsing mode |
## Security
The package includes several security features:
- XSS protection through HTML sanitization
- Secure HTML parsing with HTMLParser2
- Safe handling of HTML entities
- Protection against malicious markdown injection
## License
MIT © [Humanspeak, Inc.](LICENSE)
## Credits
Made with ♥ by [Humanspeak](https://humanspeak.com)