pre标签内部标签被解析无法展示

在前端开发中，我们经常使用pre标签来展示代码内容，但是在实际开发中，当后端数据接口直接将html片段放在pre中是会被解析的，如下图

当在页面却无法显示标签内容如下图

通过查询资料得到两种解决方案

方式1 在pre标签内部套一层<xmp></xmp>标签,如下图

 

方式2 将pre内部标签进行转译

<转译成&lt; >转译成&gt;

回显效果如下

     <notificationconfiguration>
       <topicconfiguration>
           <id>ConfigurationId</id>  
            <filter>
                <s3key>
                    <filterrule>
                        <name>prefix</name>
                       <value>prefix-value</value>
                    </filterrule>
                    <filterrule>
                       <name>suffix</name>
                       <value>suffix-value</value>
                    </filterrule>
               </s3key>
            </filter>
            <topic>NS:endpoint1,endpoint2</topic>
            <event>event-type</event>
            <event>event-type</event>
            ...
        </topicconfiguration>
        ...
    </notificationconfiguration>

　　参考链接：https://blog.csdn.net/zy13608089849/article/details/79278833