Header - dyCodeHighlighter - dyclassroom

Add Header

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 numbers

Using the following attributes:

data-dyCodeHighlighter-highlight="11,20,22" to highlight line number 11, 20 and 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);
}