Using Jinja template/Flask to implement nested HTML paragraph rendering with bold modification

Question

I'm looking to create a function that removes words from a sentence and then replaces the removed word with other words obtained from a dictionary API search.

Very simple, this is a function that checks if a word in a sentence belongs to the list of removed words, if so, replaces it with the replacement word, if not, adds the original word to a new string. no problem,

What I need help with is if I use an F-string and add text modifiers to be interpreted in the HTML markup, is this the correct way to do it? I just want to bold the replaced text

if word in removed_words:
               print("our word for the dictionary is", word)  
               res =  dictionary.meaning(word.capitalize())

               if res != None:
              
                   if res.get('Noun'):
                      print("our definition is", "---> ", res['Noun'][0], " <----")
                      remaining_words.append(f"""{res['Noun'][0]}""")

                   elif res.get('Verb'):
                        print("our definition is", "---> ", res['Verb'][0], " <----")
                        remaining_words.append(f"""{res['Verb'][0]}""")

               else:
                    remaining_words.append(f"""{r.word()}""")
             
           else:
                remaining_words.append(word)

When I inspect the HTML markup in the browser, the paragraph element containing the new string is compiled correctly, e.g.

<p>This is the new sentence with the <b>replaced word</b> and the other words</p>

However, the problem is that <b> is implicit in the final markup, but is not rendered. Am I missing something here?

During the rendering process, the Flask template tag that the paragraph is called is as follows, and the <p> containing question [0] is the new rendering string value I discussed.

h3 class="header3 head4">{{heading}}

<p id="question">{{question[0]}}</p>

<button id="showanswer">Show the Answer</button>
<p id="answer">{{question[1]}}</p>

<form  id="submitanswer" method="post", action="/quiz/processanswer">
<input id="useranswer" type="text" name="answer" placeholder="Enter your answer">
<input id="hiddenanswer" name="hiddenanswer" type="text" value="{{question[1]}}" 
 id="hiddenanswer">
 <button id="answerSubmit">Submit</button>
 </form>

thanks for your help!

Answer 1

By default, Jinga will automatically escape characters in variables, such as >, < (when using {{question[0]}}).

If you are confident in the way question[0] is constructed, you can change it by <p id="question">{{question[0]}}</p> Use <p id="question">{{question[0] | safe }}</p> to bypass this automatic escaping.

For more information, please refer to: https://jinja.palletsprojects.com/en/3.0.x/templates/#html-escaping