dyCodeHighlighter
dyCodeHighlighter comes with built-in themes that we can added to change the look of the output.
By default we get the following theme.
Using the following classes:
.dyCodeHighlighter
.line-numbers
Using the following attributes:
data-dyCodeHighlighter-highlight="11,20,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); }
In the following example we will be applying the Blue theme that comes built in.
.theme-blue
<pre class="dyCodeHighlighter line-numbers theme-blue" data-dyCodeHighlighter-highlight="11,20,22"> <code> // some code goes here ... </code> </pre>
In the following example we will be applying the Choco theme that comes built in.
.theme-choco
<pre class="dyCodeHighlighter line-numbers theme-choco" data-dyCodeHighlighter-highlight="11,20,22"> <code> // some code goes here ... </code> </pre>
In the following example we will be applying the Dark theme that comes built in.
.theme-dark
<pre class="dyCodeHighlighter line-numbers theme-dark" data-dyCodeHighlighter-highlight="11,20,22"> <code> // some code goes here ... </code> </pre>
In the following example we will be applying the Gray theme that comes built in.
.theme-gray
<pre class="dyCodeHighlighter line-numbers theme-gray" data-dyCodeHighlighter-highlight="11,20,22"> <code> // some code goes here ... </code> </pre>