How to: Handle special characters in your Card

Sometimes the input the Card receives from the JSON or RSS feed source can contain special characters such as inverted commas " and ', ampersands & or greater and less than signs < and >.

For example you may have a news article with the title "Digital" services coming this year

If your Card uses this title, let's say as <at-link label="{item.title}">, then this would be rendered as <at-link label=""Digital" services coming this year">. Thus the rendered HTML is invalid through the use of the " inside the label attribute.

Liquid offers an escape function that automatically converts special characters into compatible character entities.

To use this function add | escape to your Liquid placeholder, for instance:

<at-link label="{{item.title | escape}}">

This is how the function converts special characters:

& → &amp;
> → &gt;
< → &lt;
" → &quot;
' → &#39;
Got an issue? Or want to submit feedback?
Submit your feedback

Our new Feedback and Issue Tracker is built on GitHub Issues. Just leave your comment below and you can track our team resolve it, or browse issues others have already submitted.

Read how to use the Feedback and Issue Tracker