Skip to main content

Escaping Text

CodeBaker reads every {{ }} and {% %} in a template, even inside an ordinary comment. When the generated file must contain such text itself, as in a Vue, Handlebars, Twig or Pebble file, you have to tell CodeBaker to leave it alone. This lesson shows the three ways.

A raw block​

Wrap the text in {% raw %} and {% endraw %}. When the file is a code file, put each tag in a CodeBaker: comment, as in the previous lesson:

A Vue component that keeps its own braces
Template.CodeBaker/raw-vue/
Download the template (.zip)https://codebaker.dev/examples/raw-vue.zip
Install in IntelliJ IDEA

Needs the CodeBaker plugin and an open project. Another IDE, or the button does nothing? Copy the link, then in the IDE right-click any folder → New → Generate from Template → Install Template from URL… and paste it. You always get a confirmation dialog before anything is installed.

___componentName___.vue
<template>
    <div>
        <h1>___componentName___</h1>
        <!-- CodeBaker: {% raw %} -->
        <p>{{ message }}</p>
        <button @click="count++">{{ count }}</button>
        <!-- CodeBaker: {% endraw %} -->
    </div>
</template>
codebaker.config.json5
{
  // The folder name when the template is installed under .CodeBaker/
  id: "raw-vue",

  name: "Vue Component",

  placeholders: ["___VAR___"],

  vars: {
    componentName: "Counter",
  },
}
Typed in the dialogstep 1, Custom Properties
componentName
Counter
Generated resultwhat lands in your project
Counter.vue
<template>
    <div>
        <h1>Counter</h1>
        <p>{{ message }}</p>
        <button @click="count++">{{ count }}</button>
    </div>
</template>

{{ message }} and {{ count }} come out unchanged, while ___componentName___ is still replaced. For a single line, an inline {% raw %}{{ message }}{% endraw %} works too.

  • raw and verbatim are the same thing. {% raw %} is another name for Pebble's {% verbatim %} (the word Twig and Jinja users know). Either is closed by its own end tag, {% endraw %} or {% endverbatim %}.
  • Nothing inside a block is read or changed. Not Pebble, not your declared placeholders, not the replace entries of the config, not replace and regex rules, and not CodeBaker: directives or slot markers written inside it. The block comes out exactly as written, indentation included. To change a value inside what would be a block, end the block before it and start another one after it.
  • Tags on lines of their own go with their lines. When {% raw %} and {% endraw %} each have a line to themselves, those lines are not in the output, only the content between them. In the middle of a line, the tags keep the text and the spaces around them.
  • A comment only wraps the tag. In any of the five comment styles the tag has to be the only thing in the comment, as in the example above.
  • Blocks can follow each other, with nothing but whitespace between them. A block that is never closed is reported with the line where it starts.
  • Anywhere else, a literal {{ }} or {% %} is read by Pebble, including inside ordinary comments: <!-- Uses {{ }} syntax --> fails with a parse error unless it is inside a raw block.
  • To show a raw tag itself as text, print it as a string: {{ '{% raw %}' }}. A tag mentioned inside a Pebble comment ({# about {% raw %} #}) is ignored too.

A printed string​

{{ '___not_a_var___' }} prints ___not_a_var___, and nothing changes it on the way: not your placeholders, not replace entries, not rules. It is the short form for one line of text. It has to be one string in one pair of quotes, with no filter after it ({{ 'abc' | upper }} is an ordinary expression), and the text cannot contain a quote of the same kind. Use a raw block for anything longer.

Other delimiters for the whole template​

If a file has a lot of {{ }} of its own, do not wrap every place in a raw block. Choose another syntax for the whole template with syntax in the config, for example:

{
  syntax: "square",
}

CodeBaker then reads [[ name ]] and [% if x %], and every {{ }} and {% %} in the files stays plain text. The choice covers file contents, file names, the mapping file, directives and slot markers.

Pick a set that your files do not use themselves: square is a poor fit for JSON or Python with nested lists, TOML tables and bash [[ ]], and angle for ERB, EJS and JSP. If you also declare placeholders, see placeholders or syntax? for which one to use.

Next​