I have several type:String fields in the jcr that contain html tags in them. I need to render on my page such that the html tags are injected into the dom rather than be escaped. But right now, they are getting escaped.
For example, in the jcr I might have this field

In the browser, that is ending up like this:
<p><p>Texting with your feet is a rare skill.</p></p>
I don't know if this is relevant to my question, but the jcr fields I'm trying to render are in the /jcr:content/data/master of a content fragment and get populated from entry to a multi-line field in a content fragment model. I have the ContentFragment in my custom component java code, so for all the single-line text fields on that model, the following approach works fine for me.
Custom component java code:
@Override
public String getTitle() {
ContentElement titleElement = pageContentFragment.getElement("article-title");
return titleElement.getContent();
}
Custom component htl:
<section
data-sly-use.article="com.ab.mysite.core.models.Article"
data-sly-use.placeholderTemplate="core/wcm/components/commons/v1/templates.html"
class="article-style" tabindex="0">
<h1>${article.title}</h1>
</section>
However, for those multi-line text fields, the same approach results in escaped html that actually causes the html tags to be displayed on the page.
How can I use my component code to prevent AEM from escaping the html for these specific fields?