Ajax has been around for a long time now. I remember using it way back in 2004 when I was building interactive websites. Back then it was still kind of cutting edge and I remember being really excited to use it. It was the first time that I really felt like I didn’t need to reload the whole page just to update some content.
I think that Ajax ultimately led to things like Facebook’s partial page loading and so on. But this also means that today, lots of people don’t even realize what is happening when they use Facebook, Gmail, or even something like Twitter.
In this era of web applications and single page sites, we can no longer rely on the whole page reloading. We need a way to update our JavaScript code when the user visits a different page on our site. Here’s how we can do it with PrismJS:
Prism.js is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s used in thousands of websites, including some of those you visit daily.
The team at Prismjs.com has recently released an amazing product. They have created a way to use frameworks like Bootstrap and AngularJS with Prism that leverages the full power of their product without requiring additional work by the user.
Prism is one of the best open source projects available on GitHub. It allows you to create a host of applications, including web sites, mobile apps, and even desktop programs. One of the best features is that it can be used in any language, regardless of what programming language you use.
I am excited about this release, as it will allow me to create many different types of applications for the web. The possibilities are endless!
Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s used in thousands of websites, including some of those you visit daily.
Prism is an open source project created and maintained by Lea Verou with the help of many contributors.
Here are some of Prism’s features:
Simple. Prism is not difficult to setup or use. It’s also very lightweight and doesn’t depend on any libraries.
Extensible. You can easily add your own language definitions and plugins.
Lightweight. Core only weights 1KB gzipped and has no dependencies.
Robust. Prism works in all modern browsers (Chrome, Firefox, Safari, Edge and IE9+) as well as on NodeJS servers through jsdom.
Themes & Plugins
Prism comes with a few themes out of the box (including a couple dark ones). If you don’t like them, there are many more available online that you can use! Also check out plugins that add extra functionality like line highlight and line numbers!
PrismJS has been around for some time and is a great way to highlight code samples. It even works well with Markdown, which is awesome!
But, Prism doesn’t support Ajax content out of the box. In this post I’ll show you how to fix that.
Here’s a sample usage of Prism with ajax content. Click the tabs to load in new content.
If you look in the JavaScript console you will see that the first time the tab is loaded it tries to highlight the code snippet but fails. On a subsequent click it correctly highlights the code snippet. The reason for this is that on first load Prism doesn’t know about the new code snippet because it hasn’t been added to the DOM yet.
As a web developer, I am always looking for ways to make my site look better. PrismJS is a great tool that I use to do syntax highlighting. It is easily customizable and does not have any external dependencies. You can even use it in non-browser environments via NodeJS, Electron, and even on your Raspberry Pi.
I use PrismJS on this website to show code examples when needed. If you look at the code for this page, you will see that I am using coding language classes to trigger this behavior. When the page loads, Prism will fetch the content of each element with one of these classes and format it properly for display.
Prism.js is a javascript library that allows you to create syntax highlighted HTML code. I recently started using this library to create simple examples in my blog posts and I want to share my experiences with you.
Syntax highlighting is a useful feature of many text editors. It helps you to read and understand the source code quicker and easier because it colorizes the code based on its type: for example all strings are marked in red, all comments are green, keywords like if-statement or for-loop are blue, etc.. Here is an example: