html<code>标签，浏览器将换行代码解析到了外边成了text节点，如何解决？

问题：代码放在code标签中，但是浏览器将其解析到了外边成了text节点。

通过在txt文件中存储文章正文，使用时读取txt文件显示。测试文件（txt文件）

前端发起请求，后端读取文件返回正文，前端显示

$("#article-content").html(article_content);

结果如下

原始代码引用了highlight.js、并添加了显示行号和语言的功能，去除掉以上功能结果如下

这一问题如何解决？非常感谢！