JavaScript Library To Syntax Highlighting Code In Notepad++ | CodeHighlighter

CodeHighlighter library created to highlight code in websites. So if you have an element on your page that has a code, just call a function on it and everything will get a certain class. Then it makes the CSS look similar to what you’re used to from Notepad++.

notepad syntax highlighting in jquery, notepad syntax highlighting not working, notepad highlight text jquery plugin, notepad highlight line, how to highlight in notepad

[Live] A Code Editor based on CodeMirror | Syntax Highlighter | HTML Editor

How to make use of it:

1. Code Highlighter requires the jQuery library to be loaded on your web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

2. Load JavaScript and CSS from Code Highlighter on the webpage.

<link href="CodeHighlighter.css" rel="stylesheet">
<script src="CodeHighlighter.js"></script>

3. Wrap the code snippets in a code tag with the corresponding CSS class.

<code class="html">
...
</code>

<code class="css">
...
</code>

<code class="js">
...
</code>

<code class="php">
...
</code>

4. Call the function on the code tags to enable the code tags.

$(document).ready(function() {

  $('.html').highlightCode('html');
  $('.css').highlightCode('css');
  $('.js').highlightCode('js');
  $('.php').highlightCode('php');

});

Notepad++ Style Syntax Highligting, CodeHighlighter Plugin/Github, notepad highlight search results


See Demo And Download

Official Website(LBBO): Click Here

This superior jQuery/javascript plugin is developed by LBBO. For extra Advanced Usages, please go to the official website.

Related Posts

vuejs-dialog-plugin

Vuejs Lightweight Prompt Based On Promise And Confirm Dialog

VUEJS DIALOG PLUGIN is a lightweight, promise-based, prompt, and dialog-based alert. Important updates The dialog will always be resolved by an object. (ie a callback to continue…

Lightweight-Flexbox-Carousel-Plugin

Simple and Lightweight Flexbox Carousel Plugin With JavaScript | flexCarousel.js

Flexbox Responsive Slider – flexCarousel.js plugin is a simple and lightweight plug-in from Flexbox carousel ES6 JavaScript. An unofficial fork by Slick Carousel. Flex Carousel is a…

bootstrap-5-multi-level-dropdown

Multi-Level Dropdown Works With Bootstrap 5

Bootstrap 5 Multi-Level Dropdown, using the official HTML without adding additional CSS styles and classes, it’s just like the original support. Not all of the things listed…

jquery-confirmation-dialog

JQuery UI Built Dynamic Modal That Uses Bootstrap | confirm.js

confirm.js is to use confirm modal created using JQuery and Bootstrap. Put events in each custom button in your web application. Easy to implement, saves time. Requirements…

bootstrap-responsive-navbar

[Bootstrap 5] Responsive Navbar With off-canvas Display on Mobile

The Bootstrap 5-off-canvas navigation menu is a responsive navigation system that combines BS5 components outside of the canvas and navbar. Must Read: Pure CSS Mobile-friendly Responsive Table…

Extract-The-Dominant-Color-From-Image

Extract The Dominant Color From Image | jquery.primarycolor.js

Primary Color jQuery plugin that gets the base color of an image. A callback event that lets you apply RGB coloring to any HTML element is supported….