# vue-prism-component

> vue component for prism.js

Latest version **2.0.0** (published 2021-01-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-prism-component
pnpm add vue-prism-component
yarn add vue-prism-component
bun add vue-prism-component
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2021-01-09 |
| First published | 2017-06-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 11.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 158 |
| Author | egoist |
| Maintainers | egoist, rem |

## Links

- npm: https://www.npmjs.com/package/vue-prism-component
- Repository: https://github.com/egoist/vue-prism-component
- Homepage: https://egoistian.com/vue-prism-component/
- Issues: https://github.com/egoist/vue-prism-component/issues
- npm.io page: https://npm.io/package/vue-prism-component

## Recent versions

- 2.0.0 (latest) — 2021-01-09
- 1.2.0 — 2020-04-12
- 1.1.1 — 2018-10-24
- 1.1.0 — 2018-10-17
- 1.0.1 — 2017-07-13
- 1.0.0 — 2017-06-30

## README

# vue-prism-component

[![NPM version](https://img.shields.io/npm/v/vue-prism-component.svg?style=flat)](https://npmjs.com/package/vue-prism-component) [![NPM downloads](https://img.shields.io/npm/dm/vue-prism-component.svg?style=flat)](https://npmjs.com/package/vue-prism-component) [![Release Package](https://github.com/egoist/vue-prism-component/workflows/Release%20Package/badge.svg)](https://github.com/egoist/vue-prism-component/actions?query=workflow%3A%22Release+Package%22)  [![donate](https://img.shields.io/badge/$-donate-ff69b4.svg?maxAge=2592000&style=flat)](https://github.com/sponsors/egoist)

## Install

```bash
yarn add vue-prism-component
```

CDN: [UNPKG](https://unpkg.com/vue-prism-component/dist/) | [jsDelivr](https://cdn.jsdelivr.net/npm/vue-prism-component/dist/)

## Usage

First you need to load `Prism` somewhere in your app:

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

OR:

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

Then In SFC:

```vue
<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:

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

For inline rendering, pass the `inline` prop:

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

You can also set the code using a prop:

```js
import 'prismjs/components/prism-rust'

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

## Related

- [vue-highlight-component](https://github.com/egoist/vue-highlight-component): highlight code using highlight.js and vue component.


## 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](https://github.com/egoist), Released under the [MIT](./LICENSE) License.<br>
Authored and maintained by egoist with help from contributors ([list](https://github.com/egoist/vue-prism-component/contributors)).

> [egoistian.com](https://egoistian.com) · GitHub [@egoist](https://github.com/egoist) · Twitter [@rem_rin_rin](https://twitter.com/rem_rin_rin)

---
_Source: https://npm.io/package/vue-prism-component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._