How do I insert this code into a hexo markdown?

Question

I can't get this piece of code inserted into Hexo .md markdown page.

<div class="container">
  <h1>Works</h1>
  <ul class="row-fluid block-grid-4">
  {{#each model as |w index|}}
    <li>
      <h5>{{w.title}}</h5>
      <p>Owner: {{w.owner}}</p>
      <p>{{#link-to "work" w.id}}<img class="img-responsive img-rounded" src={{w.image}} alt={{w.title}}>{{/link-to}}</p>
    </li>
  {{/each}}
  </ul>
</div>

I thought indent 4 spaces is enough but I always got this error.

INFO  Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.
Unhandled rejection Template render error: unexpected token: #
    at Error.exports.TemplateError (/opt/www/jusfeel/node_modules/nunjucks/src/lib.js:51:19)
    at Object.extend.fail (/opt/www/jusfeel/node_modules/nunjucks/src/parser.js:64:15)
    at Object.extend.parsePrimary (/opt/www/jusfeel/node_modules/nunjucks/src/parser.js:947:18)
    at Object.extend.parseUnary (/opt/www/jusfeel/node_modules/nunjucks/src/parser.js:882:25)
    at Object.extend.parsePow (/opt/www/jusfeel/node_modules/nunjucks/src/parser.js:856:25)
    at Object.extend.parseMod (/opt/www/jusfeel/node_modules/nunjucks/src/parser.js:844:25)
    at Object.extend.parseFloorDiv (/opt/www/jusfeel/node_modules/nunjucks/src/parser.js:832:25)
    at Object.extend.parseDiv (/opt/www/jusfeel/node_modules/nunjucks/src/parser.js:820:25)
    at Object.extend.parseMul (/opt/www/jusfeel/node_modules/nunjucks/src/parser.js:808:25)
    at Object.extend.parseSub (/opt/www/jusfeel/node_modules/nunjucks/src/parser.js:796:25)
    at Object.extend.parseAdd (/opt/www/jusfeel/node_modules/nunjucks/src/parser.js:784:25)
    at Object.extend.parseCompare (/opt/www/jusfeel/node_modules/nunjucks/src/parser.js:751:25)
    at Object.extend.parseIn (/opt/www/jusfeel/node_modules/nunjucks/src/parser.js:720:23)
    at Object.extend.parseNot (/opt/www/jusfeel/node_modules/nunjucks/src/parser.js:716:21)

If I escape the hash(\#), I got new error:

FATAL Something's wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.html
Template render error: expected variable end
    at Error.exports.TemplateError (/opt/www/jusfeel/node_modules/nunjucks/src/lib.js:51:19)
    at Object.extend.fail (/opt/www/jusfeel/node_modules/nunjucks/src/parser.js:64:15)
    at Object.extend.advanceAfterVariableEnd (/opt/www/jusfeel/node_modules/nunjucks/src/parser.js:133:18)
    at Object.extend.parseNodes (/opt/www/jusfeel/node_modules/nunjucks/src/parser.js:1159:22)
    at Object.extend.parseAsRoot (/opt/www/jusfeel/node_modules/nunjucks/src/parser.js:1177:42)
    at Object.module.exports.parse (/opt/www/jusfeel/node_modules/nunjucks/src/parser.js:1199:18)
    at Object.module.exports.compile (/opt/www/jusfeel/node_modules/nunjucks/src/compiler.js:1118:48)
    at Obj.extend._compile (/opt/www/jusfeel/node_modules/nunjucks/src/environment.js:444:35)
    at Obj.extend.compile (/opt/www/jusfeel/node_modules/nunjucks/src/environment.js:433:18)
    at null.<anonymous> (/opt/www/jusfeel/node_modules/nunjucks/src/environment.js:378:22)
    at Object.exports.withPrettyErrors (/opt/www/jusfeel/node_modules/nunjucks/src/lib.js:24:16)
    at Obj.extend.render (/opt/www/jusfeel/node_modules/nunjucks/src/environment.js:374:20)
    at Obj.extend.renderString (/opt/www/jusfeel/node_modules/nunjucks/src/environment.js:261:21)
    at /opt/www/jusfeel/node_modules/hexo/lib/extend/tag.js:56:9

This is quite frustrating..to think if I want to copy and paste some code into a page but I have to manually fix this..

Plus, I can't use {% raw %} since the code I copy from is not raw (> alike)

Answer 1

Both of the relevant errors are TemplateErrors which have nothing to do with Markdown. It would appear that Hexo supports using template tags within your Markdown documents. Of course, template tags are not part of Markdown. Presumably, Hexo is running your Markdown document through a template engine to process the template tags first, then passing the output of the template engine through Markdown.

Of course, the template engine knows nothing about Markdown or whether some text is in a code block or not. Therefore, it is trying to parse your code block which contains some template-tag-like syntax and (correctly) raising an error as the code is not a valid template. Personally, I've never liked tools that do this for this very reason. It makes it nearly impossible to include sample template code in your Markdown code blocks.

I say nearly impossible, because it is possible, its just not convenient. You need to escape the template syntax. As the docs state:

If certain content is causing processing issues in your posts, wrap it with the raw tag to avoid rendering errors.

{% raw %}
<div class="container">
  <h1>Works</h1>
  <ul class="row-fluid block-grid-4">
  {{#each model as |w index|}}
    <li>
      <h5>{{w.title}}</h5>
      <p>Owner: {{w.owner}}</p>
      <p>{{#link-to "work" w.id}}<img class="img-responsive img-rounded" src={{w.image}} alt={{w.title}}>{{/link-to}}</p>
    </li>
  {{/each}}
  </ul>
</div>
{% endraw %}

The template engine will now skip over the block, ignoring it, while removing the raw tag so that the Markdown parser can parse your Markdown properly.

Or... according to #1404 and #1372, fenced code blocks also work. Rather than indenting your code block, wrap it in backticks:

```
<div class="container">
  <h1>Works</h1>
  <ul class="row-fluid block-grid-4">
  {{#each model as |w index|}}
    <li>
      <h5>{{w.title}}</h5>
      <p>Owner: {{w.owner}}</p>
      <p>{{#link-to "work" w.id}}<img class="img-responsive img-rounded" src={{w.image}} alt={{w.title}}>{{/link-to}}</p>
    </li>
  {{/each}}
  </ul>
</div>
```

It is weird that this works for fenced code blocks but not standard indented code blocks. But you might want to give it a try. If it works, they should update their docs.