dyCodeHighlighter

Highlight code in the web page.

Click here for the documentation.

License

It's free and released under MIT License Copyright (c) 2017 Yusuf Shakeel

Setup

Put your code inbetween opening and closing pre code tag.

Example:

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

Simple

Using the .dyCodeHighlighter class.

/**
 * 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

Using the .dyCodeHighlighter and .line-numbers class.

Example:

<pre class="dyCodeHighlighter line-numbers">
<code>
  // code...
</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);
}

Showing line numbers and highlighted lines

For highlighting code lines we use the data-dyCodeHighlighter-highlight attribute.

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>
/**
 * 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

Use the data-dyCodeHighlighter-line-start attribute 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>
/**
 * 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);
}

If you want to start the line number from negative then use the following.

Example:

<pre class="dyCodeHighlighter line-numbers"
     data-dyCodeHighlighter-line-start="-11"
     data-dyCodeHighlighter-highlight="-1,8,10">
<code>
  // code...
</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: Blue

Using the following classes:

  • .dyCodeHighlighter
  • .line-numbers
  • .theme-blue

Using the following attributes:

  • data-dyCodeHighlighter-highlight="11,20,22"
/**
 * 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

Using the following classes:

  • .dyCodeHighlighter
  • .line-numbers
  • .theme-choco

Using the following attributes:

  • data-dyCodeHighlighter-highlight="11,20,22"
/**
 * 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

Using the following classes:

  • .dyCodeHighlighter
  • .line-numbers
  • .theme-dark

Using the following attributes:

  • data-dyCodeHighlighter-highlight="11,20,22"
/**
 * 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

Using the following classes:

  • .dyCodeHighlighter
  • .line-numbers
  • .theme-gray

Using the following attributes:

  • data-dyCodeHighlighter-highlight="11,20,22"
/**
 * 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);
}

No Thick Left and Line Numbers borders

Using the following classes:

  • .dyCodeHighlighter
  • .no-thick-left-border to remove the thick left side border
  • .no-line-numbers-border to remove the border separating line numbers and code
  • .line-numbers
  • .theme-blue

Using the following attributes:

  • data-dyCodeHighlighter-highlight="11,20,22"
/**
 * 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);
}

No border

Using the following classes:

  • .dyCodeHighlighter
  • .no-border to remove all four sides border
  • .line-numbers
  • .theme-gold

Using the following attributes:

  • data-dyCodeHighlighter-highlight="11,20,22"
/**
 * 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);
}

Add Header

Using the following classes:

  • .dyCodeHighlighter
  • .no-thick-left-border
  • .line-numbers
  • .theme-gray

Using the following attributes:

  • data-dyCodeHighlighter-highlight="2,5,8"
  • data-dyCodeHighlighter-header='{"lines": "show", "filename": "person.js"}'

header JSON

{
  "lines": "show",        //default "hide"
  "filename": "name.ext"  //default ""
}
var person = {
    name: "Yusuf Shakeel",
    description: "Developer and YouTuber",
    social: {
        youtube: "https://www.youtube.com/yusufshakeel",
        facebook: "https://www.facebook.com/yusufshakeel",
        twitter: "https://twitter.com/yusufshakeel",
        github: "https://github.com/yusufshakeel",
        linkedin: "https://www.linkedin.com/in/yusufshakeel"
    },
    country: "IN"
};

Donate

Feeling generous ♥ Buy me a cup of tea

Donate via PayPal


Copyright © Yusuf Shakeel