[求助] 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 解析而无法正常显示,请大家看看应该怎么办,谢谢!

讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!