Custom Style

dyCodeHighlighter

Share

To apply custom style use the data-dyCodeHighlighter-custom-style attribute in the opening pre tag.

Custom style is in JSON format and following properties can be set.

Name Type Description
backgroundColor string (Optional) This is for the background color.
Value can be color name or in hex, rgb, rgba form.
Example: 'red', '#fff', 'rgb(10, 20, 30)'
color string (Optional) This is for the text color.
Value can be color name or in hex, rgb, rgba form.
Example: 'red', '#fff', 'rgb(10, 20, 30)'
highlightBgColor string (Optional) This is for the background color of the highlighted lines.
Value can be color name or in hex, rgb, rgba form.
Example: 'red', '#fff', 'rgb(10, 20, 30)'
highlightColor string (Optional) This is for the text color of the highlighted lines.
Value can be color name or in hex, rgb, rgba form.
Example: 'red', '#fff', 'rgb(10, 20, 30)'
border string (Optional) This is for styling the border - top, right, bottom and left.
Value can be in 'width style color' form or 'none'.
Example: '5px solid #aaa'
borderTop string (Optional) This is for styling the top border. If absent then border style will be used.
Value can be in 'width style color' form or 'none'.
Example: '5px solid #aaa'
borderRight string (Optional) This is for styling the right border. If absent then border style will be used.
Value can be in 'width style color' form or 'none'.
Example: '5px solid #aaa'
borderBottom string (Optional) This is for styling the bottom border. If absent then border style will be used.
Value can be in 'width style color' form or 'none'.
Example: '5px solid #aaa'
borderLeft string (Optional) This is for styling the left border. If absent then border style will be used.
Value can be in 'width style color' form or 'none'.
Example: '5px solid #aaa'
lineNumbersBorder string (Optional) This is for styling the line numbers border that separate the line numbers and the code lines.
Value can in 'width style color' form or 'none'.
Example: '5px solid #aaa'
fontSize string (Optional) This is for the font size of the text.
Value in valid font size unit.
Example: '20px'

Example

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": "14px", "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"
};
Share