prism.js vue_使用Prism.js和Vue组件突出显示代码

prism.js vue

虚拟棱镜组件 (vue-prism-component)

highlight code using prism.js and vue component.

使用prism.js和vue组件突出显示代码。

View UNPKG 查看UNPKG View jsDelivr 查看jsDelivr

安装 (Install)

yarn add vue-prism-component

用法 (Usage)

First you need to load Prism somewhere in your app:

首先，您需要在应用程序的某处加载Prism ：

// yarn add prismjs
import 'prismjs'
import 'prismjs/themes/prism.css'

OR:

要么：

<link rel="stylesheet" href="https://unpkg.com/prismjs/themes/prism.css" />
<script src="https://unpkg.com/prismjs"></script>

Then In SFC:

然后在证监会中：

<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>

Or In JSX:

或在JSX中：

<Prism language="html">{`
  <div>
    <strong>foo</strong>
  </div>
`}</Prism>

For inline rendering, pass the inline prop:

对于内联渲染，请传递inline道具：

<Prism inline language="javascript" >alert("foo");</Prism>

You can also set the code using a prop:

您还可以使用道具设置代码：

import 'prismjs/components/prism-rust'

<Prism language="rust" code={ myRustCode } />

有关 (Related)

• vue-highlight-component: highlight code using highlight.js and vue component.

  vue-highlight-component ：使用highlight.js和vue组件突出显示代码。

贡献 (Contributing)

1. Fork it!

   叉子！

2. Create your feature branch: git checkout -b my-new-feature

   创建功能分支： git checkout -b my-new-feature

3. Commit your changes: git commit -am 'Add some feature'

   提交更改： git commit -am 'Add some feature'

4. Push to the branch: git push origin my-new-feature

   推送到分支： git push origin my-new-feature

5. Submit a pull request :D

   提交拉取请求：D

作者 (Author)

vue-prism-component © egoist, Released under the MIT License. Authored and maintained by egoist with help from contributors (list).

vue-prism-component © egoist ，根据MIT许可证发行。 由利己主义者在贡献者的帮助下(由list创作和维护)。

翻译自: https://vuejsexamples.com/highlight-code-using-prism-js-and-vue-component/

prism.js vue