Border Style

<!-- dyCodeHighlighter js and css files already added to this website -->

Default theme

By default we get the following output when we add the following class and attribute.

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

So, by default we get a thick border at the left side.

Removing the thick left side border

To remove the thick left side border we use the .no-thick-left-border class.

Using the following classes:

• .dyCodeHighlighter this will instruct dyCodeHighlighter to style the code
• .line-numbers to show line numbers
• .no-thick-left-border to remove the thick left side border

Using the following attributes:

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

<pre class="dyCodeHighlighter no-thick-left-border 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);
}

Removing the line number border

We can remove the line number border by using the .no-line-numbers-border class.

Using the following classes:

• .dyCodeHighlighter this will instruct dyCodeHighlighter to style the code
• .line-numbers to show line numbers
• .no-line-numbers-border to remove the border separating line numbers and code
• .theme-blue to apply the blue theme

Using the following attributes:

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

<pre class="dyCodeHighlighter no-line-numbers-border 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);
}

Remove border from all four sides

To remove all the four sides border we use the .no-border class.

Using the following classes:

• .dyCodeHighlighter this will instruct dyCodeHighlighter to style the code
• .line-numbers to show line numbers
• .no-border to remove all four sides border
• .theme-blue to apply the blue theme

Using the following attributes:

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

<pre class="dyCodeHighlighter no-border 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);
}