[求助] Vue 会解析 Markdown 中的高亮代码，导致页面显示出错

感谢关注，我按照这篇帖子配置 markdown 编辑器和显示页面，发现了一些问题：
帖子地址:博客：从 simplemde 写入 + inline-attachment 图片拖拽上传 到 parsedown...
由于在开发阶段，我简单的通过 CDN 和下载文件的方式将 js 和 css 整合到主 html 模板，所以所有页面的 css 和 js 引入都是一样的，如下：

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css">
        <link rel="stylesheet" href="/css/app.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
        <link href="https://cdn.bootcss.com/highlight.js/9.15.6/styles/a11y-dark.min.css" rel="stylesheet">

<script type="text/javascript" src="/js/app.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
      <script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
      <script>
        var simplemde = new SimpleMDE();
      </script>
      // 用于代码高亮的 JS 文件
      <script src="https://cdn.bootcss.com/highlight.js/9.15.6/highlight.min.js"></script>
      // for 代码高亮
      <script>
      hljs.initHighlightingOnLoad();
      </script>
      <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

这是我的app.js的部分代码：

const app = new Vue({
    el: '#app',

    data:{
        navbarclass:'navbar-menu',
        isNavBarClassActive:false,
        isWechatQrModalActive:false,
    },

遇到的问题是，在我的编辑器中保存一些特定的代码文本时，显示的时候会被 js 解析，似乎是 vue 解析，比如，我写出下列代码：

`` `
{{ $data }}
`` `

结果页面会打印出 app.js 中的 $data 参数：

{
    navbarclass:'navbar-menu',
    isNavBarClassActive:false,
    isWechatQrModalActive:false,
}

如果写一些其他的各种代码，还会引发混乱，实际上就是被<pre><code></code></pre>包裹的代码还会被 vue 解析和执行，比如：

div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})

在控制台里，输入

app4.todos.push({ text: '新项目' })

你会发现列表最后添加了一个新项目。

下列三种引入方法都会出错

Parsedown::instance()->text($this->content); 
Parsedown::instance()->setSafeMode(true)->text($this->content); Parsedown::instance()->setSafeMode(true)->setMarkupEscaped(true)->text($this->content); 

上述分割线中的代码，在我配置好 markdown 页面的时候就会被 vue 解析而无法正常显示，请大家看看应该怎么办，谢谢！