@gitton-dev/plugin-zenn-markdown 0.0.2
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/dist/renderer.js +181 -0
- package/package.json +82 -0
- package/ui/src/settings/index.html +168 -0
package/package.json
ADDED
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@gitton-dev/plugin-zenn-markdown",
|
|
3
|
+
"version": "0.0.2",
|
|
4
|
+
"description": "Zenn-style markdown rendering support for Gitton",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"gitton": {
|
|
7
|
+
"displayName": "Zenn Markdown",
|
|
8
|
+
"version": "0.0.1",
|
|
9
|
+
"description": "Render markdown with Zenn-style syntax (:::message, :::details, @[youtube], etc.)",
|
|
10
|
+
"author": "Gitton Team",
|
|
11
|
+
"permissions": [
|
|
12
|
+
"ui:settings"
|
|
13
|
+
],
|
|
14
|
+
"extensionPoints": {
|
|
15
|
+
"markdown": {
|
|
16
|
+
"name": "Zenn Markdown",
|
|
17
|
+
"filePatterns": [
|
|
18
|
+
"*.md",
|
|
19
|
+
"*.mdx"
|
|
20
|
+
],
|
|
21
|
+
"priority": 10,
|
|
22
|
+
"entry": "dist/renderer.js"
|
|
23
|
+
},
|
|
24
|
+
"settingsTab": {
|
|
25
|
+
"entry": "ui/src/settings/index.html",
|
|
26
|
+
"label": "Zenn Markdown"
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
},
|
|
30
|
+
"files": [
|
|
31
|
+
"dist",
|
|
32
|
+
"ui",
|
|
33
|
+
"package.json"
|
|
34
|
+
],
|
|
35
|
+
"keywords": [
|
|
36
|
+
"gitton",
|
|
37
|
+
"gitton-plugin",
|
|
38
|
+
"zenn",
|
|
39
|
+
"markdown"
|
|
40
|
+
],
|
|
41
|
+
"author": "godai",
|
|
42
|
+
"license": "MIT",
|
|
43
|
+
"repository": {
|
|
44
|
+
"type": "git",
|
|
45
|
+
"url": "git@github.com:gitton-dev/gitton-plugins.git",
|
|
46
|
+
"directory": "packages/plugin-zenn-markdown"
|
|
47
|
+
},
|
|
48
|
+
"bugs": {
|
|
49
|
+
"url": "https://github.com/gitton-dev/gitton-plugins/issues"
|
|
50
|
+
},
|
|
51
|
+
"homepage": "https://jsers.dev/service/gitton",
|
|
52
|
+
"devDependencies": {
|
|
53
|
+
"@types/react": "^18.3.18",
|
|
54
|
+
"@types/react-dom": "^18.3.5",
|
|
55
|
+
"@vitejs/plugin-react": "^4.3.4",
|
|
56
|
+
"autoprefixer": "^10.4.20",
|
|
57
|
+
"buffer": "^6.0.3",
|
|
58
|
+
"crypto-browserify": "^3.12.1",
|
|
59
|
+
"postcss": "^8.5.1",
|
|
60
|
+
"stream-browserify": "^3.0.0",
|
|
61
|
+
"tailwindcss": "^3.4.17",
|
|
62
|
+
"typescript": "^5.7.3",
|
|
63
|
+
"vite": "^6.0.11",
|
|
64
|
+
"vite-plugin-node-polyfills": "^0.25.0"
|
|
65
|
+
},
|
|
66
|
+
"dependencies": {
|
|
67
|
+
"class-variance-authority": "^0.7.1",
|
|
68
|
+
"clsx": "^2.1.1",
|
|
69
|
+
"lucide-react": "^0.469.0",
|
|
70
|
+
"react": "^18.3.1",
|
|
71
|
+
"react-dom": "^18.3.1",
|
|
72
|
+
"tailwind-merge": "^2.6.0",
|
|
73
|
+
"zenn-markdown-html": "^0.1.160"
|
|
74
|
+
},
|
|
75
|
+
"scripts": {
|
|
76
|
+
"dev": "vite",
|
|
77
|
+
"build": "vite build && vite build --config vite.renderer.config.ts",
|
|
78
|
+
"build:renderer": "vite build --config vite.renderer.config.ts",
|
|
79
|
+
"preview": "vite preview",
|
|
80
|
+
"clean": "rm -rf dist node_modules/.vite"
|
|
81
|
+
}
|
|
82
|
+
}
|
|
@@ -0,0 +1,168 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="ja">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Zenn Markdown Settings</title>
|
|
7
|
+
<style>
|
|
8
|
+
* {
|
|
9
|
+
box-sizing: border-box;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
body {
|
|
13
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
|
|
14
|
+
padding: 16px;
|
|
15
|
+
margin: 0;
|
|
16
|
+
background: transparent;
|
|
17
|
+
color: #1a1a1a;
|
|
18
|
+
font-size: 14px;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.dark body {
|
|
22
|
+
color: #e5e5e5;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
h2 {
|
|
26
|
+
font-size: 1.25rem;
|
|
27
|
+
font-weight: 600;
|
|
28
|
+
margin: 0 0 16px 0;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.setting {
|
|
32
|
+
margin-bottom: 16px;
|
|
33
|
+
display: flex;
|
|
34
|
+
align-items: center;
|
|
35
|
+
gap: 8px;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.setting label {
|
|
39
|
+
display: flex;
|
|
40
|
+
align-items: center;
|
|
41
|
+
gap: 8px;
|
|
42
|
+
cursor: pointer;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.setting input[type="checkbox"] {
|
|
46
|
+
width: 16px;
|
|
47
|
+
height: 16px;
|
|
48
|
+
cursor: pointer;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.description {
|
|
52
|
+
font-size: 0.75rem;
|
|
53
|
+
color: #666;
|
|
54
|
+
margin-left: 24px;
|
|
55
|
+
margin-top: 4px;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.dark .description {
|
|
59
|
+
color: #999;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.info {
|
|
63
|
+
margin-top: 24px;
|
|
64
|
+
padding: 12px;
|
|
65
|
+
background: rgba(59, 130, 246, 0.1);
|
|
66
|
+
border-radius: 6px;
|
|
67
|
+
font-size: 0.75rem;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.dark .info {
|
|
71
|
+
background: rgba(59, 130, 246, 0.15);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.info h3 {
|
|
75
|
+
font-size: 0.875rem;
|
|
76
|
+
font-weight: 600;
|
|
77
|
+
margin: 0 0 8px 0;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.info ul {
|
|
81
|
+
margin: 0;
|
|
82
|
+
padding-left: 20px;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.info li {
|
|
86
|
+
margin-bottom: 4px;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.info code {
|
|
90
|
+
background: rgba(0, 0, 0, 0.1);
|
|
91
|
+
padding: 1px 4px;
|
|
92
|
+
border-radius: 3px;
|
|
93
|
+
font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
|
|
94
|
+
font-size: 0.75rem;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.dark .info code {
|
|
98
|
+
background: rgba(255, 255, 255, 0.1);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.status {
|
|
102
|
+
margin-top: 16px;
|
|
103
|
+
padding: 8px 12px;
|
|
104
|
+
background: rgba(34, 197, 94, 0.1);
|
|
105
|
+
border-radius: 6px;
|
|
106
|
+
color: #16a34a;
|
|
107
|
+
font-size: 0.75rem;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.dark .status {
|
|
111
|
+
background: rgba(34, 197, 94, 0.15);
|
|
112
|
+
color: #4ade80;
|
|
113
|
+
}
|
|
114
|
+
</style>
|
|
115
|
+
</head>
|
|
116
|
+
<body>
|
|
117
|
+
<h2>Zenn Markdown</h2>
|
|
118
|
+
|
|
119
|
+
<div class="status">
|
|
120
|
+
Plugin is enabled. Markdown files will be rendered with Zenn-style syntax.
|
|
121
|
+
</div>
|
|
122
|
+
|
|
123
|
+
<div class="info">
|
|
124
|
+
<h3>Supported Syntax</h3>
|
|
125
|
+
<ul>
|
|
126
|
+
<li><code>:::message</code> - Message box</li>
|
|
127
|
+
<li><code>:::message alert</code> - Alert box (red)</li>
|
|
128
|
+
<li><code>:::details title</code> - Collapsible section</li>
|
|
129
|
+
<li><code>@[youtube](videoId)</code> - YouTube embed</li>
|
|
130
|
+
<li><code>@[tweet](url)</code> - Twitter/X embed</li>
|
|
131
|
+
<li><code>@[github](url)</code> - GitHub file embed</li>
|
|
132
|
+
<li><code>@[gist](url)</code> - GitHub Gist embed</li>
|
|
133
|
+
<li><code>@[card](url)</code> - Link card</li>
|
|
134
|
+
<li><code>@[slideshare](key)</code> - SlideShare embed</li>
|
|
135
|
+
<li><code>@[speakerdeck](key)</code> - Speaker Deck embed</li>
|
|
136
|
+
<li><code>@[codepen](url)</code> - CodePen embed</li>
|
|
137
|
+
<li><code>@[codesandbox](url)</code> - CodeSandbox embed</li>
|
|
138
|
+
<li><code>@[stackblitz](url)</code> - StackBlitz embed</li>
|
|
139
|
+
<li><code>@[figma](url)</code> - Figma embed</li>
|
|
140
|
+
<li><code>@[mermaid](code)</code> - Mermaid diagram</li>
|
|
141
|
+
<li><code>$formula$</code> - Inline math (KaTeX)</li>
|
|
142
|
+
<li><code>$$formula$$</code> - Block math (KaTeX)</li>
|
|
143
|
+
<li><code></code> - Image with size</li>
|
|
144
|
+
</ul>
|
|
145
|
+
</div>
|
|
146
|
+
|
|
147
|
+
<script>
|
|
148
|
+
// Wait for gitton SDK to be available
|
|
149
|
+
function init() {
|
|
150
|
+
if (!window.gitton) {
|
|
151
|
+
setTimeout(init, 100);
|
|
152
|
+
return;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
// Apply theme
|
|
156
|
+
window.addEventListener('gitton:contextchange', (e) => {
|
|
157
|
+
if (e.detail.theme === 'dark') {
|
|
158
|
+
document.documentElement.classList.add('dark');
|
|
159
|
+
} else {
|
|
160
|
+
document.documentElement.classList.remove('dark');
|
|
161
|
+
}
|
|
162
|
+
});
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
init();
|
|
166
|
+
</script>
|
|
167
|
+
</body>
|
|
168
|
+
</html>
|