| 1 | <!doctype html> |
|---|
| 2 | |
|---|
| 3 | <title>CodeMirror: Handlebars mode</title> |
|---|
| 4 | <meta charset="utf-8"/> |
|---|
| 5 | <link rel=stylesheet href="../../doc/docs.css"> |
|---|
| 6 | |
|---|
| 7 | <link rel="stylesheet" href="../../lib/codemirror.css"> |
|---|
| 8 | <script src="../../lib/codemirror.js"></script> |
|---|
| 9 | <script src="../../addon/mode/simple.js"></script> |
|---|
| 10 | <script src="../../addon/mode/multiplex.js"></script> |
|---|
| 11 | <script src="../../addon/edit/matchbrackets.js"></script> |
|---|
| 12 | <script src="../xml/xml.js"></script> |
|---|
| 13 | <script src="handlebars.js"></script> |
|---|
| 14 | <style>.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</style> |
|---|
| 15 | <div id=nav> |
|---|
| 16 | <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../../doc/logo.png"></a> |
|---|
| 17 | |
|---|
| 18 | <ul> |
|---|
| 19 | <li><a href="../../index.html">Home</a> |
|---|
| 20 | <li><a href="../../doc/manual.html">Manual</a> |
|---|
| 21 | <li><a href="https://github.com/codemirror/codemirror">Code</a> |
|---|
| 22 | </ul> |
|---|
| 23 | <ul> |
|---|
| 24 | <li><a href="../index.html">Language modes</a> |
|---|
| 25 | <li><a class=active href="#">HTML mixed</a> |
|---|
| 26 | </ul> |
|---|
| 27 | </div> |
|---|
| 28 | |
|---|
| 29 | <article> |
|---|
| 30 | <h2>Handlebars</h2> |
|---|
| 31 | <form><textarea id="code" name="code"> |
|---|
| 32 | {{> breadcrumbs}} |
|---|
| 33 | |
|---|
| 34 | {{!-- |
|---|
| 35 | You can use the t function to get |
|---|
| 36 | content translated to the current locale, es: |
|---|
| 37 | {{t 'article_list'}} |
|---|
| 38 | --}} |
|---|
| 39 | |
|---|
| 40 | <h1>{{t 'article_list'}}</h1> |
|---|
| 41 | |
|---|
| 42 | {{! one line comment }} |
|---|
| 43 | |
|---|
| 44 | {{#each articles}} |
|---|
| 45 | {{~title}} |
|---|
| 46 | <p>{{excerpt body size=120 ellipsis=true}}</p> |
|---|
| 47 | |
|---|
| 48 | {{#with author}} |
|---|
| 49 | written by {{first_name}} {{last_name}} |
|---|
| 50 | from category: {{../category.title}} |
|---|
| 51 | {{#if @../last}}foobar!{{/if}} |
|---|
| 52 | {{/with~}} |
|---|
| 53 | |
|---|
| 54 | {{#if promoted.latest}}Read this one! {{else}} This is ok! {{/if}} |
|---|
| 55 | |
|---|
| 56 | {{#if @last}}<hr>{{/if}} |
|---|
| 57 | {{/each}} |
|---|
| 58 | |
|---|
| 59 | {{#form new_comment}} |
|---|
| 60 | <input type="text" name="body"> |
|---|
| 61 | {{/form}} |
|---|
| 62 | |
|---|
| 63 | </textarea></form> |
|---|
| 64 | <script> |
|---|
| 65 | var editor = CodeMirror.fromTextArea(document.getElementById("code"), { |
|---|
| 66 | lineNumbers: true, |
|---|
| 67 | matchBrackets: true, |
|---|
| 68 | mode: {name: "handlebars", base: "text/html"} |
|---|
| 69 | }); |
|---|
| 70 | </script> |
|---|
| 71 | |
|---|
| 72 | <p>Handlebars syntax highlighting for CodeMirror.</p> |
|---|
| 73 | |
|---|
| 74 | <p><strong>MIME types defined:</strong> <code>text/x-handlebars-template</code></p> |
|---|
| 75 | |
|---|
| 76 | <p>Supported options: <code>base</code> to set the mode to |
|---|
| 77 | wrap. For example, use</p> |
|---|
| 78 | <pre>mode: {name: "handlebars", base: "text/html"}</pre> |
|---|
| 79 | <p>to highlight an HTML template.</p> |
|---|
| 80 | </article> |
|---|
