Themes

dyCodeHighlighter

Share

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