Content

Renders MDX content client-side with syntax highlighting and all built-in components.

Usage#

import { Content } from "fromsrc/client";

export default function Page({ source }: { source: string }) {
  return <Content source={source} />;
}

Pass raw MDX content as a string. The component compiles and renders it client-side.

Import style#

For smallest bundles, prefer direct subpath imports when you only need specific utilities:

import { calcReadTime } from "fromsrc/readtime";
import { scoreSearch } from "fromsrc/searchscore";
import { createIndex } from "fromsrc/searchindex";
import { generateLlmsIndex } from "fromsrc/llms";

Use fromsrc/client for UI components like Content.

How it works#

Content uses @mdx-js/mdx to compile MDX at runtime. It includes:

• remark-gfm for GitHub Flavored Markdown
• Shiki syntax highlighting with github-dark-default theme
• Line highlighting, diff, and focus transformers
• All built-in fromsrc components

Built-in components#

The following components are available in MDX content without imports:

Prose styling#

Content applies prose styling to standard Markdown elements:

• Headings with anchor IDs (h2, h3)
• Paragraphs with muted text
• Links with underline on hover
• Lists with bullet points
• Inline code with background
• Code blocks with syntax highlighting
• Blockquotes with left border
• Tables with hover states

Loading state#

While compiling, Content shows a skeleton placeholder with animated pulse.

Props#