質問編集履歴
1
プレビュー機能の説明
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -121,6 +121,31 @@
|
|
|
121
121
|
そのためapplication_helper.rbのblock_codeの部分を消せば、エラーは出なくなるのですが、コードブロックとしてプレビューで表示されているものも表示されなくなってしまう弊害があります。
|
|
122
122
|
実際に使う場合にはプレビューと投稿後の表示が異なってしまっては意味がないと思いますので、両者を同じ見た目にする方法をご教授いただければ幸いです。
|
|
123
123
|
|
|
124
|
+
# 追記
|
|
125
|
+
プレビュー機能を実現するためにvue.jsとmarked.jsのCDNを読み込んでいます
|
|
126
|
+
|
|
127
|
+
```ruby
|
|
128
|
+
<!--application.html.erb-->
|
|
129
|
+
<!DOCTYPE html>
|
|
130
|
+
<html>
|
|
131
|
+
<head>
|
|
132
|
+
<title>App</title>
|
|
133
|
+
<%= csrf_meta_tags %>
|
|
134
|
+
<%= csp_meta_tag %>
|
|
135
|
+
|
|
136
|
+
<%= stylesheet_link_tag 'application', media: 'all' %>
|
|
137
|
+
<%= javascript_pack_tag 'application' %>
|
|
138
|
+
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.10/vue.js'></script>
|
|
139
|
+
<script src='https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.js'></script>
|
|
140
|
+
|
|
141
|
+
<body>
|
|
142
|
+
<%= yield %>
|
|
143
|
+
</body>
|
|
144
|
+
</html>
|
|
145
|
+
```
|
|
146
|
+
これにより`articles/new.html.erb`のVue部分にて、入力フォームに値が入力されるたびにプレビューがマークダウン形式で更新される仕組みになっています。
|
|
147
|
+
※marked.jsでマークダウン記法でHTML形式に変換できるようになっています
|
|
148
|
+
|
|
124
149
|
# 環境
|
|
125
150
|
ruby:2.6.5
|
|
126
151
|
rails:6.0.0.3
|