A plugin that can be used to syntax highlight code.
npm i -S embed-js embed-plugin-highlight
https://unpkg.com/embed-plugin-highlight
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>MIT @ Ritesh Kumar