How to parse String HTML with Freemarker variables

I am retrieving a String value from the database which contains a mix of HTML and Freemarker syntax.

Like so:

<p>${fragment.title}</p>
<table id='resultsTable' class='material-table'>
    <tr>
        <th>Instruction</th>
        <th>Action</th>
    </tr>
Test
</table>

The following is how I access the above String in the Freemarker template:

<#include "inc/header.ftl">
<body>
<#include "inc/navigation.ftl">
<div class="container">
    <div class="row">
        <#if fragments??>
            <#list fragments as fragment>
                <div class="col-sm-6">
                    <div class="fragment">
                        ${fragment.design?html}
                    </div>
                </div>              
            </#list>
        </#if>
    </div>
</div>
</body>
<#include "inc/footer.ftl">

But the output is not quite right:

<p>${fragment.title}</p> <table id='resultsTable' class='material-table'> <tr> struction</th> </th> </tr> ddd </table>

How do I use Freemarker to parse the HTML and parse the value of ${fragment.title} at the same time?

Solution

Instead of ${fragment.design?html}, use <@fragment.design?interpret />.