dyCodeHighlighter
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 numbersUsing 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.
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 borderUsing 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);
}
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 themeUsing 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);
}
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 themeUsing 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);
}
ADVERTISEMENT