dyCodeHighlighter
dyCodeHighlighter is a small plugin to highlight code in your web page. It's free and released under MIT License.
Following are the ways you can get the dyCodeHighlighter files.
git clone https://github.com/yusufshakeel/dyCodeHighlighter.git
npm install dycodehighlighter
https://www.jsdelivr.com/package/npm/dycodehighlighter
To use dyCodeHighlighter to highlight your code you have to first include the JavaScript and Stylesheet files of the project which is present inside the dist folder.
dyCodeHighlighter targets the pre tag having the .dyCodeHighlighter class.
pre
.dyCodeHighlighter
Your code must reside inbetween the opening and closing pre code tag.
pre code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>dyCodeHighlighter</title> <!-- dyCodeHighlighter stylesheet --> <link rel="stylesheet" href="path/to/dist/css/dycodehighlighter.min.css"> </head> <body> <pre class='dyCodeHighlighter'> <code> // some code goes here... </code> </pre> <!-- dyCodeHighlighter javascript --> <script src="path/to/dist/js/dycodehighlighter.min.js"></script> <script>dyCodeHighlighter.init();</script> </body> </html>
To start using dyCodeHighlighter in your web page simply add the .dyCodeHighlighter class in the opening pre tag.
Example:
<pre class="dyCodeHighlighter"> <code> // code... </code> </pre>
Sample Output:
/** * This is a sample program to print the following pattern. * * H * Ha * Hap * Happ * Happy */ var str = "Happy", len = str.length, r, c, pattern; for (r = 0; r < len; r++) { pattern = ''; for (c = 0; c <= r; c++) { pattern += str[c]; } console.log(pattern); }
To show line numbers all we have to do is add the .line-numbers class in the opening pre tag.
.line-numbers
<pre class="dyCodeHighlighter line-numbers"> <code> // code... </code> </pre>
Sample output:
var x = 10; var y = 20; var sum = x + y; console.log(sum);
To highlight lines of code we use the data-dyCodeHighlighter-highlight attribute in the opening pre tag.
data-dyCodeHighlighter-highlight
In the following example line 11, 20 and 22 are highlighted.
<pre class="dyCodeHighlighter line-numbers" data-dyCodeHighlighter-highlight="11,20,22"> <code> // code... </code> </pre>
We use the data-dyCodeHighlighter-line-start attribute in the opening pre tag to start the line number from a given value.
data-dyCodeHighlighter-line-start
In the following example line number starts from 10.
<pre class="dyCodeHighlighter line-numbers" data-dyCodeHighlighter-line-start="10"> <code> // code... </code> </pre>
var a = 10; var b = 20; var c = 30; var sum = a + b + c; var average = sum / 3;