rsbuild-lit-markdown

Rsbuild plugin to import markdown files as lit-html template.

Usage

1. Install the plugin and its peer dependencies:

   npm i rsbuild-lit-markdown lit marked -D

2. Add the plugin to your rsbuild.config.ts:

   import { litMarkdown } from 'rsbuild-lit-markdown';
   
   export default {
     plugins: [litMarkdown()],
   };

3. Add types declaration to your types.d.ts:

   declare module '*.md' {
     import type { LitMarkdownFile } from 'rsbuild-lit-markdown';
     export default LitMarkdownFile;
   }

4. Import your markdown files:

   import { LitElement, html } from 'lit';
   import { customElement } from 'lit/decorators.js';
   import readme from './README.md';
   
   @customElement('example-readme')
   export class ReadmeElement extends LitElement {
     public override render() {
       return html`
         <div class="markdown">
           ${readme}
         </div>
       `;
     }
   }

Configuration

Marked options

You can pass options to the litMarkdown plugin. These options are passed directly to the marked library. List of available options can be found here.

import { litMarkdown } from 'rsbuild-lit-markdown';

export default {
  plugins: [
    litMarkdown({
      gfm: true,
      // ... other marked options
    }),
  ],
};

Custom file extension

You can also specify a custom file extension to match (do not forget to update your module declaration):

import { litMarkdown } from 'rsbuild-lit-markdown';

export default {
  plugins: [
    litMarkdown({
      selector: /\.mdx?$/,
    }),
  ],
};

Markdown extensions

You can add custom markdown extensions by providing an array of extensions to the extensions option:

import { litMarkdown } from 'rsbuild-lit-markdown';
import { markedHighlight } from "marked-highlight";
import hljs from 'highlight.js';

export default {
  plugins: [
    litMarkdown({
      extensions: [
        markedHighlight({
          langPrefix: 'hljs language-',
          highlight(code, lang) {
            const language = hljs.getLanguage(lang) ? lang : 'plaintext';
            return hljs.highlight(code, { language }).value;
          }
        })
      ]
    }),
  ],
};

License

This project is licensed under the MIT License.