<widget-markdown>

A Lit web component for rendering markdown with syntax highlighting and variable interpolation support.

Usage

Installation & Import

npm i @record-evolution/widget-markdown

<script type="module">
    import '@record-evolution/widget-markdown'
</script>

<widget-markdown-1.0.2 inputData="default-data"></widget-markdown-1.0.2>

Expected Data Format

The widget accepts an inputData object with the following structure:

{
    "markdown": "# Hello {{userName}}\n\nWelcome to the dashboard!",
    "data": [
        {
            "label": "userName",
            "value": "John Doe"
        }
    ]
}

Properties

• markdown (textarea): The markdown text to render. Supports variable interpolation using {{variableName}} syntax.
• data (array): List of variables to replace in the markdown text.
  • label (string): The variable name used in the markdown text (e.g., userName for {{userName}}).
  • value (string): The value that will replace the variable placeholder.

Features

• Markdown Rendering: Full CommonMark and GFM (GitHub Flavored Markdown) support via marked.
• Syntax Highlighting: Code blocks are automatically highlighted using highlight.js with support for:
  • Shell/Bash
  • Python
  • JavaScript/TypeScript
  • JSON
  • CSS
  • Plaintext
• Variable Interpolation: Dynamic content replacement using {{variableName}} placeholders.
• Theme Support: Respects platform theme colors for background and text.

Development

Keep the widget tag name in sync with the version in package.json. Update the version in demo/index.html accordingly (e.g., <widget-markdown-1.0.2>).

To develop the widget locally:

npm run start

This starts a development server at localhost:8000/demo/ serving demo/index.html.

Using Widget in Another Project

Install the widget in your project:

npm i @record-evolution/widget-markdown

Releasing a New Version

1. Commit all changes
2. Regenerate types from schema (if modified):

   npm run types

3. Release:

   npm run release

This automatically:

• Builds the widget
• Bumps the patch version
• Creates a git tag
• Pushes to GitHub

GitHub Actions will then publish the release to npm.

Platform Registration

After publishing, register the new version in IronFlock:

select swarm.f_update_widget_master('{"package_name": "widget-markdown", "version": "1.0.2"}'::jsonb);