takumi-markdown 1.0.0 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +63 -14
- package/dist/components/MarkdownRenderer.d.ts +0 -2
- package/dist/takumi-markdown.cjs +28 -28
- package/dist/takumi-markdown.css +360 -1
- package/dist/takumi-markdown.mjs +6446 -4312
- package/package.json +12 -4
- package/dist/takumi-markdown.cjs.map +0 -1
- package/dist/takumi-markdown.mjs.map +0 -1
- package/dist/vite.svg +0 -1
package/README.md
CHANGED
|
@@ -1,14 +1,33 @@
|
|
|
1
1
|
# Takumi Markdown (匠)
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[](https://www.npmjs.com/package/takumi-markdown)
|
|
4
|
+
[](https://www.npmjs.com/package/takumi-markdown)
|
|
5
|
+
[](https://opensource.org/licenses/MIT)
|
|
6
|
+
|
|
7
|
+
**[🚀 Live Demo](https://ischca.github.io/takumi-markdown/)** | **[📦 npm](https://www.npmjs.com/package/takumi-markdown)**
|
|
8
|
+
|
|
9
|
+
Beautiful Markdown renderer for React, meticulously crafted for CJK (Chinese, Japanese, Korean) typography and readability.
|
|
10
|
+
|
|
11
|
+
<img src="./assets/preview.png" alt="Takumi Markdown Preview" width="600" />
|
|
12
|
+
|
|
13
|
+
## Philosophy
|
|
14
|
+
|
|
15
|
+
Most markdown renderers focus on functionality. Takumi focuses on the **reading experience**.
|
|
16
|
+
We optimize line heights, letter spacing, and font choices to create documents that feel professional and polished by default.
|
|
4
17
|
|
|
5
18
|
## Features
|
|
6
19
|
|
|
7
|
-
- 🎨 **
|
|
8
|
-
- 📝 **Ruby
|
|
9
|
-
- 📋 **Frontmatter** -
|
|
10
|
-
- ✨ **
|
|
11
|
-
|
|
20
|
+
- 🎨 **Premium Typography** - Optimized specifically for Japanese text (C-spacing, P-alt)
|
|
21
|
+
- 📝 **Ruby Support** - Render `｜text《ruby》` syntax beautifully (web novel style)
|
|
22
|
+
- 📋 **Rich Frontmatter** - Clean metadata display
|
|
23
|
+
- ✨ **Modern Standards** - GFM support, syntax highlighting, and responsive tables
|
|
24
|
+
|
|
25
|
+
## Visual Experience
|
|
26
|
+
|
|
27
|
+
<img src="./assets/comparison.png" alt="Visual Comparison" width="700" />
|
|
28
|
+
|
|
29
|
+
> **Left**: Default rendering (standard typography, raw syntax)
|
|
30
|
+
> **Right**: Takumi rendering (optimized spacing, rendered rubies, premium feel)
|
|
12
31
|
|
|
13
32
|
## Installation
|
|
14
33
|
|
|
@@ -24,25 +43,55 @@ import 'takumi-markdown/styles.css';
|
|
|
24
43
|
|
|
25
44
|
function App() {
|
|
26
45
|
const markdown = `
|
|
27
|
-
#
|
|
46
|
+
# The Art of Text
|
|
28
47
|
|
|
29
|
-
|
|
48
|
+
Words should be beautiful.
|
|
30
49
|
|
|
31
|
-
|
|
50
|
+
｜Typography《タイポグラフィ》 matters.
|
|
32
51
|
`;
|
|
33
52
|
|
|
34
53
|
return <MarkdownRenderer content={markdown} />;
|
|
35
54
|
}
|
|
36
55
|
```
|
|
37
56
|
|
|
57
|
+
## SSR (Next.js)
|
|
58
|
+
|
|
59
|
+
Takumi is SSR-safe as long as you load the CSS globally (Next.js requires global CSS to be imported in its root files).
|
|
60
|
+
|
|
61
|
+
**App Router**
|
|
62
|
+
|
|
63
|
+
```tsx
|
|
64
|
+
// app/layout.tsx
|
|
65
|
+
import 'takumi-markdown/styles.css';
|
|
66
|
+
|
|
67
|
+
export default function RootLayout({ children }) {
|
|
68
|
+
return (
|
|
69
|
+
<html lang="ja">
|
|
70
|
+
<body>{children}</body>
|
|
71
|
+
</html>
|
|
72
|
+
);
|
|
73
|
+
}
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
**Pages Router**
|
|
77
|
+
|
|
78
|
+
```tsx
|
|
79
|
+
// pages/_app.tsx
|
|
80
|
+
import 'takumi-markdown/styles.css';
|
|
81
|
+
|
|
82
|
+
export default function App({ Component, pageProps }) {
|
|
83
|
+
return <Component {...pageProps} />;
|
|
84
|
+
}
|
|
85
|
+
```
|
|
86
|
+
|
|
38
87
|
## Ruby Notation
|
|
39
88
|
|
|
40
|
-
Supports
|
|
89
|
+
Supports the standard Japanese web novel format:
|
|
41
90
|
|
|
42
|
-
| Syntax | Result |
|
|
43
|
-
|
|
44
|
-
|
|
|
45
|
-
| `漢字《かんじ》` |
|
|
91
|
+
| Syntax | Description | Result |
|
|
92
|
+
|--------|-------------|--------|
|
|
93
|
+
| `｜text《ruby》` | Explicit | text with ruby above |
|
|
94
|
+
| `漢字《かんじ》` | Auto-detect | 漢字 with かんじ above |
|
|
46
95
|
|
|
47
96
|
## API
|
|
48
97
|
|