質問編集履歴
1
プレビュー機能の説明
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -244,6 +244,56 @@
|
|
|
244
244
|
|
|
245
245
|
|
|
246
246
|
|
|
247
|
+
# 追記
|
|
248
|
+
|
|
249
|
+
プレビュー機能を実現するためにvue.jsとmarked.jsのCDNを読み込んでいます
|
|
250
|
+
|
|
251
|
+
|
|
252
|
+
|
|
253
|
+
```ruby
|
|
254
|
+
|
|
255
|
+
<!--application.html.erb-->
|
|
256
|
+
|
|
257
|
+
<!DOCTYPE html>
|
|
258
|
+
|
|
259
|
+
<html>
|
|
260
|
+
|
|
261
|
+
<head>
|
|
262
|
+
|
|
263
|
+
<title>App</title>
|
|
264
|
+
|
|
265
|
+
<%= csrf_meta_tags %>
|
|
266
|
+
|
|
267
|
+
<%= csp_meta_tag %>
|
|
268
|
+
|
|
269
|
+
|
|
270
|
+
|
|
271
|
+
<%= stylesheet_link_tag 'application', media: 'all' %>
|
|
272
|
+
|
|
273
|
+
<%= javascript_pack_tag 'application' %>
|
|
274
|
+
|
|
275
|
+
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.10/vue.js'></script>
|
|
276
|
+
|
|
277
|
+
<script src='https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.js'></script>
|
|
278
|
+
|
|
279
|
+
|
|
280
|
+
|
|
281
|
+
<body>
|
|
282
|
+
|
|
283
|
+
<%= yield %>
|
|
284
|
+
|
|
285
|
+
</body>
|
|
286
|
+
|
|
287
|
+
</html>
|
|
288
|
+
|
|
289
|
+
```
|
|
290
|
+
|
|
291
|
+
これにより`articles/new.html.erb`のVue部分にて、入力フォームに値が入力されるたびにプレビューがマークダウン形式で更新される仕組みになっています。
|
|
292
|
+
|
|
293
|
+
※marked.jsでマークダウン記法でHTML形式に変換できるようになっています
|
|
294
|
+
|
|
295
|
+
|
|
296
|
+
|
|
247
297
|
# 環境
|
|
248
298
|
|
|
249
299
|
ruby:2.6.5
|