demo.slim

/Comment
/ Space comment
/ Nested Comment
  Comment
// Comment
/! HTML comment
/[...] IE comment

/ Root level
section

/ Element with integer
h2

section
  #nested
    .selectors

/ Classes and IDs
section.class
section.two.classes
section#id
section#id.class
section.class#id
section.class#id.class
section.dash-class
section.dashdash--class
section.underscore_class
section.underscoreunderscore__class
section.-leading-dash
section-with-dashes.class

/ ID and Class Shortcut

.class
.two.classes
#id
#id.class
.class#id
.class#id.class
.dash-class
.dashdash--class
.underscore_class
.underscoreunderscore__class
.-leading-dash
._leading_underscore

/ Attributes
div quoted="attribute"
div quoted="attribute" single='quoted'
div dash-attribute='attribute'
div.class with-attribute="attribute"
div.class with-attribute="attribute\
  multiple lines"
div= ruby_var_with_no_space_from_tag
div constant=false
div constant=nil

.foo v-bind:class="{...}"
.foo v-model="name" v-bind:class="{...}"

/ Ruby attributes
div dynamic-value=ruby_variable
/ TODO highlight Ruby variables when they're attribute values
div dynamic-value=ruby_variable(with: args, and: 'strings') text available here for it is Ruby no more

/ Attribute wrapping
div [attibute="this"]
/ TODO should support spaces around attribute name and value
div [ attibute = "this" ] This is text
div(bracket="attributes" multiple="attributes")
div[bracket="attributes" multiple="attributes"]
div [ bracket="attributes" multiple="attributes" ]
/ TODO line-break attribute wrapping doesn't hold
div[bracket="attributes"
  multiple="attributes"]

/ Attribute merging
div attribute=['value1', 'value2']
/ TODO highlight attribute merging
div attribute=:value1,value2

/ Splats
#splat*{ 'attribute' => 'value'}
#splat *{attribute: 'value'} Regular text
/ TODO * is incorrectly colored
#splat *@variable
#splat *variable

/ Dynamic tags
*{ tag: 'span' }

/ Interpolation
div #{variable if amount > 0} Extra text
div Extra #{variable if amount > 0} text
div Extra text #{variable if amount > 0}
div attribute="#{variable if amount > 0} extra-text"

/ Whitespace
span< Before
span> attribute="value" After
span.class<> Both

/ Quote
span This is a ' line with a single quote
span.klass This is a ' line with a single 'quote'
span.klass attribute="value" This is a ' line with a single unescaped quote
span.klass Additional code shouldn't be highlighted

span This is a " line with a double quote
span.klass This is a " line with a double "quote"
span.klass attribute="value" This is a " line with a double unescaped quote
span.klass Additional code shouldn"t be highlighted

/ Inline
h2: span Text
h2.with-class.second-class: span Text
h2.with-class.second-class: span.with-class Text
h2: span.class.class Text
h2: span.class attributes="value" Text
.with-class: .single-class data-attribute="value" Text
.with-class.double-class: .class-and.additional.class attrubute="value" Text here

/ XML
loc:url .this is="attr" this is text Title
/ TODO second colon should highlight as a punctuation.definition.tag.end.slim
loc:url: .this is="attr" this is text Title

/ Ruby
p Words with Ruby reserved words like for or in (for)
- array.each do |item|
  - if true
  - else
== render 'this', locals: { attribute: 'value' }
h1 = yield :yield_sym
= app_helper('string', sym: 'value', class: 'value')
p = app_helper('string', sym: 'value')
- content_for :hello_slim do |this|
  p.class
  p = @hello
  p Regular

/ Without block
- content_for :hello_slim do
  p.class
  p = @hello

== render 'multiline',
  with: 'locals',
  and: :symbols
== render 'multiline'\
  with: 'locals',
  and: :symbols

/ Verbatim
article
  | Opening text
    Copy line
    #{interpolated_ruby / 2}
- if true
  | console.log("foo");
- else
  | console.log("bar");

div
  'Verbatim text with space after
    a inline text that's "quoted"
    <a href="#">HTML</a>
    a href="slim" unhighlighted slim

/ HTML

.inline Text <normal html_underscore_value="value" normal="attribute" html-dash-attribute="value"><and this="this"> Text</normal>
| <tag dash-attribute="this"><tag:with:colon this="this">
<normal class="html-tag" underscore_attribute="value" normal-dash-attribute="value">

/ Embedded Engines

ruby:
  blank = []
  @instance.each do |item|
    blank << item.name
  end
  # Comment
  blank = @instance.map(&:name)

javascript:
  (function() {
    console.log('hello world');
  });

coffee:
  anon: ->
    console.log 'hello world'

scss:
  .hello:before {
    color: $world
  }

css:
  .hello:before {
    content: 'world'
  }

less:
  .hello:before {
    content: @world
  }

sass:
  .hello
    content: $world

markdown:
  # Hello
  **World**

erb:
  <%= hello_world if hello_world.present? %>

---
front_matter: present
---