w6lvsw
Last Updated: February 25, 2016
·
1.615K
· mcavallo
Registro1

ERB multiline comment for Ruby/Rails (and Sublime Text Bonus)

If you are reading this It's because you want an elegant way to comment multiple lines in ERB and you are not happy with the ugly syntax other hacks have.

Setup

Define an empty method in your Ruby script.

def comment
end

If you are using Rails you can add this to application_helpers.rb:

module ApplicationHelper
  def comment
  end
end

Use

Now you can use the new method:

<% comment do %>
  <div class="field">
    <%= f.label :title %><br>
    <%= f.text_field :title %>
  </div>
<% end %>

Or even tweak it a little for more readability:

<% comment do %>
  <div class="field">
    <%= f.label :title %><br>
    <%= f.text_field :title %>
  </div>
<% comment end %>

The good thing about the last one is that you can easily add a match for this and get syntax highlighting!

Picture

Syntax highlighting for Sublime Text

Start by locating the Packages folder for your Sublime Text install. In OSX the default location is /Users/xxxxx/Library/Application Support/Sublime Text 3/Packages.

Inside that location create a new folder called Rails and create a the file HTML (Rails).tmLanguage with the following content:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
  <key>fileTypes</key>
  <array>
    <string>rhtml</string>
    <string>erb</string>
    <string>html.erb</string>
  </array>
  <key>foldingStartMarker</key>
  <string>(?x)
    (&lt;(?i:head|body|table|thead|tbody|tfoot|tr|div|select|fieldset|style|script|ul|ol|form|dl)\b.*?&gt;
    |&lt;!--(?!.*--&gt;)
    |\{\s*($|\?&gt;\s*$|//|/\*(.*\*/\s*$|(?!.*?\*/)))
    )</string>
  <key>foldingStopMarker</key>
  <string>(?x)
    (&lt;/(?i:head|body|table|thead|tbody|tfoot|tr|div|select|fieldset|style|script|ul|ol|form|dl)&gt;
    |^\s*--&gt;
    |(^|\s)\}
    )</string>
  <key>keyEquivalent</key>
  <string>^~R</string>
  <key>name</key>
  <string>HTML (Rails)</string>
  <key>patterns</key>
  <array>
    <dict>
      <key>begin</key>
      <string>&lt;% +comment do +%&gt;</string>
      <key>captures</key>
      <dict>
        <key>0</key>
        <dict>
          <key>name</key>
          <string>punctuation.definition.comment.erb</string>
        </dict>
      </dict>
      <key>end</key>
      <string>&lt;% +comment end +%&gt;</string>
      <key>name</key>
      <string>comment.block.erb</string>
    </dict>
    <dict>
      <key>begin</key>
      <string>&lt;%+#</string>
      <key>captures</key>
      <dict>
        <key>1</key>
        <dict>
          <key>name</key>
          <string>punctuation.definition.comment.erb</string>
        </dict>
      </dict>
      <key>end</key>
      <string>%&gt;</string>
      <key>name</key>
      <string>comment.block.erb</string>
    </dict>
    <dict>
      <key>begin</key>
      <string>&lt;%+(?!&gt;)[-=]?</string>
      <key>captures</key>
      <dict>
        <key>2</key>
        <dict>
          <key>name</key>
          <string>punctuation.section.embedded.ruby</string>
        </dict>
      </dict>
      <key>end</key>
      <string>-?%&gt;</string>
      <key>name</key>
      <string>source.ruby.rails.embedded.html</string>
      <key>patterns</key>
      <array>
        <dict>
          <key>captures</key>
          <dict>
            <key>1</key>
            <dict>
              <key>name</key>
              <string>punctuation.definition.comment.ruby</string>
            </dict>
          </dict>
          <key>match</key>
          <string>(#).*?(?=-?%&gt;)</string>
          <key>name</key>
          <string>comment.line.number-sign.ruby</string>
        </dict>
        <dict>
          <key>include</key>
          <string>source.ruby.rails</string>
        </dict>
      </array>
    </dict>
    <dict>
      <key>include</key>
      <string>text.html.basic</string>
    </dict>
  </array>
  <key>scopeName</key>
  <string>text.html.ruby</string>
  <key>uuid</key>
  <string>45D7E1FC-7D0B-4105-A1A2-3D10BB555A5C</string>
</dict>
</plist>

Now every time you use the 2nd syntax you get the comment look. Pretty neat!

If you ever want to revert this to the original state you just need to remove the Rails folder and Sublime Text will use the pristine package without the modifications.

Shortcut for Sublime Text

Even after installing the new syntax you will notice the shortcut for comments (CMD+/) will still use the HTML comment format. Create another file Comments.tmPreferences inside the Rails package with the following content:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
  <key>name</key>
  <string>Comments</string>
  <key>scope</key>
  <string>text.html.ruby</string>
  <key>settings</key>
  <dict>
    <key>shellVariables</key>
    <array>
      <dict>
        <key>name</key>
        <string>TM_COMMENT_START</string>
        <key>value</key>
        <string>&lt;% comment do %&gt; </string>
      </dict>
      <dict>
        <key>name</key>
        <string>TM_COMMENT_END</string>
        <key>value</key>
        <string> &lt;% comment end %&gt;</string>
      </dict>
    </array>
  </dict>
  <key>uuid</key>
  <string>B79BDBCF-D0C9-468E-BE62-744074D7825F</string>
</dict>
</plist>

Please leave your feedback or ideas to improve this and if you find it useful please upvote!
Enjoy! :)

This hack is inspired by the solution provided by Adam Block at http://stackoverflow.com/a/24131080/230371.

Say Thanks
Respond