Home Jquery Scripts JavaScript Library To Syntax Highlighting Code In Notepad++ | CodeHighlighter

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

Jquery Scripts webcodeflow · September 23, 2022 · 0 Comment

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