@pihanga2/markdown

Pihanga markdown viewer card — rich markdown with mermaid, math, and syntax highlighting

Part of the pihanga-shadcn card library.

Installation

npm install @pihanga2/markdown

Peer dependencies (already in your project if you use pihanga-shadcn):

npm install react react-dom @pihanga2/core

The following card-specific packages are installed automatically as dependencies:

• highlight.js
• mermaid
• react-markdown
• rehype-highlight
• rehype-katex
• remark-gfm
• remark-math
• unified
• tailwind-merge
• clsx
• class-variance-authority

Tailwind CSS

This package ships TypeScript source with Tailwind utility classes. Add it to your Tailwind content scan so the classes are included in your generated CSS.

Tailwind v4 (tailwind.css):

@source "../../node_modules/@pihanga2/markdown/dist-lib-markdown";

Tailwind v3 (tailwind.config.js):

module.exports = {
  content: ["./node_modules/@pihanga2/markdown/dist-lib-markdown/**/*.{js,jsx}"],
};

Usage

import "@pihanga2/markdown/cards/markdownViewer";

• Repository: https://github.com/ivcap-works/pihanga-shadcn
• shadcn registry: https://ivcap-works.github.io/pihanga-shadcn/r