Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

egoist/vue-prism-component

Repository files navigation

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

Related

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

About

highlight code using prism.js and vue component

Topics

Resources

License

Stars

Watchers

Forks

Sponsor this project

Packages

No packages published

Contributors 5

AltStyle によって変換されたページ (->オリジナル) /