https://github.com/ssssota/svelte-exmarkdown

Svelte component to render markdown.
https://github.com/ssssota/svelte-exmarkdown

markdown remark svelte

Last synced: 4 days ago
JSON representation

Svelte component to render markdown.

• Host: GitHub
• URL: https://github.com/ssssota/svelte-exmarkdown
• Owner: ssssota
• License: mit
• Created: 2022-04-07T16:46:49.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-04-13T17:34:28.000Z (9 months ago)
• Last Synced: 2024-04-14T08:03:00.573Z (9 months ago)
• Topics: markdown, remark, svelte
• Language: TypeScript
• Homepage: https://ssssota.github.io/svelte-exmarkdown
• Size: 9.92 MB
• Stars: 152
• Watchers: 5
• Forks: 5
• Open Issues: 17
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# svelte-exmarkdown

[![CI](https://github.com/ssssota/svelte-exmarkdown/actions/workflows/ci.yml/badge.svg)](https://github.com/ssssota/svelte-exmarkdown/actions/workflows/ci.yml)

[![codecov](https://codecov.io/gh/ssssota/svelte-exmarkdown/branch/main/graph/badge.svg?token=5I9YNJ57R3)](https://codecov.io/gh/ssssota/svelte-exmarkdown)

[![License MIT](https://img.shields.io/npm/l/svelte-exmarkdown)](https://github.com/ssssota/svelte-exmarkdown/blob/main/LICENSE)

Svelte component to render markdown. Dynamic and Extensible.

## Motivation

[svelte-markdown](https://www.npmjs.com/package/svelte-markdown) is a good component package.

However, it is not extensible. You cannot use custom syntax(e.g. KaTeX).

[MDsveX](https://www.npmjs.com/package/mdsvex) is another good package.

However, it is a preprocessor. Not suitable for dynamic rendering.

We need **pluggable** and **dynamic** markdown renderer in svelte like [react-markdown](https://www.npmjs.com/package/react-markdown).

## Usage

```svelte

	import Markdown from 'svelte-exmarkdown';

	let md = $state('# Hello world!');

```

with GFM

```svelte

	import Markdown from 'svelte-exmarkdown';

	import { gfmPlugin } from 'svelte-exmarkdown/gfm';

	let md = $state('# Hello world!');

	const plugins = [gfmPlugin()];

```

## Playground & Documents

https://ssssota.github.io/svelte-exmarkdown