This package is an extension of Lit's Directives to add markdown rendering functionality.
This package uses Marked and sanitize-html to provide a light-weight and safe renderer in the browser.
You can install this packaged into any existing Lit project.
npm install lit-markdown
OR
yarn add lit-markdown
Using the directive is easy.
import { LitElement, html, PropertyValueMap } from "lit";
import { customElement, query, state } from "lit/decorators.js";
import { resolveMarkdown } from "lit-markdown";
@customElement("my-element")
export class MyElement extends LitElement {
@query("textarea")
private textarea!: HTMLTextAreaElement;
@state()
private raw = "";
firstUpdated(_changedProperties: PropertyValueMap<unknown> | Map<PropertyKey, unknown>) {
super.firstUpdated(_changedProperties);
this.textarea.addEventListener("input", this.handleTextareaInput);
}
private handleTextareaInput: EventListener = () => {
const { value } = this.textarea;
if (!value) return;
this.raw = value.trim();
};
render() {
return html`<label for="markdown">Input</label><textarea name="markdown" id="markdown"></textarea>
<p>Output</p>
<article>${resolveMarkdown(this.raw, { includeImages: true, includeCodeBlockClassNames: true })}</article>`;
}
}
Feel free to open issues and create pull requests. If you are interested in adding to this package please contact me.
This package is distributed under the MIT license.