dyCodeHighlighter
We can add header to the code by using the data-dyCodeHighlighter-header attribute.
data-dyCodeHighlighter-header
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.
data-dyCodeHighlighter-highlight="11,20,22"
data-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); }