A markdown renderer for Svelte
npm install svelte-markdown


!NPM
A markdown parser that renders into Svelte Components. Inspired by ReactMarkdown.
You can install it with
``console`
$ npm i -S svelte-markdown
If you use npm or if you prefer yarn
`console`
$ yarn add svelte-markdown
If you're using Sapper you might need to install it as a dev dependency.
`html
`
This would render something like
` This is a paragraph.html`This is a header
With two items
That is ordered
And this is
A table
With two
columns
Just like with React Markdown, this package doesn't use {@html ...} unless you need to render HTML.
The SvelteMarkdown component accepts the following props:
- source - _string_ or _array_ The Markdown source to be parsed, or an array of tokens to be rendered directly.renderers
- - _object (optional)_ An object where the keys represent a node type and the value is a Svelte component. This object will be merged with the default renderers. For now you can check how the default renderers are written in the source code at src/renderers.options
- - _object (optional)_ An object containing options for Marked
To create custom renderer for an element, you can create a Svelte component with the default props (you can check them here), for example:
_ImageComponent.svelte_`svelte
src={href}
{title}
alt={text}
/>
`
So you can import the component and pass to the renderers props:
`svelte
/>
`
For greater flexibility, an array of tokens may be given as source, in which case parsing is skipped and the tokens will be rendered directly. This alows you to generate and transform the tokens freely beforehand. Example:
`html
`
This will render the following:
` THIS IS AN EXAMPLEhtml`
A parsed event will be fired when the final tokens have been calculated, allowing you to access the raw token array if needed for things like generating Table of Contents from headings.
`html
`
These would be the property names expected by the renderers option.
- text - Text rendered inside of other elements, such as paragraphsparagraph
- - Paragraph (
For fine detail styling of lists, it can be useful to differentiate between ordered and un-ordered lists. - As an example, if we have an Then numbers at the start of ordered list items would be colored blue. Bullets at the start of unordered list items To use inline markdown, you can assign the prop While the most common flavours of markdown let you use HTML in markdown paragraphs, due to how Svelte handles plain HTML it is currently not possible to do this with this package. A paragraph must be either _all_ HTML or _all_ markdown. This is an HTML paragraph Note that the HTML paragraph must be enclosed within Some tests have been added to the You can clone this repo and do the following: This will watch all changes and make the project linkable. Now on the app you created you can link it with: And then import it like in the example above. As of now the only external dependency of this project is - ReactMarkdown - React library to render markdown using React components. Inspiration for this library.)em
- - Emphasis ()strong
- - Strong/bold ()hr
- - Horizontal rule / thematic break ()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 (tests)html
- - HTML nodelistitem$3
If either key is missing, the default will be used. There are tworenderers
optional keys in the option which can provide this:orderedlistitem - A list item appearing inside an ordered listunorderedlistitem
- A list item appearing inside an un-ordered listorderedlistitem:`html`isInline
would remain the default text color.$3
to the component.`html``HTML rendering
markdown`
This is a markdown paragraph. tags.Developing
folder. You can clone this repo and create another svelte app and link it to this repo to try modifying it.`console`
$ yarn
$ yarn link
$ yarn dev`console`
$ yarn link svelte-markdownmarked`.Related
- Svelte - JavaScript front-end framework.
- Marked - Markdown parser