dyCodeHighlighter
We can add header to the code by using the data-dyCodeHighlighter-header
attribute.
This attribute takes value in JSON format.
header JSON:
{
"lines": "show", //default "hide"
"filename": "name.ext" //default ""
}
In the following example we are setting the header to show number of lines in the code and the file name.
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"}'
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"
};
We can even go with the the plain default theme.
Using the following classes:
.dyCodeHighlighter
this will instruct dyCodeHighlighter to style the code.line-numbers
to show line numbersUsing the following attributes:
data-dyCodeHighlighter-highlight="11,20,22"
to highlight line number 11, 20 and 22data-dyCodeHighlighter-header='{"lines": "show", "filename": "pattern.js"}'
<pre class="dyCodeHighlighter line-numbers"
data-dyCodeHighlighter-highlight="11,20,22"
data-dyCodeHighlighter-header='{"lines": "show", "filename": "pattern.js"}' >
<code>
// some code goes here ...
</code>
</pre>
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);
}
ADVERTISEMENT