How to output mustache templates in a jekyll site

I was having difficulty rendering a mustache template out as a code sample.

Here was my code sample…

{{#.}}

<p>Hello, my name is {{name}}.</p>
<p>I am from {{hometown}}.</p>
<p>I have {{kids.length}} kids:</p>
<ul>
{{#kids}}
    <li>{{name}} is {{age}}</li>
{{/kids}}
</ul>
{{#.}}

So you write the above in a markdown file, and try wrapping it in {% highlight html %}

{% highlight html %} 
...
{% endhighlight %}

And the output looks on the page as follows…

<p>Hello, my name is .</p>
<p>I am from .</p>
<p>I have  kids:</p>
<ul>

    <li> is </li>

</ul>

Hmm - not right. Perhaps I need a different highlighter - mustache?

{% highlight mustache %} 
...
{% endhighlight %}

But there was no change.

After a bit of research I discovered the raw blocks, so wrapping the code in raw it output like this…

Hello, my name is {{name}}.

I am from {{hometown}}.

I have {{kids.length}} kids:

{{name}} is {{age}}

Almost - but there’s no code tag wrapped around it. How about if we just add the code tag around it in the markdown file…

{{#.}}

Hello, my name is {{name}}.

I am from {{hometown}}.

I have {{kids.length}} kids:

{{name}} is {{age}}

{{#.}} </code>

No - the code black only works on the first line before it’s auto closed by the browser.

I tried various methods of outputting it until I finally realised I need to wrap the original code script with.

{% highlight html %}
{% raw %}
...
{% endraw %}
{% endhighlight %}

And this works!

{{#.}}

<p>Hello, my name is {{name}}.</p>
<p>I am from {{hometown}}.</p>
<p>I have {{kids.length}} kids:</p>
<ul>
{{#kids}}
    <li>{{name}} is {{age}}</li>
{{/kids}}
</ul>
{{#.}}

Excellent!

But… you think that’s crazy? - it gets even weirder when you see what I had to write to make jekyll output the wrapper script I described above…

{{ "{% highlight html "}}%}
{{ "{% raw "}}%}
...
{{ "{% endraw "}}%}
{{ "{% endhighlight "}}%}

Basically I am using escaped code to output the “raw” tag. If I don’t do that then liquid templates attempt to compile the interior as raw text, and get’s a bit confused by opening and closing tags.