<DAY108>JQUeryを使用したmarkdownフォーム生成アクション

学習状況

●学習日数 109日

●学習時間(本日)10時間
●累計学習時間 512.5時間

●一日あたりの平均学習時間 4.69時間

form for のクラス名の指定

曖昧だった。
:にて指定する。bootstraps使用時に確認。

<%= f.submit class:"aaaa"%>

入力されたformをjsで反映

入力された文字をmarkdown方式で出力。
シンタックスハイライト対応はイメージができなかったので、
とりあえず簡単にできそうなmarkdownに対応できるようにした。

対象viewの変更

app/views/answers/new
表示したいhtmlの親セレクタにidを指定した。

    <div class= "col-xs-6 col-lg-6" id="form-text">

gemのredcarpetにて生成されるhtml部分をchangeを発火にして
出力するようにする。ただ、これだと、change発火の度にフォームが生成されてしまう。
フォームは一度だけ生成して、テキストの中身だけを変更するようにしたい。
イメージは掴めたので明日の朝一する。
app/assets/javascripts/form.jsを作成

$(function() {
      function appendHtml(input){
      var html =  `<div class="highlight" id="size-fix">
                    <pre class="highlight plaintext">
                      <code>
                        ${input}
                        </code>
                    </pre>
                  </div>
                  `
                  $("#form-text").append(html)
                }
    $("#answer_content").on('change', function(e){
      e.preventDefault();   
      inputText = $("#answer_content").val();
      appendHtml(inputText)
  })
}) 

fromについて問題点

表示される文字に行間がついている
シンタックスハイライトに対応できていない
シンタックスハイライトの場合クラス名やhtmlの構成要素が都度変わる為、
複雑な処理となる。