2

HTML/ERB と MD の組み合わせであるモデル オブジェクト テキストに入力できるブログ アプリを作成しようとしています。その一部は文字通りの公開を目的としており、一部はレンダリング/実行を目的としています。

理想的には、バックティックまたは Markdown/Redcarpet のようなものを使用して、コードとして公開したいテキストの輪郭を描くだけで、残りの HTML/ERB が実行されます。言い換えれば、この (実際の例、コンテンツとは関係のない) テキストを Post モデルに入力する必要があります。

Take a look at the below strangely named cow, and imagine sorting through all 93 packages of ground meat.

<%= image_tag('MeatUp Log.png', class: 'blog_photo') %>

Since every package was associated with a given user and had an expected and actual weight, butchers had to comb through long lists of cuts (for cows, as MeatUp broke them down, there were 22 different cuts, totaling hundreds of packages), to find the right one to update after they weighed it.

To simplify the process both visually and practically, I looked into a simple Javascript expand/collapse function, and ended up homebrewing a neater, more adaptable version from something I found in a blog.

<div class="codebox">
 expand.js.coffee

 ```
 jQuery -> 
  $('.cl .bundle').on 'click', (e) ->
    e.preventDefault()
    $collapse = $(@).closest('.collapse-group').find('.collapse')
    $collapse.collapse 'toggle'
 ```

</div>

次のようになります。

ここに画像の説明を入力

その代わり。現在、次のようになっています。

ここに画像の説明を入力

ここで 2 つの問題があります。1) バッククォートで囲まれていないにもかかわらず、ERB が表示されますが、レンダリングされません。2) HTML は表示から消えますが、レンダリングもされません。フォーマット (上の青いコードボックス) のためにそこにありますが、読み取られないように見えます。

基本的には、マークダウンに Redcarpet を使用し、コードのカラーリングにPygmentsを使用するというアドバイスに従っていますが、このプロセスができるだけ簡単であり、実行されたコードと実行されていないコードの両方をそこに含めることができるようにしたいと考えています。バッククォートを使用するだけです。

私のapplication_helperで「.html_safe」を取り出してみましたが、それは物事を狂わせるだけです:

  class HTMLwithPygments < Redcarpet::Render::HTML
    def block_code(code, language)
        Pygments.highlight(code, lexer: language)
    end
  end

  def markdown(text)
    renderer = HTMLwithPygments.new(hard_wrap: true, filter_html: true)
    options = {
      autolink: true,
      no_intra_emphasis: true,
      fenced_code_blocks: true,
      lax_html_blocks: true,
      strikethrough: true,
      superscript: true
    }
    Redcarpet::Markdown.new(renderer, options).render(text).html_safe // This guy
  end

何か案は？

編集 -ここの指示に従って、HTML を 1 行で区切ってみました。それは上記の消失の問題を引き起こすだけです。これは Redcarpet の避けられない機能ですか? MDのアイデアを破棄する必要がありますか? もしそうなら、プレーンテキストとERBの両方をフィードできる単純な投稿モデルの代替提案はありますか?

4

1 に答える 1

1

私はまだ少しハッキーに感じますが、私の好みに合う解決策を思いつきました。私

A) application_helper の RedCarpet 設定から "filter_html: true" を削除しました (上記の Railscast.

  def markdown(text)
    renderer = HTMLwithPygments.new(hard_wrap: true)
    options = {
      nowrap: true,
      autolink: true,
      no_intra_emphasis: true,
      fenced_code_blocks: true,
      lax_html_blocks: true,
      strikethrough: true,
      superscript: true
    }
    Redcarpet::Markdown.new(renderer, options).render(text).html_safe
  end

B) 実行される HTML の各セグメント (リンクと画像以外 - HTML をスタイリングするだけだと思います) をブロックでラップし、レンダリングできるようにしました。ここでドキュメントを見つけました。

C) ERB を取り除きました。RedCarpet は実際には ERB のレンダリング用に作成されていないように思われるので、必要なすべての ERB を HTML に変換しました (これはブログ投稿なので、これは問題ではありませんでしたが、このソリューションは正確にはスケーラブルではありません)。すべての link_to を通常の HTML リンクに変更しました。

D）正確なインデントなどをいじる必要がありましたが、うまくいきました。これで、Post オブジェクトを以下のようなもので満たすことができ、それを pygments フォーマットと機能的な CSS のリンクと画像を含む青色のフォーマットのコード ボックスに変えることができます。私にとってはうまくいきますが、理想よりも約15％多く頭痛がします. 誰かがより良いアイデアを思いついたら、私に知らせてください:

Some markdown text.

More markdown text with a nicely rendered <a href="#" title="title" class="stylin">link</a> in it. 

<img src="image.png">

And some code in a stylized codebox:

<notextile><div class="codebox">example.html.erb</notextile>

```html
<h4>This works!</h4>
<p>Well enough for now, at least</p>
<small>Any improvements you can think of would be appreciated</small>
```

<notextile></div>
</notextile>

いずれにせよ、それが今のところの私の「答え」ですが、もっと良い答えを思いつく人がいたら教えてください.

于 2013-02-11T05:49:43.877 に答える