ponkotsu-md-editor 0.2.7 → 0.2.9
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.
- checksums.yaml +4 -4
- data/README.md +92 -18
- data/app/assets/javascripts/markdown_editor.js +17 -0
- data/app/assets/stylesheets/markdown_editor.css +242 -2
- data/app/views/ponkotsu_md_editor/_editor.html.erb +3 -3
- data/app/views/ponkotsu_md_editor/_input_area.html.erb +1 -1
- data/app/views/ponkotsu_md_editor/_markdown_help_modal.html.erb +506 -0
- data/app/views/ponkotsu_md_editor/_preview_area.html.erb +1 -1
- data/app/views/ponkotsu_md_editor/_toolbar.html.erb +193 -46
- data/lib/ponkotsu/md/editor/helpers.rb +2 -1
- data/lib/ponkotsu/md/editor/version.rb +1 -1
- metadata +2 -1
|
@@ -0,0 +1,506 @@
|
|
|
1
|
+
<%
|
|
2
|
+
lang = locals[:options][:lang] || :en
|
|
3
|
+
%>
|
|
4
|
+
<!-- MarkdownヘルプPopover -->
|
|
5
|
+
<div id="markdownHelpPopover" popover class="ponkotsu-md-editor-popover-modal" style="display:none; position:fixed; z-index:1050; left:50%; top:10vh; transform:translateX(-50%); width:80vw; max-width:900px; background:#222; color:#fff; border-radius:8px; box-shadow:0 0 20px #000a;">
|
|
6
|
+
<div class="ponkotsu-md-editor-popover-header" style="display:flex; align-items:center; justify-content:space-between; padding:1rem; border-bottom:1px solid #444;">
|
|
7
|
+
<h5 class="ponkotsu-md-editor-popover-title ponkotsu-md-editor-high-contrast-text" style="margin:0;">
|
|
8
|
+
[book] <!-- アイコン -->
|
|
9
|
+
<% case lang
|
|
10
|
+
when :en then "Markdown Writing Guide"
|
|
11
|
+
when :ja then "Markdown書き方ガイド"
|
|
12
|
+
else "N/A"
|
|
13
|
+
end %>
|
|
14
|
+
</h5>
|
|
15
|
+
<button type="button" id="markdownHelpPopoverClose" class="ponkotsu-md-editor-btn-close" style="filter:invert(1); background:none; border:none; font-size:1.5rem;">×</button>
|
|
16
|
+
</div>
|
|
17
|
+
<div class="ponkotsu-md-editor-popover-body" style="padding:1.5rem; max-height:70vh; overflow-y:auto;">
|
|
18
|
+
<!-- タブナビゲーション -->
|
|
19
|
+
<ul class="ponkotsu-md-editor-nav ponkotsu-md-editor-nav-tabs ponkotsu-md-editor-nav-fill ponkotsu-md-editor-mb-4" id="markdownTabs" role="tablist">
|
|
20
|
+
<li class="ponkotsu-md-editor-nav-item" role="presentation">
|
|
21
|
+
<button class="ponkotsu-md-editor-nav-link active" id="basic-tab" data-bs-toggle="tab" data-bs-target="#basic" type="button" role="tab">
|
|
22
|
+
[type] <!-- アイコン -->
|
|
23
|
+
<% case lang
|
|
24
|
+
when :en then "Basic Syntax"
|
|
25
|
+
when :ja then "基本書式"
|
|
26
|
+
else "N/A"
|
|
27
|
+
end %>
|
|
28
|
+
</button>
|
|
29
|
+
</li>
|
|
30
|
+
<li class="ponkotsu-md-editor-nav-item" role="presentation">
|
|
31
|
+
<button class="ponkotsu-md-editor-nav-link" id="structure-tab" data-bs-toggle="tab" data-bs-target="#structure" type="button" role="tab">
|
|
32
|
+
[list-nested] <!-- アイコン -->
|
|
33
|
+
<% case lang
|
|
34
|
+
when :en then "Structural Elements"
|
|
35
|
+
when :ja then "構造要素"
|
|
36
|
+
else "N/A"
|
|
37
|
+
end %>
|
|
38
|
+
</button>
|
|
39
|
+
</li>
|
|
40
|
+
<li class="ponkotsu-md-editor-nav-item" role="presentation">
|
|
41
|
+
<button class="ponkotsu-md-editor-nav-link" id="advanced-tab" data-bs-toggle="tab" data-bs-target="#advanced" type="button" role="tab">
|
|
42
|
+
[gear] <!-- アイコン -->
|
|
43
|
+
<% case lang
|
|
44
|
+
when :en then "Advanced Features"
|
|
45
|
+
when :ja then "応用機能"
|
|
46
|
+
else "N/A"
|
|
47
|
+
end %>
|
|
48
|
+
</button>
|
|
49
|
+
</li>
|
|
50
|
+
</ul>
|
|
51
|
+
|
|
52
|
+
<!-- タブコンテンツ -->
|
|
53
|
+
<div class="ponkotsu-md-editor-tab-content" id="markdownTabContent">
|
|
54
|
+
|
|
55
|
+
<!-- 基本書式タブ -->
|
|
56
|
+
<div class="ponkotsu-md-editor-tab-pane fade show active" id="basic" role="tabpanel">
|
|
57
|
+
<div class="ponkotsu-md-editor-table-responsive">
|
|
58
|
+
<table class="ponkotsu-md-editor-table ponkotsu-md-editor-table-dark ponkotsu-md-editor-table-striped">
|
|
59
|
+
<thead>
|
|
60
|
+
<tr>
|
|
61
|
+
<th width="35%"><% case lang
|
|
62
|
+
when :en then "Writing"
|
|
63
|
+
when :ja then "書き方"
|
|
64
|
+
else "N/A"
|
|
65
|
+
end %></th>
|
|
66
|
+
<th width="35%"><% case lang
|
|
67
|
+
when :en then "Result"
|
|
68
|
+
when :ja then "結果"
|
|
69
|
+
else "N/A"
|
|
70
|
+
end %></th>
|
|
71
|
+
<th width="30%"><% case lang
|
|
72
|
+
when :en then "Description"
|
|
73
|
+
when :ja then "説明"
|
|
74
|
+
else "N/A"
|
|
75
|
+
end %></th>
|
|
76
|
+
</tr>
|
|
77
|
+
</thead>
|
|
78
|
+
<tbody>
|
|
79
|
+
<tr>
|
|
80
|
+
<td><code><% case lang
|
|
81
|
+
when :en then "# Heading 1"
|
|
82
|
+
when :ja then "# 見出し1"
|
|
83
|
+
else "N/A"
|
|
84
|
+
end %></code></td>
|
|
85
|
+
<td><h1 style="font-size: 1.4rem; margin: 0;"><% case lang
|
|
86
|
+
when :en then "Heading 1"
|
|
87
|
+
when :ja then "見出し1"
|
|
88
|
+
else "N/A"
|
|
89
|
+
end %></h1></td>
|
|
90
|
+
<td><% case lang
|
|
91
|
+
when :en then "Largest heading"
|
|
92
|
+
when :ja then "最大の見出し"
|
|
93
|
+
else "N/A"
|
|
94
|
+
end %></td>
|
|
95
|
+
</tr>
|
|
96
|
+
<tr>
|
|
97
|
+
<td><code><% case lang
|
|
98
|
+
when :en then "## Heading 2"
|
|
99
|
+
when :ja then "## 見出し2"
|
|
100
|
+
else "N/A"
|
|
101
|
+
end %></code></td>
|
|
102
|
+
<td><h2 style="font-size: 1.2rem; margin: 0;"><% case lang
|
|
103
|
+
when :en then "Heading 2"
|
|
104
|
+
when :ja then "見出し2"
|
|
105
|
+
else "N/A"
|
|
106
|
+
end %></h2></td>
|
|
107
|
+
<td><% case lang
|
|
108
|
+
when :en then "Second largest heading"
|
|
109
|
+
when :ja then "大見出し"
|
|
110
|
+
else "N/A"
|
|
111
|
+
end %></td>
|
|
112
|
+
</tr>
|
|
113
|
+
<tr>
|
|
114
|
+
<td><code><% case lang
|
|
115
|
+
when :en then "### Heading 3"
|
|
116
|
+
when :ja then "### 見出し3"
|
|
117
|
+
else "N/A"
|
|
118
|
+
end %></code></td>
|
|
119
|
+
<td><h3 style="font-size: 1.1rem; margin: 0;"><% case lang
|
|
120
|
+
when :en then "Heading 3"
|
|
121
|
+
when :ja then "見出し3"
|
|
122
|
+
else "N/A"
|
|
123
|
+
end %></h3></td>
|
|
124
|
+
<td><% case lang
|
|
125
|
+
when :en then "Third largest heading"
|
|
126
|
+
when :ja then "中見出し"
|
|
127
|
+
else "N/A"
|
|
128
|
+
end %></td>
|
|
129
|
+
</tr>
|
|
130
|
+
<tr>
|
|
131
|
+
<td><code><% case lang
|
|
132
|
+
when :en then "**Bold**"
|
|
133
|
+
when :ja then "**太字**"
|
|
134
|
+
else "N/A"
|
|
135
|
+
end %></code></td>
|
|
136
|
+
<td><strong><% case lang
|
|
137
|
+
when :en then "Bold"
|
|
138
|
+
when :ja then "太字"
|
|
139
|
+
else "N/A"
|
|
140
|
+
end %></strong></td>
|
|
141
|
+
<td><% case lang
|
|
142
|
+
when :en then "Emphasizes important text"
|
|
143
|
+
when :ja then "重要な箇所の強調"
|
|
144
|
+
else "N/A"
|
|
145
|
+
end %></td>
|
|
146
|
+
</tr>
|
|
147
|
+
<tr>
|
|
148
|
+
<td><code><% case lang
|
|
149
|
+
when :en then "*Italic*"
|
|
150
|
+
when :ja then "*斜体*"
|
|
151
|
+
else "N/A"
|
|
152
|
+
end %></code></td>
|
|
153
|
+
<td><em><% case lang
|
|
154
|
+
when :en then "Italic"
|
|
155
|
+
when :ja then "斜体"
|
|
156
|
+
else "N/A"
|
|
157
|
+
end %></em></td>
|
|
158
|
+
<td><% case lang
|
|
159
|
+
when :en then "Light emphasis"
|
|
160
|
+
when :ja then "軽い強調"
|
|
161
|
+
else "N/A"
|
|
162
|
+
end %></td>
|
|
163
|
+
</tr>
|
|
164
|
+
<tr>
|
|
165
|
+
<td><code><% case lang
|
|
166
|
+
when :en then "~~Strikethrough~~"
|
|
167
|
+
when :ja then "~~打ち消し~~"
|
|
168
|
+
else "N/A"
|
|
169
|
+
end %></code></td>
|
|
170
|
+
<td><s><% case lang
|
|
171
|
+
when :en then "Strikethrough"
|
|
172
|
+
when :ja then "打ち消し"
|
|
173
|
+
else "N/A"
|
|
174
|
+
end %></s></td>
|
|
175
|
+
<td><% case lang
|
|
176
|
+
when :en then "Strikethrough"
|
|
177
|
+
when :ja then "削除された内容"
|
|
178
|
+
else "N/A"
|
|
179
|
+
end %></td>
|
|
180
|
+
</tr>
|
|
181
|
+
<tr>
|
|
182
|
+
<td><code><% case lang
|
|
183
|
+
when :en then "`Inline Code`"
|
|
184
|
+
when :ja then "`インラインコード`"
|
|
185
|
+
else "N/A"
|
|
186
|
+
end %></code></td>
|
|
187
|
+
<td><code style="background: #6c757d; padding: 2px 6px; border-radius: 4px; color: white;"><% case lang
|
|
188
|
+
when :en then "Inline Code"
|
|
189
|
+
when :ja then "インラインコード"
|
|
190
|
+
else "N/A"
|
|
191
|
+
end %></code></td>
|
|
192
|
+
<td><% case lang
|
|
193
|
+
when :en then "Inline Code"
|
|
194
|
+
when :ja then "文中のコード"
|
|
195
|
+
else "N/A"
|
|
196
|
+
end %></td>
|
|
197
|
+
</tr>
|
|
198
|
+
</tbody>
|
|
199
|
+
</table>
|
|
200
|
+
</div>
|
|
201
|
+
</div>
|
|
202
|
+
|
|
203
|
+
<!-- 構造要素タブ -->
|
|
204
|
+
<div class="ponkotsu-md-editor-tab-pane fade" id="structure" role="tabpanel">
|
|
205
|
+
<div class="ponkotsu-md-editor-table-responsive">
|
|
206
|
+
<table class="ponkotsu-md-editor-table ponkotsu-md-editor-table-dark ponkotsu-md-editor-table-striped">
|
|
207
|
+
<thead>
|
|
208
|
+
<tr>
|
|
209
|
+
<th width="35%"><% case lang
|
|
210
|
+
when :en then "Writing"
|
|
211
|
+
when :ja then "書き方"
|
|
212
|
+
else "N/A"
|
|
213
|
+
end %></th>
|
|
214
|
+
<th width="35%"><% case lang
|
|
215
|
+
when :en then "Result"
|
|
216
|
+
when :ja then "結果"
|
|
217
|
+
else "N/A"
|
|
218
|
+
end %></th>
|
|
219
|
+
<th width="30%"><% case lang
|
|
220
|
+
when :en then "Description"
|
|
221
|
+
when :ja then "説明"
|
|
222
|
+
else "N/A"
|
|
223
|
+
end %></th>
|
|
224
|
+
</tr>
|
|
225
|
+
</thead>
|
|
226
|
+
<tbody>
|
|
227
|
+
<tr>
|
|
228
|
+
<td><code>- <% case lang
|
|
229
|
+
when :en then "List Item"
|
|
230
|
+
when :ja then "リスト項目"
|
|
231
|
+
else "N/A"
|
|
232
|
+
end %></code></td>
|
|
233
|
+
<td>
|
|
234
|
+
<ul style="margin: 0; padding-left: 1rem;">
|
|
235
|
+
<li><% case lang
|
|
236
|
+
when :en then "List Item"
|
|
237
|
+
when :ja then "リスト項目"
|
|
238
|
+
else "N/A"
|
|
239
|
+
end %></li>
|
|
240
|
+
</ul>
|
|
241
|
+
</td>
|
|
242
|
+
<td><% case lang
|
|
243
|
+
when :en then "Unordered List"
|
|
244
|
+
when :ja then "箇条書きリスト"
|
|
245
|
+
else "N/A"
|
|
246
|
+
end %></td>
|
|
247
|
+
</tr>
|
|
248
|
+
<tr>
|
|
249
|
+
<td><code>1. <% case lang
|
|
250
|
+
when :en then "Ordered Item"
|
|
251
|
+
when :ja then "番号付き項目"
|
|
252
|
+
else "N/A"
|
|
253
|
+
end %></code></td>
|
|
254
|
+
<td>
|
|
255
|
+
<ol style="margin: 0; padding-left: 1rem;">
|
|
256
|
+
<li><% case lang
|
|
257
|
+
when :en then "Ordered Item"
|
|
258
|
+
when :ja then "番号付き項目"
|
|
259
|
+
else "N/A"
|
|
260
|
+
end %></code></li>
|
|
261
|
+
</ol>
|
|
262
|
+
</td>
|
|
263
|
+
<td><% case lang
|
|
264
|
+
when :en then "Ordered List"
|
|
265
|
+
when :ja then "順序付きリスト"
|
|
266
|
+
else "N/A"
|
|
267
|
+
end %></code></td>
|
|
268
|
+
</tr>
|
|
269
|
+
<tr>
|
|
270
|
+
<td><code>- [ ] <% case lang
|
|
271
|
+
when :en then "Incomplete Task"
|
|
272
|
+
when :ja then "未完了タスク"
|
|
273
|
+
else "N/A"
|
|
274
|
+
end %></code></td>
|
|
275
|
+
<td>
|
|
276
|
+
<div style="margin: 0;">
|
|
277
|
+
<input type="checkbox" disabled> <% case lang
|
|
278
|
+
when :en then "Incomplete Task"
|
|
279
|
+
when :ja then "未完了タスク"
|
|
280
|
+
else "N/A"
|
|
281
|
+
end %>
|
|
282
|
+
</div>
|
|
283
|
+
</td>
|
|
284
|
+
<td><% case lang
|
|
285
|
+
when :en then "Checkbox"
|
|
286
|
+
when :ja then "チェックボックス"
|
|
287
|
+
else "N/A"
|
|
288
|
+
end %></td>
|
|
289
|
+
</tr>
|
|
290
|
+
<tr>
|
|
291
|
+
<td><code>- [x] <% case lang
|
|
292
|
+
when :en then "Completed Task"
|
|
293
|
+
when :ja then "完了済みタスク"
|
|
294
|
+
else "N/A"
|
|
295
|
+
end %></code></td>
|
|
296
|
+
<td>
|
|
297
|
+
<div style="margin: 0;">
|
|
298
|
+
<input type="checkbox" checked disabled> <span style="text-decoration: line-through; color: #6c757d;"><% case lang
|
|
299
|
+
when :en then "Completed Task"
|
|
300
|
+
when :ja then "完了済みタスク"
|
|
301
|
+
else "N/A"
|
|
302
|
+
end %></span>
|
|
303
|
+
</div>
|
|
304
|
+
</td>
|
|
305
|
+
<td><% case lang
|
|
306
|
+
when :en then "Completed Task"
|
|
307
|
+
when :ja then "完了タスク"
|
|
308
|
+
else "N/A"
|
|
309
|
+
end %></td>
|
|
310
|
+
</tr>
|
|
311
|
+
<tr>
|
|
312
|
+
<td><code>> <% case lang
|
|
313
|
+
when :en then "Quote"
|
|
314
|
+
when :ja then "引用文"
|
|
315
|
+
else "N/A"
|
|
316
|
+
end %></code></td>
|
|
317
|
+
<td>
|
|
318
|
+
<blockquote style="border-left: 4px solid #0dcaf0; padding-left: 1rem; margin: 0; color: #adb5bd;">
|
|
319
|
+
<% case lang
|
|
320
|
+
when :en then "Quote"
|
|
321
|
+
when :ja then "引用文"
|
|
322
|
+
else "N/A"
|
|
323
|
+
end %>
|
|
324
|
+
</blockquote>
|
|
325
|
+
</td>
|
|
326
|
+
<td><% case lang
|
|
327
|
+
when :en then "Blockquote"
|
|
328
|
+
when :ja then "引用ブロック"
|
|
329
|
+
else "N/A"
|
|
330
|
+
end %></td>
|
|
331
|
+
</tr>
|
|
332
|
+
<tr>
|
|
333
|
+
<td><code>---</code></td>
|
|
334
|
+
<td><hr style="border: 1px solid #6c757d; margin: 0.5rem 0;"></td>
|
|
335
|
+
<td><% case lang
|
|
336
|
+
when :en then "Horizontal Rule"
|
|
337
|
+
when :ja then "水平線"
|
|
338
|
+
else "N/A"
|
|
339
|
+
end %></td>
|
|
340
|
+
</tr>
|
|
341
|
+
</tbody>
|
|
342
|
+
</table>
|
|
343
|
+
</div>
|
|
344
|
+
</div>
|
|
345
|
+
|
|
346
|
+
<!-- 応用機能タブ -->
|
|
347
|
+
<div class="ponkotsu-md-editor-tab-pane fade" id="advanced" role="tabpanel">
|
|
348
|
+
<div class="ponkotsu-md-editor-table-responsive">
|
|
349
|
+
<table class="ponkotsu-md-editor-table ponkotsu-md-editor-table-dark ponkotsu-md-editor-table-striped">
|
|
350
|
+
<thead>
|
|
351
|
+
<tr>
|
|
352
|
+
<th width="35%"><% case lang
|
|
353
|
+
when :en then "Writing"
|
|
354
|
+
when :ja then "書き方"
|
|
355
|
+
else "N/A"
|
|
356
|
+
end %></th>
|
|
357
|
+
<th width="35%"><% case lang
|
|
358
|
+
when :en then "Result"
|
|
359
|
+
when :ja then "結果"
|
|
360
|
+
else "N/A"
|
|
361
|
+
end %></th>
|
|
362
|
+
<th width="30%"><% case lang
|
|
363
|
+
when :en then "Description"
|
|
364
|
+
when :ja then "説明"
|
|
365
|
+
else "N/A"
|
|
366
|
+
end %></th>
|
|
367
|
+
</tr>
|
|
368
|
+
</thead>
|
|
369
|
+
<tbody>
|
|
370
|
+
<tr>
|
|
371
|
+
<td><code>[<% case lang
|
|
372
|
+
when :en then "Link"
|
|
373
|
+
when :ja then "リンク"
|
|
374
|
+
else "N/A"
|
|
375
|
+
end %>](https://example.com)</code></td>
|
|
376
|
+
<td><a href="#" style="color: var(--accent-pink); text-decoration: none;"><% case lang
|
|
377
|
+
when :en then "Link"
|
|
378
|
+
when :ja then "リンク"
|
|
379
|
+
else "N/A"
|
|
380
|
+
end %></a></td>
|
|
381
|
+
<td><% case lang
|
|
382
|
+
when :en then "External Link"
|
|
383
|
+
when :ja then "外部リンク"
|
|
384
|
+
else "N/A"
|
|
385
|
+
end %></td>
|
|
386
|
+
</tr>
|
|
387
|
+
<tr>
|
|
388
|
+
<td><code><% case lang
|
|
389
|
+
when :en then ""
|
|
390
|
+
when :ja then ""
|
|
391
|
+
else "N/A"
|
|
392
|
+
end %></code></td>
|
|
393
|
+
<td>
|
|
394
|
+
<div style="background: #6c757d; padding: 1rem; border-radius: 4px; text-align: center; color: white; font-size: 0.9rem;">
|
|
395
|
+
[image] <!-- アイコン --> <% case lang
|
|
396
|
+
when :en then "Image"
|
|
397
|
+
when :ja then "画像"
|
|
398
|
+
else "N/A"
|
|
399
|
+
end %>
|
|
400
|
+
</div>
|
|
401
|
+
</td>
|
|
402
|
+
<td><% case lang
|
|
403
|
+
when :en then "Image"
|
|
404
|
+
when :ja then "画像の挿入"
|
|
405
|
+
else "N/A"
|
|
406
|
+
end %></td>
|
|
407
|
+
</tr>
|
|
408
|
+
<tr>
|
|
409
|
+
<td style="font-size: 0.85rem;">
|
|
410
|
+
<code>```<br><% case lang
|
|
411
|
+
when :en then "Code Block"
|
|
412
|
+
when :ja then "コードブロック"
|
|
413
|
+
else "N/A"
|
|
414
|
+
end %><br>function hello() {<br> return 'Hello';<br>}<br>```</code>
|
|
415
|
+
</td>
|
|
416
|
+
<td>
|
|
417
|
+
<pre style="background: #2d3748; color: #e2e8f0; padding: 0.75rem; border-radius: 4px; margin: 0; font-size: 0.85rem;"><% case lang
|
|
418
|
+
when :en then "Code Block"
|
|
419
|
+
when :ja then "コードブロック"
|
|
420
|
+
else "N/A"
|
|
421
|
+
end %>
|
|
422
|
+
function hello() {
|
|
423
|
+
return 'Hello';
|
|
424
|
+
}</pre>
|
|
425
|
+
</td>
|
|
426
|
+
<td><% case lang
|
|
427
|
+
when :en then "Multiple Line Code"
|
|
428
|
+
when :ja then "複数行コード"
|
|
429
|
+
else "N/A"
|
|
430
|
+
end %></td>
|
|
431
|
+
</tr>
|
|
432
|
+
<tr>
|
|
433
|
+
<td style="font-size: 0.8rem;">
|
|
434
|
+
<code><% case lang
|
|
435
|
+
when :en then "| Col 1 | Col 2 | Col 3 |<br>|-----|-----|-----|<br>| A | B | C |"
|
|
436
|
+
when :ja then "| 列1 | 列2 | 列3 |<br>|-----|-----|-----|<br>| A | B | C |"
|
|
437
|
+
else "N/A"
|
|
438
|
+
end %></code>
|
|
439
|
+
</td>
|
|
440
|
+
<td>
|
|
441
|
+
<table class="ponkotsu-md-editor-table ponkotsu-md-editor-table-sm ponkotsu-md-editor-table-bordered" style="margin: 0; font-size: 0.85rem;">
|
|
442
|
+
<% case lang %>
|
|
443
|
+
<% when :en %>
|
|
444
|
+
<thead>
|
|
445
|
+
<tr style="background: #495057;">
|
|
446
|
+
<th>Row 1</th>
|
|
447
|
+
<th>Row 2</th>
|
|
448
|
+
<th>Row 3</th>
|
|
449
|
+
</tr>
|
|
450
|
+
</thead>
|
|
451
|
+
<tbody>
|
|
452
|
+
<tr>
|
|
453
|
+
<td>A</td>
|
|
454
|
+
<td>B</td>
|
|
455
|
+
<td>C</td>
|
|
456
|
+
</tr>
|
|
457
|
+
</tbody>
|
|
458
|
+
<% when :ja %>
|
|
459
|
+
<thead>
|
|
460
|
+
<tr style="background: #495057;">
|
|
461
|
+
<th>列1</th>
|
|
462
|
+
<th>列2</th>
|
|
463
|
+
<th>列3</th>
|
|
464
|
+
</tr>
|
|
465
|
+
</thead>
|
|
466
|
+
<tbody>
|
|
467
|
+
<tr>
|
|
468
|
+
<td>A</td>
|
|
469
|
+
<td>B</td>
|
|
470
|
+
<td>C</td>
|
|
471
|
+
</tr>
|
|
472
|
+
</tbody>
|
|
473
|
+
<% end %>
|
|
474
|
+
</table>
|
|
475
|
+
</td>
|
|
476
|
+
<td><% case lang
|
|
477
|
+
when :en then "Table"
|
|
478
|
+
when :ja then "テーブル（表）"
|
|
479
|
+
else "N/A"
|
|
480
|
+
end %></td>
|
|
481
|
+
</tr>
|
|
482
|
+
</tbody>
|
|
483
|
+
</table>
|
|
484
|
+
</div>
|
|
485
|
+
</div>
|
|
486
|
+
</div>
|
|
487
|
+
|
|
488
|
+
<!-- フッター：ツールバー案内 -->
|
|
489
|
+
<div class="ponkotsu-md-editor-alert ponkotsu-md-editor-alert-info ponkotsu-md-editor-mt-4" role="alert">
|
|
490
|
+
[lightbulb] <!-- アイコン -->
|
|
491
|
+
<strong><% case lang
|
|
492
|
+
when :en then "Useful Features:"
|
|
493
|
+
when :ja then "便利機能："
|
|
494
|
+
else "N/A"
|
|
495
|
+
end %></strong>
|
|
496
|
+
<% case lang %>
|
|
497
|
+
<% when :en %>
|
|
498
|
+
Clicking the toolbar buttons above allows you to easily insert these Markdown syntaxes.
|
|
499
|
+
The code button [code] <!-- アイコン --> automatically determines whether to insert inline code or a code block based on the selected text.
|
|
500
|
+
<% when :ja %>
|
|
501
|
+
上部のツールバーボタンをクリックすると、これらのMarkdown記法を簡単に挿入できます。
|
|
502
|
+
コードボタン [code] <!-- アイコン --> は選択範囲に応じてインラインコードまたはコードブロックを自動判定します。
|
|
503
|
+
<% end %>
|
|
504
|
+
</div>
|
|
505
|
+
</div>
|
|
506
|
+
</div>
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
<div class="markdown-preview" id="markdownPreview"
|
|
1
|
+
<div class="ponkotsu-md-editor-markdown-preview" id="markdownPreview"
|
|
2
2
|
style="display: none; min-height: 500px; padding: 1rem; background-color: var(--preview-bg); border: 1px solid var(--border-color); border-radius: 0.375rem; color: var(--text-primary);">
|
|
3
3
|
</div>
|