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