# kdu-prism-component

## Install

```bash
yarn add kdu-prism-component
```

CDN: [UNPKG](https://unpkg.com/kdu-prism-component/dist/) | [jsDelivr](https://cdn.jsdelivr.net/npm/kdu-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:

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

<script>
import Prism from 'kdu-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 } />
```