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);
}
If you want to start the line number from negative then use the following.
Example:
<pre class="dyCodeHighlighter line-numbers" data-dyCodeHighlighter-line-start="-11" data-dyCodeHighlighter-highlight="-1,8,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-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);
}
Using the following classes:
.dyCodeHighlighter
.line-numbers
.theme-choco
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-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-gray
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
.no-thick-left-border
to remove the thick left side border.no-line-numbers-border
to remove the border separating line numbers and code.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);
}
Using the following classes:
.dyCodeHighlighter
.no-border
to remove all four sides border.line-numbers
.theme-gold
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
.no-thick-left-border
.line-numbers
.theme-gray
Using the following attributes:
data-dyCodeHighlighter-highlight="2,5,8"
data-dyCodeHighlighter-header='{"lines": "show", "filename": "person.js"}'
header JSON
{
"lines": "show", //default "hide"
"filename": "name.ext" //default ""
}
var person = {
name: "Yusuf Shakeel",
description: "Developer and YouTuber",
social: {
youtube: "https://www.youtube.com/yusufshakeel",
facebook: "https://www.facebook.com/yusufshakeel",
twitter: "https://twitter.com/yusufshakeel",
github: "https://github.com/yusufshakeel",
linkedin: "https://www.linkedin.com/in/yusufshakeel"
},
country: "IN"
};
Copyright © Yusuf Shakeel