solid-markdown-wasm

CommonMark markdown renderer for solidjs using wasm

Features

• Compliant with CommonMark 0.31.2
• Syntax highlighting using syntect
• Huge support for languages and themes
• Easy to use

Example

You can visit live-preview.inve.rs to see the example folder deployed. It uses solid-monaco + tailwind + solidjs and this library to showcase what is possible.

Installation

npm install solid-markdown-wasm

Usage

import { type Component, createSignal } from "solid-js";
import { MarkdownRenderer } from "solid-markdown-wasm";

const App: Component = () => {
  const [markdown, setMarkdown] = createSignal<string>("# Hello, Markdown!");

  const handleInput = (
    event: InputEvent & { currentTarget: HTMLTextAreaElement }
  ) => {
    setMarkdown(event.currentTarget.value);
  };

  return (
    <div>
      <h1>Markdown Editor</h1>
      <textarea
        rows={10}
        cols={50}
        value={markdown()}
        onInput={handleInput}
        placeholder="Enter your markdown here..."
      />
      <h2>Preview:</h2>
      <MarkdownRenderer markdown={markdown()} theme="base16-ocean-dark" />
    </div>
  );
};

export default App;

Available Themes and supported Languages

For a list of available themes and languages, please refer to THEMES_AND_LANGS.md. Autocomplete is also supported via your IDE as the themes are exported as unions of string literals.

Internals

Internally, the renderer is implemented using the comrak library and then compiled down to webassembly using wasm-pack which is called by vite.

Security

Since this library uses comrak compiled to WebAssembly for Markdown rendering. By default, solid-markdown-wasm adheres to a safe-by-default approach, mirroring comrak's behavior of scrubbing raw HTML and potentially dangerous links.

Important

This library does not expose or utilize any "unsafe" options provided by comrak. Therefore, you can be assured that the rendered output will have potentially harmful HTML and links removed by the underlying comrak library

Reporting Security Vulnerabilities:

Caution

To report a security vulnerability, please do not open a public GitHub issue. Instead, please use the following method to contact the maintainers privately:

Email: Send an email to [email protected]. Please provide as much detail as possible about the potential vulnerability, including steps to reproduce it. We will acknowledge your report promptly and work to address the issue as quickly as possible.

Compiling From Source

You will need the following tools to compile from source

• Rust compiler
• wasm-pack
• NodeJS/Bun

Then run the following

npm run build

Contributing

For contributing to solid-markdown-wasm, please refer to the CONTRIBUTING.md file for guidelines on how to contribute to this project.

Support This Project

If you find solid-markdown-wasm useful and would like to support its development, you can consider making a donation on wise. Your contribution helps ensure continued maintenance and improvements.

Donate on Wise

Thank you for your support!

License

solid-markdown-wasm is released under the MIT License.

Contribution

Unless you explicitly state otherwise, any contribution intentionally submitted for inclusion in solid-markdown-wasm by you, shall be licensed as MIT, without any additional terms or conditions.