marked.jsを使ったマークダウンプレビューが適切に反映されない

前提・実現したいこと

marked.jsを使用してRuby on Railsにマークダウンプレビューを
実装したのですが、H1などで指定した文字が普通の文字の状態でプレビューに反映されてしまいます。どのようにしたら指定したタグ通りに反映されるでしょうか。ご教示願います。

該当のソースコード

_form.html.erb

<%= form_for(@article, url: yield(:url)) do |f| %>

  <div class="field">
    <div id="editor">
      <textarea name="article[content]" class="control" rows="20" v-model='input' debounce='50'></textarea>
      <div v-html='input | marked'></div>
    </div>
  </div>

    <%= f.submit yield(:button_text), class: "button is-link" %>
<% end %>


<script type="text/javascript">
  window.onload = function() {
    new Vue({
      el: '#editor',
      data: {
        input: '<%== j @article.content %>',
      },
      filters: {
        marked: marked,
      },
    });
  };
</script>

application.html.erb

<script src='https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.10/vue.js'></script>

試したこと

他にもunpkg.com/markedを使用して試したりしましたがプレビュー自体は表示されて指定したタグを囲わないで表示されてしまいます。

補足情報（FW/ツールのバージョンなど）

Ruby on Rails 5.2
marked.js 0.3.5
vue.js 1.0.10

markdownに使ってるもの
redcarpet
rouge

行動規範の内容に同意します

回答1件

ベストアンサー

input: '<%== j @article.content %>',を

input: '#{j @article.content}',
に書き換えてみるのはどうでしょうか。

投稿2018/10/14 12:26

troch

総合スコア349

退会済みユーザー

2018/10/14 12:52

書き換えてみましたが、タグを指定したときに正しく出力されませんでした。後、入力フォームに '#{j @article.content}'が入力されている状態になります。

troch

2018/10/14 13:06

あら…失礼しました；私が質問文をちゃんと飲み込めていないかもしれないのですが、タグを指定した時に正しく出力されない、というのはマークダウン記法で入力しても、それがプレビュー画面に反映されず、ただの文字列として出力されてしまう、という趣旨でしょうか？例えば```hoge```と書けばコードブロックで表示されるはずなのにも関わらず、単に`込みの文字列として表示される（リアルタイムプレビューは可能だけれどマークダウン記法に変換ができない）、というような…

退会済みユーザー

2018/10/14 13:13

こちらこそわかりにくい質問の仕方で申し訳ございません。はい、プレビューのマークダウン記法に変換がうまくいかない状態です。

troch

2018/10/14 13:23

あ、いえ。とんでもないです。一つ試してみて欲しいのですが、 bodyタグを以下のように書き換えてみてください。 <body data-turbolinks="false"> おそらくapplication.html.erbファイルにbodyタグがあると思うのですが、 Turbolinksを無効化してみてもマークダウン記法にならないでしょうか？

troch

2018/10/14 13:28

ところでwakuwaku11さんが今作ってるWebアプリですけれど、 scaffoldで自動生成したものではないですよね。 CSSの設定とかもご自分でされているのでしょうか？

退会済みユーザー

2018/10/14 13:33

はい試して見たのですが、だめでした。 application.jsの方からも//= require turbolinksを削除して試しましたがこちらもだめでした。

troch

2018/10/14 13:38

だめですか…。では app/assets/stylesheets/application.css に pre { background-color: #eee; padding: 10px; font-size: 11px; } を追記してみてください。そして入力フォームでは ```hoge``` と入力してみてください。つまりマークダウン記法におけるコードブロック用のCSSを追加してみたらどうでしょうか。

troch

2018/10/14 13:40

あ、ひょっとしてブラウザの機能でタグで囲まれていないことは確認済みでなのしょうか？

退会済みユーザー

2018/10/14 13:58

cssを追加したら、コードブロックが反映されるようになりました！他のタグに関しても同様にCSSで用意することで反映されるのでしょうか？

troch

2018/10/15 02:23

↑うまくいって良かったです！ . >>他のタグに関しても同様にCSSで用意することで反映されるのでしょうか？はい、ものによってはwakuwaku11さん側で別途、CSSを用意しなければならないと思います。 marked.jsは、渡されたマークダウン形式のテキストを解析して、 HTMLドキュメントに変換（タグで囲ったりIDつけたり）してくれるものですので、 HTMLに対応するCSSが設定されていない部分については装飾がされず… それでも見出しを付けてみたり、太字にしたり、横線引いたり等、HTMLで定義されているものについてはうまく表示してくれるとは思うのですが；以下を入力フォームに書いてもうまく変換されないでしょうか？ # 見出し **太字** ↓水平線 ***

troch

2018/10/15 02:27

あとは、wakuwaku11さん側で既に設定しているCSSの影響を受けてしまっているのかもしれません。 CSSでリストを無効化する設定をしていたりすると、 marked.jsがリスト用のHTMLドキュメントに変換してくれていても、それがプレビューに反映されなかったり

退会済みユーザー

2018/10/15 12:26

ご丁寧ありがとうございます。こちらであらためマークダウンのCSSを追加して反映させることができました。ありがとうございました！

行動規範の内容に同意します