https://github.com/andi23rosca/solid-markdown

Render Markdown as Solid components
https://github.com/andi23rosca/solid-markdown

markdown rehype remark solid solid-js unified

Last synced: 6 days ago
JSON representation

Render Markdown as Solid components

• Host: GitHub
• URL: https://github.com/andi23rosca/solid-markdown
• Owner: andi23rosca
• License: mit
• Created: 2021-10-10T19:51:27.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2024-06-03T13:14:08.000Z (5 months ago)
• Last Synced: 2024-10-18T15:30:22.258Z (21 days ago)
• Topics: markdown, rehype, remark, solid, solid-js, unified
• Language: TypeScript
• Homepage:
• Size: 604 KB
• Stars: 108
• Watchers: 3
• Forks: 11
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: license

Awesome Lists containing this project

• awesome-solid-js - Solid Markdown - Render Markdown as Solid components (📦 Components & Libraries / UI Components)

README

        


  



# `solid-markdown`

Render markdown as solid components.

The implementation is 90% shamelessly copied from https://github.com/remarkjs/react-markdown.

Changes include:

- Replacing React specific component creation with SolidJS components

- Porting the implementation from javascript with JSDoc types to typescript

Please check the original repo for in-depth details on how to use.

## Installation

```bash

npm install solid-markdown

```

## Usage

```jsx

import { SolidMarkdown } from "solid-markdown";

const markdown = `

# This is a title

- here's

- a

- list

`;

const App = () => {

  return ;

};

```

## Rendering strategy

There's an extra option you can pass to the markdown component: `renderingStrategy: "memo" | "reconcile"`.

The default value is `"memo"`, which means that the markdown parser will generate a new full AST tree each time (inside a `useMemo`), and use that.

As a consequence, the full DOM will be re-rendered, even the markdown nodes that haven't changed. (Should be fine 90% of the time).

Using `reconcile` will switch the strategy to using a solid store with the `reconcile` function (https://docs.solidjs.com/reference/store-utilities/reconcile). This will diff the previous and next markdown ASTs and only trigger re-renders for the parts that have changed.

This will help with cases like streaming partial content and updating the markdown gradually (see https://github.com/andi23rosca/solid-markdown/issues/32).

```tsx

;

```

## TODO

- [ ] Port unit tests from from original library