Documentation - dyCodeHighlighter - dyclassroom

dyCodeHighlighter is a small plugin to highlight code in your web page. It's free and released under MIT License.

Get the files

Following are the ways you can get the dyCodeHighlighter files.

You can download the latest release from dyCodeHighlighter GitHub repository.

Clone the repo:

git clone https://github.com/yusufshakeel/dyCodeHighlighter.git

Install with npm:
```
npm install dycodehighlighter
```

From jsDelivr CDN:

https://www.jsdelivr.com/package/npm/dycodehighlighter

How to use?

To use dyCodeHighlighter to highlight your code you have to first include the JavaScript and Stylesheet files of the project which is present inside the dist folder.

dyCodeHighlighter targets the pre tag having the .dyCodeHighlighter class.

Your code must reside inbetween the opening and closing pre code tag.

Sample HTML template to get started

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dyCodeHighlighter</title>
    <!-- dyCodeHighlighter stylesheet -->
    <link rel="stylesheet" href="path/to/dist/css/dycodehighlighter.min.css">
</head>
<body>
    
    <pre class='dyCodeHighlighter'>
      <code>
        // some code goes here...
      </code>
    </pre>

    <!-- dyCodeHighlighter javascript -->
    <script src="path/to/dist/js/dycodehighlighter.min.js"></script>
    <script>dyCodeHighlighter.init();</script>
</body>
</html>

Simple example

To start using dyCodeHighlighter in your web page simply add the .dyCodeHighlighter class in the opening pre tag.

Example:

<pre class="dyCodeHighlighter">
<code>
  // code...
</code>
</pre>

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

Showing line numbers

To show line numbers all we have to do is add the .line-numbers class in the opening pre tag.

Example:

<pre class="dyCodeHighlighter line-numbers">
<code>
  // code...
</code>
</pre>

Sample output:

var x = 10;
var y = 20;
var sum = x + y;
console.log(sum);

Showing line numbers and highlighted lines

To highlight lines of code we use the data-dyCodeHighlighter-highlight attribute in the opening pre tag.

In the following example line 11, 20 and 22 are highlighted.

Example:

<pre class="dyCodeHighlighter line-numbers" data-dyCodeHighlighter-highlight="11,20,22">
<code>
  // code...
</code>
</pre>

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

Start line numbers from different value

We use the data-dyCodeHighlighter-line-start attribute in the opening pre tag to start the line number from a given value.

In the following example line number starts from 10.

Example:

<pre class="dyCodeHighlighter line-numbers" data-dyCodeHighlighter-line-start="10">
<code>
  // code...
</code>
</pre>

Sample output:

var a = 10;
var b = 20;
var c = 30;

var sum = a + b + c;

var average = sum / 3;