dyCodeHighlighter

Highlight code in the web page.

Download GitHub

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

header JSON

{
  "lines": "show",        //default value: "hide"
  "filename": "name.ext"  //default value: ""
}

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"}'
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"
};

Custom Style

custom style JSON

{
  /**
   * this is for the background color
   * optional
   * value in valid color name, hex, rgb, rgba
   */
  backgroundColor: '#fff',

  /**
   * this is for the color of the text
   * optional
   * value in valid color name, hex, rgb, rgba
   */
  color: '#333',

  /**
   * highlighted line background color
   * optional
   * value in valid color name, hex, rgb, rgba
   */
  highlightBgColor: '#fff8dc',

  /**
   * highlighted line text color
   * optional
   * value in valid color name, hex, rgb, rgba
   */
  highlightColor: '#333',

  /**
   * this is to style the border - top right bottom left
   * optional
   * value in valid form 'width style color' like '5px solid #aaa' or 'none'
   */
  border: '1px solid #aaa',

  /**
   * this is to style the top border
   * optional
   * value in valid form 'width style color' like '5px solid #aaa' or 'none'
   */
  borderTop: '1px solid #aaa',

  /**
   * this is to style the right border
   * optional
   * value in valid form 'width style color' like '5px solid #aaa' or 'none'
   */
  borderRight: '1px solid #aaa',

  /**
   * this is to style the bottom border
   * optional
   * value in valid form 'width style color' like '5px solid #aaa' or 'none'
   */
  borderBottom: '1px solid #aaa',

  /**
   * this is to style the left border
   * optional
   * value in valid form 'width style color' like '5px solid #aaa' or 'none'
   */
  borderLeft: '1px solid #aaa',

  /**
   * font size
   * optional
   * value in valid font size unit like: 20px
   */
  fontSize: '12px',

  /**
   * line numbers border
   * optional
   * value in valid form 'width style color' like '5px solid #aaa' or 'none'
   */
  lineNumbersBorder: '1px solid #999'
}

Using the following classes:

  • .dyCodeHighlighter
  • .line-numbers

Using the following attributes:

  • data-dyCodeHighlighter-highlight="2,5,8"
  • data-dyCodeHighlighter-custom-style='{"backgroundColor": "#666", "color": "#fff", "highlightBgColor": "#eee", "highlightColor": "#111", "border": "2px solid #999", "fontSize": "12px", "lineNumbersBorder": "2px solid #fff"}'
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