What does the '#' do in this bit of JavaScript?

Question

I have some javascript I have copied from a website and I'm trying to use it in a flask project, but I am getting an error. I'm wondering: what this bit of code do, and why doesn't it work when I try to deploy it with flask? Specifically, what is the role of the '#' and why does Jinja say this is an unexpected character?

The code:

<div class="lyrics">
    {{#each lyrics}}<span class="{{highlight this}}" data-index="
    {{@key}}" data-timecode="{{timecode}}" data-classed="{{classed}}">
    {{{text}}}</span>{{{breakspace linebreak space}}}{{/each}}
    <span class="song-meta">
    "{{title}}" on "{{album}}"
</span>
</div>`

The error upon deploying with flask:

jinja2.exceptions.TemplateSyntaxError: unexpected char '#' at 37568

This is part of bigger piece of code that looks like this:

<div class="lyrics-box">
  <div class="lyrics">

    {{#each lyrics}}<span class="{{highlight this}}" data-index="{{@key}}" data-timecode="{{timecode}}" data-classed="{{classed}}">{{{text}}}</span>{{{breakspace linebreak space}}}{{/each}}
    <span class="song-meta">
    "{{title}}" on "{{album}}"
  </span>
  </div>
</div>
<div class="lyrics-meta mobi-meta">
    <span class="song-title">{{artist}} performing "{{title}}" on "{{album}}"</span>
</div>
<div class="lyrics-meta">
  <img class="hedcut" src="//graphics.wsj.com/hamilton/img/{{hedcut}}.png" alt="">
  <span class="song-title">{{artist}}</span>
  <span class="album"></span>
  <span class="view-lyrics"><span class="view">View</span><span class="hides">Hide</span> lyrics</span>
</div>

<div class="clearfix"></div>

The full stack trace looks like:

Traceback (most recent call last):
File "/anaconda/envs/flask3.5/lib/python3.5/site-packages/flask/app.py", line 1997, in __call__
return self.wsgi_app(environ, start_response)
File "/anaconda/envs/flask3.5/lib/python3.5/site-packages/flask/app.py", line 1985, in wsgi_app
response = self.handle_exception(e)
File "/anaconda/envs/flask3.5/lib/python3.5/site-packages/flask/app.py", line 1540, in handle_exception
reraise(exc_type, exc_value, tb)
File "/anaconda/envs/flask3.5/lib/python3.5/site-packages/flask/_compat.py", line 33, in reraise
raise value
File "/anaconda/envs/flask3.5/lib/python3.5/site-packages/flask/app.py", line 1982, in wsgi_app
response = self.full_dispatch_request()
File "/anaconda/envs/flask3.5/lib/python3.5/site-packages/flask/app.py", line 1614, in full_dispatch_request
rv = self.handle_user_exception(e)
File "/anaconda/envs/flask3.5/lib/python3.5/site-packages/flask/app.py", line 1517, in handle_user_exception
reraise(exc_type, exc_value, tb)
File "/anaconda/envs/flask3.5/lib/python3.5/site-packages/flask/_compat.py", line 33, in reraise
raise value
File "/anaconda/envs/flask3.5/lib/python3.5/site-packages/flask/app.py", line 1612, in full_dispatch_request
rv = self.dispatch_request()
File "/anaconda/envs/flask3.5/lib/python3.5/site-packages/flask/app.py", line 1598, in dispatch_request
return self.view_functions[rule.endpoint](**req.view_args)
File "/Users/timholdsworth/code/rhymes/flask-boilerplate/app.py", line 46, in home
return render_template('layouts/main.html')
File "/anaconda/envs/flask3.5/lib/python3.5/site-packages/flask/templating.py", line 133, in render_template
return _render(ctx.app.jinja_env.get_or_select_template(template_name_or_list),
File "/anaconda/envs/flask3.5/lib/python3.5/site-packages/jinja2/environment.py", line 869, in get_or_select_template
return self.get_template(template_name_or_list, parent, globals)
File "/anaconda/envs/flask3.5/lib/python3.5/site-packages/jinja2/environment.py", line 830, in get_template
return self._load_template(name, self.make_globals(globals))
File "/anaconda/envs/flask3.5/lib/python3.5/site-packages/jinja2/environment.py", line 804, in _load_template
template = self.loader.load(self, name, globals)
File "/anaconda/envs/flask3.5/lib/python3.5/site-packages/jinja2/loaders.py", line 125, in load
code = environment.compile(source, name, filename)
File "/anaconda/envs/flask3.5/lib/python3.5/site-packages/jinja2/environment.py", line 591, in compile
self.handle_exception(exc_info, source_hint=source_hint)
File "/anaconda/envs/flask3.5/lib/python3.5/site-packages/jinja2/environment.py", line 780, in handle_exception
reraise(exc_type, exc_value, tb)
File "/anaconda/envs/flask3.5/lib/python3.5/site-packages/jinja2/_compat.py", line 37, in reraise
raise value.with_traceback(tb)
File "/Users/timholdsworth/code/rhymes/flask-boilerplate/templates/layouts/main.html", line 731, in template
{{#each lyrics}}<span class="{{highlight this}}" data-index="{{@key}}" data-timecode="{{timecode}}" data-classed="{{classed}}">{{{text}}}</span>{{{breakspace linebreak space}}}{{/each}}
File "/anaconda/envs/flask3.5/lib/python3.5/site-packages/jinja2/environment.py", line 497, in _parse
return Parser(self, source, name, encode_filename(filename)).parse()
File "/anaconda/envs/flask3.5/lib/python3.5/site-packages/jinja2/parser.py", line 901, in parse
result = nodes.Template(self.subparse(), lineno=1)
File "/anaconda/envs/flask3.5/lib/python3.5/site-packages/jinja2/parser.py", line 874, in subparse
next(self.stream)
File "/anaconda/envs/flask3.5/lib/python3.5/site-packages/jinja2/lexer.py", line 359, in __next__
self.current = next(self._iter)
File "/anaconda/envs/flask3.5/lib/python3.5/site-packages/jinja2/lexer.py", line 562, in wrap
for lineno, token, value in stream:
File "/anaconda/envs/flask3.5/lib/python3.5/site-packages/jinja2/lexer.py", line 739, in tokeniter
name, filename)
jinja2.exceptions.TemplateSyntaxError: unexpected char '#' at 37568

Answer 1

Jinja2 uses braces to delimit its own template variables, so it tries to interpret your JavaScript {{#each}}, and fails because the # isn't valid.

You can wrap this code in {% raw %} and {% endraw %}to tell jinja2 not to interpret it:

<div class="lyrics">
{% raw %}
{{#each lyrics}}
{% endraw %}
<span class="{{highlight this}}" data-index="
{{@key}}" data-timecode="{{timecode}}" data-classed="{{classed}}">
{{{text}}}</span>{{{breakspace linebreak space}}}
{% raw %}
{{/each}}
{% endraw %}
<span class="song-meta">
"{{title}}" on "{{album}}"
</span>
</div>`