How to render double curly braces in Astro

Question

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?

score 1 · Accepted Answer · answered Nov 28 '22 at 10:50

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: {.

score 0 · Answer 2 · answered Nov 20 '22 at 15:12

I have found a way to get around this issue by wrapping the character as strings inside the curly braces syntax. {'{'} and/or {'}'}

This will make the astro template look like following:

<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>

How to render double curly braces in Astro

2 Answers2