takumi-markdown
v1.1.0
Published
Beautiful Markdown renderer for React with Japanese typography optimization and ruby notation support
Maintainers
ischcaReadme
Takumi Markdown (匠)
Beautiful Markdown renderer for React, meticulously crafted for CJK (Chinese, Japanese, Korean) typography and readability.
Philosophy
Most markdown renderers focus on functionality. Takumi focuses on the reading experience. We optimize line heights, letter spacing, and font choices to create documents that feel professional and polished by default.
Features
- 🎨 Premium Typography - Optimized specifically for Japanese text (C-spacing, P-alt)
- 📝 Ruby Support - Render
｜text《ruby》syntax beautifully (web novel style) - 📋 Rich Frontmatter - Clean metadata display
- ✨ Modern Standards - GFM support, syntax highlighting, and responsive tables
Visual Experience
Left: Default rendering (standard typography, raw syntax)
Right: Takumi rendering (optimized spacing, rendered rubies, premium feel)
Installation
npm install takumi-markdownUsage
import { MarkdownRenderer } from 'takumi-markdown';
import 'takumi-markdown/styles.css';
function App() {
const markdown = `
# The Art of Text
Words should be beautiful.
｜Typography《タイポグラフィ》 matters.
`;
return <MarkdownRenderer content={markdown} />;
}SSR (Next.js)
Takumi is SSR-safe as long as you load the CSS globally (Next.js requires global CSS to be imported in its root files).
App Router
// app/layout.tsx
import 'takumi-markdown/styles.css';
export default function RootLayout({ children }) {
return (
<html lang="ja">
<body>{children}</body>
</html>
);
}Pages Router
// pages/_app.tsx
import 'takumi-markdown/styles.css';
export default function App({ Component, pageProps }) {
return <Component {...pageProps} />;
}Ruby Notation
Supports the standard Japanese web novel format:
| Syntax | Description | Result |
|--------|-------------|--------|
| ｜text《ruby》 | Explicit | text with ruby above |
| 漢字《かんじ》 | Auto-detect | 漢字 with かんじ above |
API
<MarkdownRenderer />
| Prop | Type | Description |
|------|------|-------------|
| content | string | Markdown content to render |
remarkRuby
Remark plugin for ruby notation. Exported for advanced users who want to use it with their own react-markdown setup.
import remarkRuby from 'takumi-markdown/remarkRuby';License
MIT