How to print formatted html using Twig?

Question

I pass into twig template variable that contains html code. When I print it I get something like that:

<div class="links"> <span class="logo"></span> <a href="/">homepage</a> <a href="/page_1">page 1</a> <a href="/page_2">page 2</a> <a href="/page_3">page 3</a> </div>

How do i make the code look more readable? Like this:

 <div class="links">
    <span class="logo"></span>
    <a href="/">homepage</a>
    <a href="/page_1">page 1</a>
    <a href="/page_2">page 2</a>
    <a href="/page_3">page 3</a>
</div>

score 0 · Answer 1 · answered May 27 '20 at 07:22

0

The source HTML is displayed exactly as you pass it in. One way I can think of to fix this specific issue is by using a solution like https://stackoverflow.com/a/34556900/4646470 to format the HTML and create a Twig filter/function 1 to handle it in Twig templates.

answered May 27 '20 at 07:22

Anne Douwe

681
1
5
19

This is incorrect as seen [here](https://www.darkbee.be/stack/html.php) – DarkBee May 27 '20 at 07:47

score 0 · Accepted Answer · answered May 27 '20 at 07:38

If you want to display the htmlas is for a code snippet I'd suggest you just wrap <pre> around it.

<pre>{{ html }}</pre>

demo

If you just want to preserve newlines and tabbing you could wrap the var with div and set the white-space to pre

<style>
    div.pre {
        white-space: pre;
    }
</style>
<div class="pre">{{ html }}</div>

score -2 · Answer 3 · edited May 27 '20 at 07:17

-2

I am giving the sample example solution to your questions. I hope it helps you.

{{ title }} {{ entity_print_css }} {{ content }}

Sample node--article--pdf.html.twig

{{ content.field_name }} {{ content.body }} {{ label }} {{ content.field_name.0.value }}

edited May 27 '20 at 07:17

DarkBee

16,592
6
46
58

answered May 27 '20 at 07:15

Pallavi Pareek

1
3

Not sure how this relates to the question? – DarkBee May 27 '20 at 07:18

How to print formatted html using Twig?

3 Answers3