使用Jinja模板/Flask实现带有加粗修饰的嵌套HTML段落渲染

Question

我正在寻找创建一个函数，该函数可以从句子中删除单词，然后用从字典API搜索中获取的其他单词替换被删除的单词。

非常简单，这是一个检查句子中的单词是否属于被删除单词列表的函数，如果是，则用替代单词替换，如果不是，则将原始单词添加到新字符串中。没有问题，

我需要帮助的是，如果我使用F字符串并添加文本修饰符以在HTML标记中解释，这样做的方式是正确的吗？我只想加粗替换的文本

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)

当我在浏览器中检查HTML标记时，包含新字符串的段落元素被正确编译，例如

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

然而问题是，最终的标记中隐含了<b>，但没有被渲染出来。 我在这里漏掉了什么吗？

在渲染过程中，段落被调用到的Flask模板标记如下，包含问题[0]的<p>是我讨论的新渲染字符串值。

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>

感谢您的帮助！

Answer 1

默认情况下，Jinga会自动转义变量中的字符，如 >、<（当使用{{question[0]}}时）。

如果你对question[0]的构造方式有信心，你可以通过将<p id="question">{{question[0]}}</p>改为<p id="question">{{question[0] | safe }}</p>来绕过这种自动转义。

更多信息请参考：https://jinja.palletsprojects.com/en/3.0.x/templates/#html-escaping