1. vue-prism-component
vue component for prism.js
vue-prism-component
Package: vue-prism-component
Created by: egoist
Last modified: Tue, 28 Jun 2022 20:09:06 GMT
Version: 2.0.0
License: MIT
Downloads: 161,368
Repository: https://github.com/egoist/vue-prism-component

Install

npm install vue-prism-component
yarn add vue-prism-component

vue-prism-component

NPM version NPM downloads Release Package donate

Install

 yarn add vue-prism-component

CDN: UNPKG | jsDelivr

Usage

First you need to load Prism somewhere in your app:

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

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

For inline rendering, pass the inline prop:

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

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D

Author

vue-prism-component © egoist, Released under the MIT License.

Authored and maintained by egoist with help from contributors (list).

egoistian.com · GitHub @egoist · Twitter @rem_rin_rin

RELATED POST

10 Must-Know Windows Shortcuts That Will Save You Time

10 Must-Know Windows Shortcuts That Will Save You Time

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Navigating AWS Networking: Essential Hacks for Smooth Operation

Navigating AWS Networking: Essential Hacks for Smooth Operation

Achieving Stunning Visuals with Unity's Global Illumination

Achieving Stunning Visuals with Unity's Global Illumination

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code