如何使.md文件中的vue代码语法高亮？

[mirari]

在webpack中使用了默认配置

{
  test: /\.md$/,
  loader: 'vue-markdown-loader'
  }

.md中的内容大致如下：

```vue
<template>
  <div id="app">
    <fullscreen ref="fullscreen" :fullscreen.sync="fullscreen">
      Content
    </fullscreen>
    <button type="button" @click="toggle" >Fullscreen</button>
  </div>
</template>
<script>
  import Fullscreen from 'vue-fullscreen'
  export default {
    methods: {
      toggle () {
        this.$refs['fullscreen'].toggle()
      }
    },
    data() {
      return {
        fullscreen: false
      }
    }
  }
</script>
```.

实际效果是整个代码块都包裹在<code v-pre class="language-vue">元素中，没有被解析高亮。 尝试把``vue改写成``html，结果编译就报错了，webpack会试图解析本该是代码示例的script块中的import语句。 求指点，非常感谢。

[mirari]

在markdown-it配置中禁用html，使用highlight.js插件并将vue改为html以后可以正常显示了。但是要怎样才能开启html支持并且不让loader解析代码块中的脚本呢？

[QingWei-Li]

2.0 中默认会执行 code block 里的脚本，看起来应该加一个开关去控制

[QingWei-Li]

升级 2.1.0 后，还是用 html，然后设置 https://github.com/QingWei-Li/vue-markdown-loader#preventextract

[lefreet]

@QingWei-Li 如果希望仅仅部分html被解析，能够支持吗？

<script>console.log('这段希望被markdowm-it解析，仅供展示')</script>

another ::: demo

<script>console.log('这段希望被markdowm-it和loader解析成在线demo')</script>

:::

[QingWei-Li]

@lefreet 参考 https://github.com/elemefe/element 自己扩展 markdown 语法

[lefreet]

@QingWei-Li 看了下已解决， 原来是取巧先把script放顶部先解析了。 另外请教下，我用node --inspect-brk ， 想调试markdown-it-container 的render， 发现并不好使， 断点或输出都没效果， 你们是用什么方式调试的？