Q&A
実現したいこと
マークダウン記法で入力されたフォームを表示できるアプリケーションを作成しようとしています。
（イメージはまさにteratailであったり、Qiitaを思い浮かべていただければ良いです。）
# 困っていること
実装するマークダウンに関する機能としては
①入力フォームに投稿したい内容を打ち込むと、同時にマークダウンプレビューが表示される
②投稿したマークダウンは詳細ページで表示される
としたいのですが、①と②の見た目が同じようにならずに困っています。
具体的な状態
①の入力フォームとプレビュー画面はこんな感じです。
一応きちんと表示されています
これを保存し、詳細画面に遷移しようとすると、
とエラーが出てしまいます。
ソースコード
関係のあると思われる箇所を貼っていきます。不足があればご教授ください
ruby
1<%#articles/new.html.erb%> 2<div class="article-new-form"> 3 <%= form_with model: @article, url: articles_path, class: 'registration-main', local: true do |f| %> 4<%# 中略 %> 5 <div class="form-group-max"> 6 <div class="form-text-wrap"> 7 <%= f.label :detail, '本文', class:"form-text" %> 8 <span class="indispensable">必須</span> 9 </div> 10 <div id="detail" class="article-detail"> 11 <%= f.text_area :detail, placeholder: '本文を記入してください。', "v-model" => "text", class: "input-article-detail" %> 12 <div v-html='text | marked' class="review-article"></div> 13 </div> 14 </div> 15 <div class="register-btn"> 16 <%= f.submit "記事投稿", class: 'register-link' %> 17 </div> 18 </div> 19 <% end %> 20</div> 21<%= render "shared/footer"%> 22 23<script type="text/javascript"> 24 window.onload = function() { 25 new Vue({ 26 el: '#detail', 27 data: { 28 text: '<%== j @article.detail %>', 29 }, 30 filters: { 31 marked: marked, 32 }, 33 }); 34 }; 35</script>
ruby
1<%#application_helper.rb%> 2module ApplicationHelper 3 require 'redcarpet' 4 require 'coderay' 5 6 7 class HTMLwithCoderay < Redcarpet::Render::HTML 8 def block_code(code, language) 9 language = language.split(':')[0] 10 11 lang = case language.to_s 12 when 'rb' 13 'ruby' 14 when 'yml' 15 'yaml' 16 when 'css' 17 'css' 18 when 'html' 19 'html' 20 when '' 21 'md' 22 else 23 language 24 end 25 26 CodeRay.scan(code, lang).div 27 end 28 end 29 30 def markdown(text) 31 html_render = HTMLwithCoderay.new(filter_html: true, hard_wrap: true) 32 options = { 33 autolink: true, 34 space_after_headers: true, 35 no_intra_emphasis: true, 36 fenced_code_blocks: true, 37 tables: true, 38 hard_wrap: true, 39 xhtml: true, 40 lax_html_blocks: true, 41 strikethrough: true 42 } 43 markdown = Redcarpet::Markdown.new(html_render, options) 44 markdown.render(text) 45 end 46end 47
ruby
1<%# articles/show.html.erb %> 2<%# 関連する記述のみ抜粋 %> 3 <div class="article-main"> 4 <%= sanitize markdown(@article.detail), tags: %w(h1 h2 h3 h4 h5 strong em a p ul li code pre a), attributes: %w(href) %> 5 </div>
試したこと
エラーの内容からすると、"code```という idは存在しないよ"ということなので、3つのバッククォートで囲んでいるcodeの部分もコードブロックとして読みに行っていることになります。
そのためapplication_helper.rbのblock_codeの部分を消せば、エラーは出なくなるのですが、コードブロックとしてプレビューで表示されているものも表示されなくなってしまう弊害があります。
実際に使う場合にはプレビューと投稿後の表示が異なってしまっては意味がないと思いますので、両者を同じ見た目にする方法をご教授いただければ幸いです。
追記
プレビュー機能を実現するためにvue.jsとmarked.jsのCDNを読み込んでいます
ruby
1<!--application.html.erb--> 2<!DOCTYPE html> 3<html> 4 <head> 5 <title>App</title> 6 <%= csrf_meta_tags %> 7 <%= csp_meta_tag %> 8 9 <%= stylesheet_link_tag 'application', media: 'all' %> 10 <%= javascript_pack_tag 'application' %> 11 <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.10/vue.js'></script> 12 <script src='https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.js'></script> 13 14 <body> 15 <%= yield %> 16 </body> 17</html>
これによりarticles/new.html.erbのVue部分にて、入力フォームに値が入力されるたびにプレビューがマークダウン形式で更新される仕組みになっています。
※marked.jsでマークダウン記法でHTML形式に変換できるようになっています
環境
ruby:2.6.5
rails:6.0.0.3
gemファイル：redcarpet/coderay
回答1件
0
ベストアンサー
これ，入力が間違ってますよね？
Markdown で ```code``` がインラインのコードと解釈されるかは Markdown の処理系に依るのかもしれませんが，CommonMark 仕様では見つけられなかったので，100% 間違いと言い切れるかは自信がありませんが，インラインのコードとみなさない処理系があってもおかしくはないと思います。
なので，block_code メソッドで，language の値が正しい形式になっていなかったら何かしらケアしてあげる必要があると思います。
投稿2021/03/17 12:57
総合スコア2108
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/03/17 14:15
2021/03/18 03:28
2021/03/18 11:22
2021/03/18 12:04
2021/03/18 12:19
2021/03/18 12:44
2021/03/18 12:52