Highlight code in the web page.
It's free and released under MIT License Copyright (c) 2017 Yusuf Shakeel
Put your code inbetween opening and closing pre code
tag.
Example:
<pre class="dyCodeHighlighter"> <code> // code... </code> </pre>
Using the .dyCodeHighlighter
class.
/**
* 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);
}
Using the .dyCodeHighlighter
and .line-numbers
class.
Example:
<pre class="dyCodeHighlighter line-numbers"> <code> // code... </code> </pre>
/**
* 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);
}
For highlighting code lines we use the data-dyCodeHighlighter-highlight
attribute.
In the following example line 11, 20 and 22 are highlighted.
Example:
<pre class="dyCodeHighlighter line-numbers" data-dyCodeHighlighter-highlight="11,20,22"> <code> // code... </code> </pre>
/**
* 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);
}
Use the data-dyCodeHighlighter-line-start
attribute to start the line number from a given value.
In the following example line number starts from 10.
Example:
<pre class="dyCodeHighlighter line-numbers" data-dyCodeHighlighter-line-start="10"> <code> // code... </code> </pre>
/**
* 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);
}
Using the following classes:
.dyCodeHighlighter
.line-numbers
.theme-dark
Using the following attributes:
data-dyCodeHighlighter-highlight="11,20,22"
/**
* 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);
}
Using the following classes:
.dyCodeHighlighter
.line-numbers
.theme-blue
Using the following attributes:
data-dyCodeHighlighter-highlight="11,20,22"
/**
* 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);
}
Copyright © Yusuf Shakeel
MIT License