embed-plugin-highlight

embed-plugin-highlight

A plugin that can be used to syntax highlight code.

Installation

npm i -S embed-js embed-plugin-highlight

CDN

https://unpkg.com/embed-plugin-highlight

Usage

You need Prism.js to use this plugins. So import the necessary libraries to support it.

<!-- import the theme of your choice -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/themes/prism-dark.css" />

<!-- import the umd build of prism.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js">  

Note : On the server, the plugin automatically imports prism.js from node_modules. But it doesn't bundle the PrismJS library with the umd build to keep the size to minimal. Technically prismjs = isServer ? require('prismjs') : window.Prism.

import EmbedJS from 'embed-js'
import highlight from 'embed-plugin-highlight'
import prismjs from 'prismjs'

const x = new EmbedJS({
  input: document.getElementById('element'),
  plugins: [
  basicAudio({
    regex: /audiRegex/gi, // in case you want to define a custom regex
    prismjs: prismjs, // By default it takes window.Prism on client side and global.Prism on server side.
    template(args) {
      // optional template
    },
    onLoad(element) {} // in case you want to do something when the component has loaded on the client.
   })
 ]
})

This will convert

\`\`\`js
 const x = "hello world"
\`\`\`

into

<pre class="language-js">
  <code class="language-js">
    const x = "hello world"
  </code>
</pre>

Example on CodePen

License

MIT @ Ritesh Kumar