Add Prism.js to a Vue Application.

#webdev #tutorial #vue #programming

Hey there,

We can now continue from where we left. How's been your week so far?. Thanks for keeping up with my tutorials. Before I pick from where we left here is the list of our next tutorials. Remember our objective is to practically learn different approaches between Serverless, Container, and Server approaches.

How to integrate Passport to handle authentication to Node, Express, Mongo DB, and Vue application.
JWT Authentication and Authorization in a Node, Express, Mongo DB, and Vue.
API Gateway, Lambda, DyanamoDB, and Vue.
Amplify and Vue application.
Socket.io, Node, Express, Mongo DB, and Vue

Oh! I will be creating courses for most of our tutorials for those who will be interested keep close.

Let me cut to the chase and give a short tutorial for someone who wants to add a code section in their application and wants to add some code highlighting.

Let us use Prism.js. You can use highlight.js or any other you prefer. Today we will talk about adding Prism to Vue.

A. Install the package in your application



yarn add prismjs OR npm install prismjs

B. In the component that has your code that you want to highlight, let us set Prism.manual to true before the DOMContentLoaded event is fired and import prism and theme we want to use.



<script>
import Prism from "prismjs";
import "prismjs/themes/prism.css"; // you can change
export default {
  data() {
    return {
      //
    };
  },
  // mounted
  mounted() {
    window.Prism = window.Prism || {};
    window.Prism.manual = true;
    Prism.highlightAll(); // highlight your code on mount
  }
};
</script>

C. You can change to the theme you prefer. There are default themes installed with Prism. Go to the folder of prism in node.modules and check the themes folder.

That is all we have to do to integrate Prism into a Vue application. How to implement HTML language. To implement javascript and other languages is straight forward.



<pre><code class="language-javascript">
  // code here for example
  function hello(){
     console.log(Hello World)
  } 
</code></pre>

For HTML you will have to implement differently:



<pre><code class="language-markup"><script type="prism-html-markup">
  // code here
 <div>Hello World</div>
</code></pre>

Hope this will help someone who wants to start with prism.js and Vue application. For more details about Prism.js https://prismjs.com/, https://prismjs.com/docs/index.html

Watch out for the next tutorials.

Thank you.