How to ad html tag inside trans directive in magento2

Question

I am trying to add a <span> tag inside a trans directive but, it is not working for me.

Below is what I am trying:

<h1 class="section-heading order-number-heading">{{trans 'Your Invoice <span class="number">#%invoice_id</span> for Order <span class="number">#%order_id</span>' invoice_id=$invoice.increment_id order_id=$order.increment_id}}</h1>

The output I am getting for it is that the <span> becomes part of the text.

Your Invoice <span class="number">#000000061</span> for Order <span class="number">#000000172</span> ----> this is the output I get.

How can I add tag inside trans directive so I can style specific parts of the text separately? I am doing all this in a custom email template.

Answer 1

Try this:-

Just add " |raw " before closing trans( }} )

<h1 class="section-heading order-number-heading">{{trans 'Your Invoice <span class="number">#%invoice_id</span> for Order <span class="number">#%order_id</span>' invoice_id=$invoice.increment_id order_id=$order.increment_id|raw}}</h1>