Custom Style

dyCodeHighlighter

← Prev
<!-- dyCodeHighlighter js and css files already added to this website -->

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.

NameTypeDescription
backgroundColorstring(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)'
colorstring(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)'
highlightBgColorstring(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)'
highlightColorstring(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)'
borderstring(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'
borderTopstring(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'
borderRightstring(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'
borderBottomstring(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'
borderLeftstring(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'
lineNumbersBorderstring(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'
fontSizestring(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"
};
← Prev

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT