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>

看起来像这样:

在此处输入图像描述

反而。它目前看起来像这样:

在此处输入图像描述

这里有两个问题。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 分隔一行。这只是导致上述消失问题。这是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 回答