Themes

dyCodeHighlighter comes with built-in themes that we can added to change the look of the output.

Default theme

By default we get the following 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

<pre class="dyCodeHighlighter line-numbers"
     data-dyCodeHighlighter-highlight="11,20,22">
  <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);
}

Theme: Blue

In the following example we will be applying the Blue theme that comes built in.

Using the following classes:

• .dyCodeHighlighter this will instruct dyCodeHighlighter to style the code
• .line-numbers to show line numbers
• .theme-blue the blue theme

Using the following attributes:

• data-dyCodeHighlighter-highlight="11,20,22" to highlight line number 11, 20 and 22

<pre class="dyCodeHighlighter line-numbers theme-blue"
     data-dyCodeHighlighter-highlight="11,20,22">
  <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);
}

Theme: Choco

In the following example we will be applying the Choco theme that comes built in.

Using the following classes:

• .dyCodeHighlighter
• .line-numbers
• .theme-choco

Using the following attributes:

• data-dyCodeHighlighter-highlight="11,20,22"

<pre class="dyCodeHighlighter line-numbers theme-choco"
     data-dyCodeHighlighter-highlight="11,20,22">
  <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);
}

Theme: Dark

In the following example we will be applying the Dark theme that comes built in.

Using the following classes:

• .dyCodeHighlighter
• .line-numbers
• .theme-dark

Using the following attributes:

• data-dyCodeHighlighter-highlight="11,20,22"

<pre class="dyCodeHighlighter line-numbers theme-dark"
     data-dyCodeHighlighter-highlight="11,20,22">
  <code>
    // some code goes here ...
  </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: Gray

In the following example we will be applying the Gray theme that comes built in.

Using the following classes:

• .dyCodeHighlighter
• .line-numbers
• .theme-gray

Using the following attributes:

• data-dyCodeHighlighter-highlight="11,20,22"

<pre class="dyCodeHighlighter line-numbers theme-gray"
     data-dyCodeHighlighter-highlight="11,20,22">
  <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);
}