Escaping Rendering Liquid Template in Jekyll Markdown

3
votes

Is there a way to escape liquid template rendering in Jekyll markdown pages?

I have the following fenced code block in a markdown file:

```html
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Example Title</title>
</head>

<body>
  <div id="app">
    {% raw %}
    {{ content }}
    {% endraw %}
  </div>
</body>

</html>
```

which renders to:

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Example Title</title>
</head>

<body>
  <div id="app">



  </div>
</body>

</html>

I'm not sure why, but Jekyll is processing the content between the {% raw %} tags. I would like to retain the {{ content }} block as-is, without being rendered.

I've also tried the approach of using a { as a page variable and accessing it via the following:

{{ page.lcb }}{ content }}
2
markdownjekyllliquid
Possible duplicate of How to escape liquid template tags? – Chris

2 Answers

4
votes

Turns out my issue was further complicated by a template issue with Vue.js, which also uses the mustache syntax for templates. I was able to resolve this with the following:

{% raw %}{{ "{{ content "  }}}}{% endraw %}

It doesn't look great, but it works.

0
votes

I encountered the same problem. I use CloudCannon for Jekyll. I had several places where I used {{}}, so I ended up putting it into the the component file, where probably template should reside anyway to comply with Vue's structure, e.g.:

var app = new Vue({
    el: "#app",
    data: {...} ,
    filters: {...} ,
    methods: {...},
    template: `
      <div>
        <ul class="services">
          <li class="services__item" v-for="service in services" v-on:click="toggleActive(service)" v-bind:class="{ \'active\' : service.active }">
            <span>{{service.name}}</span> <span>{{service.price | currency}}</span>
          </li>
        </ul>
        <p class="total">
          <span>Total:</span> <span>{{total() | currency}}</span>
        </p>
      </div>
    `
});