Skip to content

Blade Syntax Cheat Sheet

Jump to bottom Edit New page
bminer edited this page Aug 7, 2012 · 7 revisions

Blade Syntax Cheat Sheet

Indenting

  • In Blade, you indent where it makes sense to do so. See some examples (in tags section) below.
  • You can indent with any number of spaces or with a single tab character. The only rule is to be consistent within a given file.

Tags

Rules

  • Tags are words (i.e. html)
  • Append #foobar to set the id attribute of the tag to foobar
  • Append .class.anotherClass to set the class attribute of the tag to class anotherClass
  • Use parentheses to set other tag attributes, separating each attribute with whitespace, a comma, or a newline. (i.e. h1(style="display: none" class="foobar")
    • You cannot put whitespace, commas, newlines, or parentheses in the vanilla JavaScript code, though. Blade uses these characters to separate each attribute or to end the tag definition.
    • The class attribute is handled with extra special care. Pass an array or string.
    • Boolean attributes are supported, as well. Just pass a boolean attribute value
  • You can omit the tag name if you use #id or .class. Blade assumes you are talking about a <div>.
  • You can start a tag name with a bashslash to escape Blade keywords.
  • Text or vanilla JavaScript code may follow the tag definition (see text content and code output)

Examples:

Blade

html
  head
    title Hello
  body
    h1 Hello, world!

HTML

<html>
  <head>
    <title>Hello</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

Blade

h1#header.center Hello, world!
h2.sub-header.center(style="display: none") Hello, nobody!

HTML

<h1 id="header" class="center">Hello, world!</h1>
<h2 style="display: none" class="sub-header center">Hello, nobody!</h2>

More examples coming soon...

Text Content

Rules:

  • You can put text content after a tag definition or after a pipe character (|).
  • Text is escaped by default (i.e. & is replaced with &amp;, etc.)
  • Prepend the content with a ! to turn off HTML string escaping.
  • Prepend the content with a = to indicate that vanilla JavaScript code follows, which should be evaluated and then inserted at the appropriate location.

Example:

Blade

span Hello, World
span
    | Hello, World
span= "Hello" + ", World"
#escape This text is "escaped"
#notEscaped
    ! This text is <strong>not</strong> escaped!

HTML

<span>Hello, World</span>
<span>Hello, World</span>
<span>Hello, World</span>
<div id="escape">This text is &quot;escaped&quot;</div>
<div id="notEscaped">This text is <strong>not</strong> escaped!</div>
Add a custom footer
Add a custom sidebar
Clone this wiki locally