Custom Style

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

Example

Recently Updated