Question

I’m making a style guide where I output the code on the right that is displayed on the left.

I know that adding %% escapes ERB

I have written a helper that takes the contents of a block and renders the code in two places one showing the html and I want the other to show the source ERB that created the html.

The problem is I get back HTML where I wanted ERB.

The View Code

<%= display_code do %>
  <%= link_to "Button", "/style_guide, class: "btn" %>
<% end %>

The Helper Code

module StyleGuideHelper
  def display_code(&block)
    content = with_output_buffer(&block)
    html = ""
    html << content_tag(:div, content, class: "rendered-code")
    html << content_tag(:div, escape_erb(content), class: "source-code-preview")
    html.html_safe
  end

  def escape_erb(code)
    code = code.gsub("%=", "%%=")
  end
end

Expected Result
Button <%= link_to “Button”, “/style_guide, class: “btn” %>

Actual Result
Button Button

Cheers

Answer 1

The issue is that this helper runs the block (link_to "Button", ...) — it never sees the source code inside the block, just its output. You could replace escape_erb with h to capture the resulting HTML, but that won’t pop back up to the ERB that generated it.

As I see it, your options are:

1. Break out examples into partials, then make a helper that a) renders the partial and b) displays the underlying file.
2. Specify your ERB fragments as strings (heredocs?), pass the string into the helper, and have the helper a) evaluate it via ERB.new(string).result(binding) to render the result and b) display the string.
3. Make the helper determine what part of the view invoked it, then parse the .erb well enough to find the block. Catch is, the precise format of what you see in callers is subject to change without notice due to the way views are compiled.
4. Make a helper that uses crazy metaprogramming juju to evaluate the block in both an ERB context as well as your own special context that intercepts the code being evaluated and turns it back into markup.

…sorted in approximate order of complexity and odds of success.