How to make html markup show up?

Question

so I am new to HTML. I am building a web app with flask. I am trying to visualise some HTML markup, but it doen't show up properly.

I have the following flask route:

@app.route('/predict',methods=['GET','POST'])
def api():
    if request.method == "POST":

        input_data = request.form['rawtext']
        output_data = model_api(input_data)
        alignedText = output_data["words"]
        predictions = output_data["predictions"]
        #response = jsonify(output_data)
        print(predictions, flush=True)

        if request.values.get('type') == 'image':
            text = output_data["text"]
            ents = turnIntoSpacyFormat((predictions))
            inp = {"text": text, "ents": ents, "title": None}
            htmlm = displacy.render(inp, style="ent", manual=True)

            return render_template('index.html', text=alignedText, predictions=predictions, htmlm=htmlm)
        else:
            return render_template('index.html', text=alignedText, predictions=predictions)
    else:
        return render_template('index.html')

The function displacy.render returns the html markup. I am passing it to index.html. The part where I am trying to print it looks the following (last few lines):

      <!-- Result Display-->
  <section class="section section-solutions-about grey darken-2">
 <div class="container white-text">

      <!--   Icon Section   -->
      <div class="row">
        <div class="col s12 m6">
          <div class="icon-block">

            <!--<h5 class="center">Your Text</h5>-->
             <p>Text:&nbsp;&nbsp;&nbsp;&nbsp; <span style="color:#0091EA;">{{ text }} </span></p>
            <!--<p class="light">{{ctext}}</p>-->
            <div class="alert alert-info" role="alert"><p>Entities: <span style="color:#0091EA;">{{ predictions }} </span></p><br/>
            </div>

          </div>
        </div>

      </div>
     <div class="entities" style="line-height: 2.5; direction: ltr"> Doesn't show up correctly</div>
     {{ htmlm }}

  </div>
</section>

I was thinking i could make it show up on the html page with that: {{ htmlm }}

Apparently that prints a string representation of the markup though. First i thought that maybe the markup was faulty. But when I enter the exact same on in the html file like one line above the {{ htmlm }} command it shows up as desired.

Here is what is printed: The first line is what is desired and shows up by pasting the html markup into the html file. The second output is what I am getting through accessing the htmlm variable.

Does anybody know how to do this?

Thanks man, that worked! Could you tell me what it does? A google search didn't yield me any results. — Malonga, Jun 20 '19 at 20:31

score 2 · Accepted Answer · answered Jun 20 '19 at 20:38

The generated HTML is being escaped; you need to mark it as {{ htmlm|safe }}.

As per the Jinja docs:

... The default configuration is no automatic escaping; for various reasons:

Escaping everything except for safe values will also mean that Jinja is escaping variables known to not include HTML (e.g. numbers, booleans) which can be a huge performance hit.

The information about the safety of a variable is very fragile. It could happen that by coercing safe and unsafe values, the return value is double-escaped HTML.

However, in Flask, auto-escaping is set as the default in many cases:

Unless customized, Jinja2 is configured by Flask as follows:

autoescaping is enabled for all templates ending in .html, .htm, .xml as well as .xhtml when using render_template().

autoescaping is enabled for all strings when using render_template_string(). a template has the ability to opt in/out autoescaping with the {% autoescape %} tag.

Flask inserts a couple of global functions and helpers into the Jinja2 context, additionally to the values that are present by default.

How to make html markup show up?

1 Answers1

Linked