HTML+ERB to Slim

Convert HTML/ERB to Slim template code

Tags: convert code erb html rails slim template converter

Introduction

This is an online converter tool which helps to convert HTML+ERB to Slim template.

How to use this tool?

You can input/paste your code directly into the editor, then click the Convert button. After converting, you can download or save/share the result. It will create a link for you to share with others. You can also sign-in using Google/GitHub to save results into your account.

What is Slim?

Slim is a Ruby template language whose goal is reduce the syntax to the essential parts without becoming cryptic.

The initial design of Slim is what you see on the home page. It started as an exercise to see how much could be removed from a standard html template (<, >, closing tags, etc...). As more people took an interest in Slim, the functionality grew and so did the flexibility of the syntax.

Slim will strive to maintain simplicity, but not everyone's definition of a readable syntax is the same. The docs will show you the options.

Slim uses Temple and Tilt. If you want to learn how Slim works, you'll need to study these projects.

Learn more

Slim Syntax

      
doctype html
html
  head
    title Slim Examples
    meta name="keywords" content="template language"
    meta name="author" content=author
    javascript:
      alert('Slim supports embedded javascript!')

  body
    h1 Markup examples

    #content
      p This example shows you what a basic Slim file looks like.

      == yield

      - unless items.empty?
        table
          - items.each do |item|
            tr
              td.name = item.name
              td.price = item.price
      - else
        p
         | No items found.  Please add some inventory.
           Thank you!

    div id="footer"
      = render 'footer'
      | Copyright © #{year} #{author}
      
    

Examples

HTML+ERB

      
<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body>
        <h1>Blogg</h1>
        <p>
            Time:
          <%= Time.now %>
        </p>
        <% Post.all.each do |post| %>
            <article>
                <h2><%= post.title %></h2>
                <div><%= post.body %></div>
            </article>
        <% end %>
    </body>
</html>
      
    

Slim

      
| 
html
  head
    meta[charset="utf-8"]
  body
    h1
      | Blogg
    p
      |  Time:
      = Time.now
    - Post.all.each do |post|
      article
        h2
          = post.title
        div
          = post.body