Out of the blue, I decided to give this site another major upgrade to provide an even better experience for  readers. One of the key improvements I wanted to implement was enhancing the way I display Code snippets Because I have been sharing Code lately.

There are many ways to implement this, but after some research and considerations, I opt for a good solution: Prism.js. 

Not only does it make my code look more professional and is lightweight, but it also comes with an incredibly useful feature – the ability to Copy code with a single click.

 You would have come across it and interacted with it on the site.

So Why did I Opt for Prism.js of Other Options?

1. Syntax Highlighting: 

Even though I didn't integrate this feature, Prism.js is renowned for its ability to beautifully highlight code syntax, making it much more readable.

2. Ease of Use:

 It's incredibly user-friendly. I wanted a solution that would be easy for me to implement and also while  making it effortless for my readers to use like having the  Copy Code button. And prism has this.

3. Customization:

Prism.js is highly customizable. I was able to match its styling seamlessly with my website's theme, ensuring a consistent and aesthetically pleasing look.

4. Lightweight

I already have lots of scripts running on the site already so i needed something that won't have much effect on the site. I should have opt to code mine or use pre-designed structure of pioneers and other coders, (this way i won't have to rely on external script). Guess I also needed something that won't have much effect on me 🥴. Had to short(sort) route to Prism

The Impact :

Since implementing Prism.js with the copy code button, I've noticed several positive changes:

1. Somewhat Satisfaction:

Readers find it much easier to interact with my code examples. They can quickly copy code for their own projects, enhancing the practicality of my content. I'm 70 satisfied with this. I'm also aware of an issue with the code block. When you  copy a snippet with the copy button, the copy text is also copied along. When you paste your code you have to backspace the text yourself. Eish Did I just give a task? 🥴 I can't fix that anytime soon.

2. Professional Look: 

Prism.js has given my code blocks a sleek and professional appearance, which aligns perfectly with my website's design.

3. User-Friendly:

The one-click copy feature has made my content more user-friendly. I guess y'all appreciate the convenience it brings.

P.S:. I still make use of the normal pre-designed codebox made by Sora which is more easier to implement when writing beacuse of it shortcode activation. Still I work away with prism with this tool I coded to make my workflow with prism more simple and faster like using a shortcode.

You can read this if you also want to implement on your site or visit the prism website