Pipe “|” and brackets “[” being converted to “\|” and “\[” on Jekyll code block markdown

Question

I want to display a block of code on a jekyll blog post. I'm using the following syntax:

{% highlight javascript %}
{% raw %}<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics }}"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', '{{ site.google_analytics }}');
</script>{% endraw %}
{% endhighlight %}

However, on the resulting page the '|| []' caracters are converted to '\|| \[]'. Here is the rendered output showing that

How do I avoid this? Preferrably there should be a solution that didn't involve editing the code snippet itself.

Please do note that I'm already enclosing the code snippet with {% raw %} and {% endraw %} .

Answer 1

Actually, the error was that I should not use {% raw %} and {% endraw %} when using the {% highlight %} tag.

This is the correct code:

{% highlight javascript %}
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics }}"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', '{{ site.google_analytics }}');
</script>
{% endhighlight %}