Search code examples
htmlstaticjsxastrojs

How to render double curly braces in Astro

In Astro, I would like to render double curly braces inside the template however it errors as whatever inside the braces is interpreted as JS code.

Example:

.post-title {
    margin: 0 0 5px;
    font-weight: bold;
    font-size: 38px;
    line-height: 1.2;
    and here's a line of some really, really, really, really long text,
    just to see how it is handled and to find out how it overflows;
}

To render the code above, this is how I have setup my template like:

<code>
.post-title {<br />
    margin: 0 0 5px;<br />
    font-weight: bold;<br />
    font-size: 38px;<br />
    line-height: 1.2;<br />
    and here's a line of some really, really, really, really long text, just to
    see how it is handled and to find out how it overflows;<br />
}
</code>

Is there any clean/elegant way to render curly braces directly inside astro template?

Solution

  • In .astro files you can use the is:raw directive to render contents of a tag “as-is” without any templating logic etc. applying:

    <code is:raw>
.post-title {
    margin: 0 0 5px;
    font-weight: bold;
    font-size: 38px;
    line-height: 1.2;
    and here's a line of some really, really, really, really long text,
    just to see how it is handled and to find out how it overflows;
}
</code>

    Otherwise, to target just a single character like in your example, you can either use {'{'} or the HTML entity for the left curly brace character: &lcub;.