Luquid conflicts with {% raw %} tags

Help
1

I have a blogpost here: https://patrykkalinowski.com/blog/2016/12/14/blog-search-in-hubspot-cos.html
I have a code snippet which renders with red background and I can’t find a way to fix it.

Screen Shot 2017-05-13 at 13.19.07.png766×368 30.2 KB

The code is:

{% raw %}
{# you can replace 'default' with your blog id #}
{% set contents = blog_popular_posts('default', 200) %}

{# search query #}
{% set query = request.query_dict['q'] %}

<h1>Search results for: {{ query }}</h1>
{% for content in contents %}
  {% if query|lower in content.name|lower %}
    <h2><a href="{{ content.absolute_url }}">{{ content.name }}</a></h2>
    <p>{{ content.post_summary|striptags }}</p>
  {% endif %}
{% endfor %}
{% endraw %}

Any ideas?

2

What language (lexer) are you adding to your code block? I’d suggest html as most of your markup is that and might highlight better.

Also are you using backticks or Jekyll’s highlight tag?

 ```html
 {% raw %}
{# you can replace 'default' with your blog id #}
{% set contents = blog_popular_posts('default', 200) %}

{# search query #}
{% set query = request.query_dict['q'] %}

<h1>Search results for: {{ query }}</h1>
{% for content in contents %}
  {% if query|lower in content.name|lower %}
    <h2><a href="{{ content.absolute_url }}">{{ content.name }}</a></h2>
    <p>{{ content.post_summary|striptags }}</p>
  {% endif %}
{% endfor %}
{% endraw %}


Or

{% highlight html %}
{% raw %}
{# you can replace ‘default’ with your blog id #}
{% set contents = blog_popular_posts(‘default’, 200) %}

{# search query #}
{% set query = request.query_dict[‘q’] %}

Search results for: {{ query }}

{% for content in contents %} {% if query|lower in content.name|lower %}

{{ content.name }}

{{ content.post_summary|striptags }}

{% endif %} {% endfor %} {% endraw %} {% endhighlight %} ```

And one other thing. The colors used for syntax highlighting are dependent on your “theme’s” CSS. Jekyll (well really Rouge) doesn’t provide that, so you may need to add tweak the CSS.

3

TIL of lexers :slight_smile:
Thanks a lot @mmistakes, I ended up with using luqid highlighting:

 ```liquid

Now I need to improve code snippets on my other blogposts :slight_smile: