Partially run code as html and as text

Question

Introduction

I'm currently creating a templatebuilder where users can build a template for an app. The user can drag and drop multiple blocks, such as text blocks and 'custom code' blocks. The template will be parsed within an app. Right now, a template could look like this:

<section>
    <div class="row">
        <div class="col-sm-12">
            <section data-type="code">
                <#code></#code>
            </section>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12" data-type="container-content">
            <section data-type="text">
                <u>Lorem</u> ipsum
            </section>
        </div>
    </div>
</section>

So, this template contains two elements (see the data-type attribute): one part is custom written code. Here, the user wrote custom code, including Apache Freemarker code. The second part is custom written text.

Situation

The code above will be used in two different ways.

• Exactly this code will be used inside an app that's using the template (so that's why they should be able to write Freemarker code, because this will be parsed).
• On my website, the user should be able to edit this template. Because the code is stored in the database as written above, there is a problem:

Problem

When I directly render the template in the web-interface, the text part will render correctly with the <u></u> tags, but the code part will be rendered as html as well which might cause weird behaviour (such as the freemarker notation </#list> being auto-converted to <!--#list-->).

But, if I render the full template as text only, the text part with the <u></u> tags will not be rendered as well.

Expected outcome

I want to read the template variable with JavaScript / jQuery and then parse each data-type with text as html, and with code as text.

How can I loop through the template and do this?

Answer 1

There is an alternative syntax that uses square brackets instead of angle brackets.

Check if it solves your tag identifying problem without messing any other feature.

https://freemarker.apache.org/docs/dgui_misc_alternativesyntax.html

EDIT 1

To show the source code inside the <#code> tags when the HTML is parsed, you could escape it in your database (escape html special chars like <, > and & to &lt; &gt; and &amp;). So, when it is rendered, no html tags will be created in the code content and the document won't be messed up.

Then, you can render all the content of the database directly as HTML: text will keep markup and code will be text.

To do that modification, you can use regular expressions to find what is enclosed by <#code> tags and replace with the HTML-escaped equivalent. The exact way to do it depends on the language you will be using for the job, as there are some differences in RegExes and in the available escape funcions.

EDIT 2

If you are loading the content using AJAX, you have the chance of applying the replace in javascript, AFTER the content was obtained from the server, keeping your database as it is.