Question

我需要突出显示源代码。我正在使用Prism。

我尝试将此代码粘贴到app的根目录中，并且已成功突出显示：

<div id="app">
  <div class="MainContainer">
    <div class="Header">
      <a href="#">past-code</a>
    </div>
    <component v-bind:is="currentView"></component>
    <code class="language-dart">void main() { } class MyClass {} </code>
    <div class="Footer">
      footer
    </div>
  </div>
</div>

但是当我在组件中放置相同的代码时，突出显示停止工作：

Vue.component('view-form', {
  template: `
    <div class="ViewCodeContainer">
    <div class="ViewCode">my code here</div>
    <code class="language-dart">void main() { } class MyClass  </code>
    <div class="ViewCodeMenu">my menu here</div>
    </div>`
})

var app = new Vue({
  el: '#app',
  data: {
    currentView: 'view-form',
    mycode: ''
  }
})

以下是浏览器中的内容：

看起来Prism在Vue组件中不起作用。有没有办法在不使用npm的情况下强制它工作？

Answer 1

新答案：

现在有一个专门用Prism.js和Vue的图书馆，请查看：https://github.com/egoist/vue-prism-component

<template>
  <prism language="javascript">{{ code }}</prism>
</template>

<script>
import Prism from 'vue-prism-component'

export default {
  data() {
    return {
      code: 'const a = b'
    }
  },
  components: {
    Prism
  }
}
</script>

旧回答：

确实有效，请看小提琴： https://jsfiddle.net/x2ax7b2d/

请确保您在所选版本中添加了您正在使用的语言（此处为dart），此处为：http://prismjs.com/download.html

但是，Prism正在以非vue兼容的方式修改DOM。更准确地说，它会将您的<code>元素转换为多个vue无法控制的元素。

所以在某些情况下你可能会遇到问题。特别是，虽然您可以在第一个渲染上集成一些模板值，但请参阅： https://jsfiddle.net/Lvn7e3n2/

......一旦它被Prism渲染，你绝对无法刷新价值，至少很容易，请参阅： https://jsfiddle.net/svzvdo1n/

此外，如果它不适用于某些执行顺序原因，您仍然可以使用（可能在您的组件的mounted事件中）使用Prism.highlightAll或Prism.highlightElement重新渲染Prism，请参阅API文档：http://prismjs.com/extending.html#api

我认为将原始Prism.highlight（）与v-html结合使用可能非常有趣，可用于高级用例。

编辑：我试过，效果很好。乐趣。这很可能是结合Vue和Prism的最佳方式。

Vue.component('view-form', {
  template: `
    <div class="ViewCodeContainer">
    <div class="ViewCode">my code here</div>
    <div v-html="highlightedCode">
    </div>
    <textarea v-model="code"></textarea>
    <div class="ViewCodeMenu">my menu here</div>
    </div>`,
    data() {
        return {
        code: 'void main() { } class MyClass'
      }
    },
    computed: {
        highlightedCode() {
        return Prism.highlight(this.code, Prism.languages.dart);
      }
    }
})

查看完整代码： https://jsfiddle.net/e87Lnvn8/

Answer 2

如果您不想包括额外的库，也可以添加这样的过滤器：

import Vue from 'vue'
import Prism from 'prismjs'

// Highlight some code
Vue.filter('highlight', (code, lang = 'javascript') => {
  return Prism.highlight(code, Prism.languages[lang], lang)
})

，然后在组件模板中使用它：

<pre>
  <code class="language-javascript" v-html="$options.filters.highlight(code)">
  </code>
</pre>

将class="language-css"与$options.filters.highlight(code, 'css')一起用于CSS等，默认为javascript。

code变量是在某个位置（通常在组件的数据部分中）定义的字符串：

data () {
  return {
    code: 'const world = "flat"'
  }
}

要使Prism CSS主题有效，请执行require('../node_modules/prismjs/themes/prism.css')中的main.js。将prism.css换成prism-tomorrow.css即可更改主题。主题列表位于node_modules/prismjs/themes目录中。

Answer 3

对我来说，问题是我需要调用：

ec2:AssociatePublicIpAddress

棱镜不在Vue组件内部工作

3 个答案: