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

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