dyCodeHighlighter

Setup

Put your code inbetween opening and closing pre code tag.

Example:

<pre class="dyCodeHighlighter">
<code>
  // code...
</code>
</pre>

Simple

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);
}

Showing line numbers

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);
}

Showing line numbers and highlighted lines

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);
}

Start line numbers from different value

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);
}

Theme: Blue

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);
}

Theme: Choco

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);
}

Theme: Dark

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);
}

Theme: Gray

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);
}

No Thick Left and Line Numbers borders

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);
}

No border

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);
}

Add Header

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"
};