Ruby
marked.js

marked.js を使うときは改行のご注意を

marked.js を使っていて、なぜか最初の一行がコードエリアで覆われてしまう不思議なバグがおきた。はじめの行が全部灰色で覆われてしまうのだ。

スクリーンショット 2018-01-25 16.57.30.png

原因

はてなと思い、marked() で変換せず、生のテキストを出力し、chrome の検証で見てみると、テキストの前に変な改行や空白が存在していた。これが原因である。
スクリーンショット 2018-01-25 16.59.41.png

解決策

間違った例(改行してしまっている)

   <% @comments.each do |comment| %>
    <div class="CardCome__container-right ">
      <div class="CardCome__txt">
        <%= comment.comment %>           
      </div>    
    </div>
   <% end %>

正しい例(改行させない)

   <% @comments.each do |comment| %>
    <div class="CardCome__container-right ">
      <div class="CardCome__txt"><%= comment.comment %></div>    
    </div>
   <% end %>

html では、改行したら半角スペースが入ってしまう。だから改行せずに一行でまとめることによって、正しく表示させることができた。