はいさい！ちゅらデータぬオースティンやいびーん！

今日は、lit-markdownという、LitElementの中でMarkdownをレンダーしてくれるDirectiveをnpmにて公開しました。

このことを本記事でご報告したいと思いました。

前回の記事で紹介したLit Web ComponentsでMarkdownをレンダーするの記事でLitでMarkdownをレンダーする方法を紹介しましたが、もう少し洗練したものをnpmパッケージとしてまとめて出した、というような感じです。

使い方

Viteでダミープロジェクトを作っていただきます。

yarn create vite

案内に従ってLit用のプロジェクトをセットアップしてもらってください。

次、lit-markdownをインストールします。

yarn add lit-markdown

すると、my-element.tsで以下のような使い方ができます。

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 })}</article>`;
  }
}

今回のパッケージはHTMLをサニタイズ化しているので、ユーザーからの入力をレンダーするのも問題ない、と言いたいところですが、くれぐれもユーザーからの入力のセキュリティ上のリスクをお考えください。

まとめ

以上、今回公開した小さなパッケージの紹介ですが、いかがでしょうか？

筆者は、なかなかオープンソース開発に踏み込めておらず、少しずつPRを出したり、こうしてパッケージを公開したりしていきたいと思っています。

lit-markdownをリリースしました！

使い方

まとめ