@humanspeak/svelte-markdown 0.6.8 → 0.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +20 -17
- package/dist/SvelteMarkdown.svelte +24 -0
- package/dist/SvelteMarkdown.svelte.d.ts +22 -0
- package/package.json +9 -6
package/README.md
CHANGED
|
@@ -1,7 +1,21 @@
|
|
|
1
1
|
# Svelte Markdown
|
|
2
2
|
|
|
3
|
+
[](https://www.npmjs.com/package/@humanspeak/svelte-markdown)
|
|
4
|
+
[](https://github.com/humanspeak/svelte-markdown/actions/workflows/npm-publish.yml)
|
|
5
|
+
[](https://coveralls.io/github/humanspeak/svelte-markdown?branch=main)
|
|
6
|
+
[](https://github.com/humanspeak/svelte-markdown/blob/main/LICENSE)
|
|
7
|
+
<!-- [](https://bundlephobia.com/package/@humanspeak/svelte-markdown) -->
|
|
8
|
+
[](https://www.npmjs.com/package/@humanspeak/svelte-markdown)
|
|
9
|
+
[](https://github.com/humanspeak/svelte-markdown/actions/workflows/codeql.yml)
|
|
10
|
+
<!-- [](CODE_OF_CONDUCT.md) -->
|
|
11
|
+
[](http://www.typescriptlang.org/)
|
|
12
|
+
[](https://www.npmjs.com/package/@humanspeak/svelte-markdown)
|
|
13
|
+
[](https://github.com/humanspeak/svelte-markdown/graphs/commit-activity)
|
|
14
|
+
|
|
3
15
|
A markdown parser that renders into Svelte Components. Inspired by [ReactMarkdown](https://github.com/remarkjs/react-markdown).
|
|
4
16
|
|
|
17
|
+
Feel free to play with it and leave comments on its [homepage](https://markdown.svelte.page)
|
|
18
|
+
|
|
5
19
|
Rewriten for Svelte5 and all the updated goodies that have happened over the last two years. Also moved to Typescript because its the future!
|
|
6
20
|
|
|
7
21
|
## Installation
|
|
@@ -236,27 +250,16 @@ Note that the HTML paragraph must be enclosed within `<p>` tags.
|
|
|
236
250
|
|
|
237
251
|
Some tests have been added to the `tests` folder. You can clone this repo and create another svelte app and link it to this repo to try modifying it.
|
|
238
252
|
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
```console
|
|
242
|
-
yarn
|
|
243
|
-
yarn link
|
|
244
|
-
yarn dev
|
|
245
|
-
```
|
|
253
|
+
The current extenral dependencies are:
|
|
246
254
|
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
yarn link @humanspeak/svelte-markdown
|
|
251
|
-
```
|
|
252
|
-
|
|
253
|
-
And then import it like in the example above.
|
|
254
|
-
|
|
255
|
-
As of now the only external dependencys of this project is `marked`, `github-slugger`, `htmlparser2`.
|
|
255
|
+
- [Marked](https://marked.js.org/)
|
|
256
|
+
- [Github-Slugger](https://github.com/Flet/github-slugger)
|
|
257
|
+
- [HTMLParser2](https://github.com/fb55/htmlparser2).
|
|
256
258
|
|
|
257
259
|
## Related
|
|
258
260
|
|
|
259
261
|
- [ReactMarkdown](https://github.com/remarkjs/react-markdown) - React library to render markdown using React components. Inspiration for this library.
|
|
260
262
|
- [Svelte](https://svelte.dev) - JavaScript front-end framework.
|
|
261
|
-
- [Marked](https://marked.js.org/) - Markdown parser
|
|
262
263
|
- [Original](https://github.com/pablo-abc/svelte-markdown) - Original component
|
|
264
|
+
|
|
265
|
+
Made with ♥ by [Humanspeak](https://humanspeak.com)
|
|
@@ -1,3 +1,27 @@
|
|
|
1
|
+
<!--
|
|
2
|
+
@component
|
|
3
|
+
|
|
4
|
+
A Svelte component that renders Markdown content into HTML using a customizable parser.
|
|
5
|
+
Supports both string input and pre-parsed markdown tokens, with configurable rendering
|
|
6
|
+
options and custom renderers.
|
|
7
|
+
|
|
8
|
+
@example
|
|
9
|
+
```svelte
|
|
10
|
+
<SvelteMarkdown source="# Hello World" />
|
|
11
|
+
|
|
12
|
+
<SvelteMarkdown
|
|
13
|
+
source={markdownString}
|
|
14
|
+
options={{ headerIds: false }}
|
|
15
|
+
renderers={{ link: CustomLink }}
|
|
16
|
+
/>
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
@property {string | Token[]} source - The markdown content to render, either as a string or pre-parsed tokens
|
|
20
|
+
@property {Partial<Renderers>} [renderers] - Custom renderers for markdown elements
|
|
21
|
+
@property {SvelteMarkdownOptions} [options] - Configuration options for the markdown parser
|
|
22
|
+
@property {boolean} [isInline=false] - Whether to parse the content as inline markdown
|
|
23
|
+
@property {function} [parsed] - Callback function called with the parsed tokens
|
|
24
|
+
-->
|
|
1
25
|
<script lang="ts">
|
|
2
26
|
import {
|
|
3
27
|
Lexer,
|
|
@@ -1,4 +1,26 @@
|
|
|
1
1
|
import { type Token, type TokensList, type SvelteMarkdownOptions, type Renderers } from './utils/markdown-parser.js';
|
|
2
|
+
/**
|
|
3
|
+
* A Svelte component that renders Markdown content into HTML using a customizable parser.
|
|
4
|
+
* Supports both string input and pre-parsed markdown tokens, with configurable rendering
|
|
5
|
+
* options and custom renderers.
|
|
6
|
+
*
|
|
7
|
+
* @example
|
|
8
|
+
* ```svelte
|
|
9
|
+
* <SvelteMarkdown source="# Hello World" />
|
|
10
|
+
*
|
|
11
|
+
* <SvelteMarkdown
|
|
12
|
+
* source={markdownString}
|
|
13
|
+
* options={{ headerIds: false }}
|
|
14
|
+
* renderers={{ link: CustomLink }}
|
|
15
|
+
* />
|
|
16
|
+
* ```
|
|
17
|
+
*
|
|
18
|
+
* @property {string | Token[]} source - The markdown content to render, either as a string or pre-parsed tokens
|
|
19
|
+
* @property {Partial<Renderers>} [renderers] - Custom renderers for markdown elements
|
|
20
|
+
* @property {SvelteMarkdownOptions} [options] - Configuration options for the markdown parser
|
|
21
|
+
* @property {boolean} [isInline=false] - Whether to parse the content as inline markdown
|
|
22
|
+
* @property {function} [parsed] - Callback function called with the parsed tokens
|
|
23
|
+
*/
|
|
2
24
|
declare const SvelteMarkdown: import("svelte").Component<{
|
|
3
25
|
source: Token[] | string;
|
|
4
26
|
renderers?: Partial<Renderers>;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@humanspeak/svelte-markdown",
|
|
3
3
|
"description": "A markdown renderer for Svelte",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.7.0",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"dev": "vite dev",
|
|
7
7
|
"build": "vite build && npm run package",
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"svelte",
|
|
31
31
|
"markdown"
|
|
32
32
|
],
|
|
33
|
-
"homepage": "
|
|
33
|
+
"homepage": "https://markdown.svelte.page",
|
|
34
34
|
"files": [
|
|
35
35
|
"dist",
|
|
36
36
|
"!dist/**/*.test.*",
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
"dependencies": {
|
|
55
55
|
"github-slugger": "^2.0.0",
|
|
56
56
|
"htmlparser2": "^10.0.0",
|
|
57
|
-
"marked": "^15.0.
|
|
57
|
+
"marked": "^15.0.5"
|
|
58
58
|
},
|
|
59
59
|
"devDependencies": {
|
|
60
60
|
"@eslint/eslintrc": "^3.2.0",
|
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
"@testing-library/jest-dom": "^6.6.3",
|
|
67
67
|
"@testing-library/svelte": "^5.2.6",
|
|
68
68
|
"@testing-library/user-event": "^14.5.2",
|
|
69
|
-
"@types/node": "^22.10.
|
|
69
|
+
"@types/node": "^22.10.5",
|
|
70
70
|
"@typescript-eslint/eslint-plugin": "^8.19.0",
|
|
71
71
|
"@typescript-eslint/parser": "^8.19.0",
|
|
72
72
|
"@vitest/coverage-v8": "^2.1.8",
|
|
@@ -80,15 +80,18 @@
|
|
|
80
80
|
"prettier-plugin-svelte": "^3.3.2",
|
|
81
81
|
"prettier-plugin-tailwindcss": "^0.6.9",
|
|
82
82
|
"publint": "^0.2.12",
|
|
83
|
-
"svelte": "^5.16.
|
|
83
|
+
"svelte": "^5.16.1",
|
|
84
84
|
"svelte-check": "^4.1.1",
|
|
85
85
|
"typescript": "^5.7.2",
|
|
86
|
-
"vite": "^6.0.
|
|
86
|
+
"vite": "^6.0.7",
|
|
87
87
|
"vitest": "^2.1.8"
|
|
88
88
|
},
|
|
89
89
|
"overrides": {
|
|
90
90
|
"@sveltejs/kit": {
|
|
91
91
|
"cookie": "^0.7.0"
|
|
92
92
|
}
|
|
93
|
+
},
|
|
94
|
+
"volta": {
|
|
95
|
+
"node": "22.12.0"
|
|
93
96
|
}
|
|
94
97
|
}
|