Markdown Viewer

Install it

Source

1"use client";
2 
3import * as React from "react";
4 
5import {
6  MarkdownGreenfieldContent,
7  type MarkdownViewerProps,
8} from "./markdown-greenfield-content";
9import type { ViewerResource } from "@/lib/viewer-resource";
10import { PlainTextViewerFrame } from "./plain-text-viewer-frame";
11import { TextViewerFallback } from "./text-viewer-chrome";
12import type { TextViewerHandle } from "./text-viewer-types";
13 
14export type { MarkdownViewerProps } from "./markdown-greenfield-content";
15export type {
16  TextDocumentSource,
17  TextLineRange,
18  TextViewerHandle,
19  TextViewerProps,
20} from "./text-viewer-types";
21 
22export type MarkdownResourceContentProps = Omit<
23  MarkdownViewerProps,
24  "source"
25> & {
26  resource: ViewerResource;
27};
28 
29export const MarkdownViewer = React.forwardRef<
30  TextViewerHandle,
31  MarkdownViewerProps
32>(function MarkdownViewer(props, ref) {
33  return (
34    <PlainTextViewerFrame
35      props={props}
36      forwardedRef={ref}
37      clientFallbackPolicy="non-inline-source"
38      Fallback={TextViewerFallback}
39      Content={MarkdownGreenfieldContent}
40    />
41  );
42});
43 
44export const MarkdownResourceContent = React.forwardRef<
45  TextViewerHandle,
46  MarkdownResourceContentProps
47>(function MarkdownResourceContent({ resource, ...props }, ref) {
48  return (
49    <PlainTextViewerFrame
50      props={props}
51      resource={resource}
52      forwardedRef={ref}
53      clientFallbackPolicy="non-inline-source"
54      Fallback={TextViewerFallback}
55      Content={MarkdownGreenfieldContent}
56    />
57  );
58});

What it pulls in

npm packages

• @chenglou/pretext
• hast-util-to-jsx-runtime
• katex
• lucide-react
• marked@18.0.5
• mermaid
• rehype-katex
• rehype-raw
• rehype-sanitize
• rehype-slug
• remark-breaks
• remark-directive
• remark-gemoji
• remark-gfm
• remark-math
• remark-parse
• remark-rehype
• remark-smartypants
• prismjs@^1.30.0
• unified
• vfile

Other registry items

• button
• dropdown-menu
• @retab/scroll-area
• @retab/skeleton
• @retab/spinner
• @retab/utils
• @retab/viewer-controls
• @retab/use-keyed-layout-effect
• @retab/use-mount-effect

Files it writes

• registry/new-york-v4/ui/markdown-viewer.tsx
• registry/new-york-v4/ui/plain-text-viewer-frame.tsx
• registry/new-york-v4/ui/text-viewer-chrome.tsx
• registry/new-york-v4/ui/text-code-viewer-chrome.tsx
• registry/new-york-v4/ui/viewer-download.tsx
• registry/new-york-v4/ui/viewer-error.tsx
• registry/new-york-v4/ui/text-viewer-layout.ts
• registry/new-york-v4/ui/text-viewer-ranges.ts
• registry/new-york-v4/ui/line-ranges.ts
• registry/new-york-v4/ui/text-viewer-resource.ts
• registry/new-york-v4/ui/plain-text-resource.ts
• registry/new-york-v4/ui/text-viewer-scale.ts
• registry/new-york-v4/ui/text-viewer-types.ts
• registry/new-york-v4/lib/viewer-source.ts
• registry/new-york-v4/lib/viewer-resource.ts
• registry/new-york-v4/lib/viewer-download-actions.ts
• registry/new-york-v4/lib/viewer-errors.ts
• registry/new-york-v4/ui/use-is-client.ts
• registry/new-york-v4/ui/markdown-greenfield-content.tsx
• registry/new-york-v4/ui/markdown-greenfield-code-highlight.tsx
• registry/new-york-v4/ui/markdown-greenfield-diagram.tsx
• registry/new-york-v4/ui/markdown-greenfield-document.ts
• registry/new-york-v4/ui/markdown-greenfield-document-store.ts
• registry/new-york-v4/ui/markdown-greenfield-document.worker.ts
• registry/new-york-v4/ui/markdown-greenfield-layout.ts
• registry/new-york-v4/ui/markdown-greenfield-renderer.tsx
• registry/new-york-v4/ui/markdown-greenfield-virtualizer.ts
• registry/new-york-v4/ui/markdown-hast-types.ts
• registry/new-york-v4/ui/markdown-source-map.ts
• registry/new-york-v4/ui/markdown-unified-pipeline.ts
• registry/new-york-v4/ui/markdown-url-policy.ts
• registry/new-york-v4/ui/text-viewer-virtualization.ts
• registry/new-york-v4/ui/text-viewer-scroll-interactions.ts
• registry/new-york-v4/ui/code-viewer-syntax-prism.ts
• registry/new-york-v4/ui/code-viewer-syntax-protocol.ts
• registry/new-york-v4/ui/markdown-greenfield-code-highlight-html.ts
• registry/new-york-v4/ui/markdown-greenfield-code-highlight-protocol.ts
• registry/new-york-v4/ui/markdown-greenfield-code-highlight.worker.ts
• registry/new-york-v4/ui/code-viewer-prism-components.d.ts
• registry/new-york-v4/ui/mermaid-renderer.ts