ViewMarkdown

The ViewMarkdown component renders Markdown content by converting it to HTML. It uses the marked library to parse Markdown and DOMPurify to sanitize the output.

The component automatically sanitizes all HTML content before rendering, ensuring that only safe HTML elements and attributes are displayed.

Demo

React

Getting Started

Welcome to Markdown! This is a simple guide.

Features

• Easy to write
• Clean syntax
• Widely supported

Code Example

console.log('Hello, World!');

"Simplicity is the ultimate sophistication." — Leonardo da Vinci

Visit our docs for more info.

Vue

Getting Started

Welcome to Markdown! This is a simple guide.

Features

• Easy to write
• Clean syntax
• Widely supported

Code Example

console.log('Hello, World!');

"Simplicity is the ultimate sophistication." — Leonardo da Vinci

Visit our docs for more info.

Usage

React

import { ViewMarkdown } from '@fintech-sandpit/ui/react';

const markdownContent = `# Hello World

This is **Markdown** content with formatting support.

- Lists
- Code blocks
- Links and more
`;

return (
  <ViewMarkdown value={markdownContent} />
);

Vue

<script setup lang="ts">
import { ViewMarkdown } from '@fintech-sandpit/ui/vue';

const markdownContent = `# Hello World

This is **Markdown** content with formatting support.

- Lists
- Code blocks
- Links and more
`;
</script>

<template>
  <ViewMarkdown :value="markdownContent" />
</template>

Props

Name	Type	Description
content	string	The Markdown content string to render. Will be converted to HTML and sanitized using DOMPurify before display.