Elementor’s Code Highlight widget enables you to use syntax highlighting to present code examples in a readable, easy to copy format.
- Language: Select your coding language to properly highlight your code’s syntax. Options include 50+ of supported languages such as Markup, HTML, XML, SVG, Mathml, CSS, Javascript, ActionScript, PHP, Ruby, etc.
- Code: Enter the snippet of code that you wish to display on the page
- Line Numbers: Choose Show to display line numbers next to each line
- Copy to Clipboard: Choose Show to allow users to copy the code with a single click on the Copy button in the upper right corner of the code box.
- Highlight Lines: Designate one or more lines to be highlighted. In the example above, lines 1 and 2 (designated by “1-2”) and line 8 are highlighted by a different background color than lines 3 through 7. Sets of numbers should be separated by a comma. (e.g. 2-7, 10, 13-15 would highlight lines 2 through 7, line 10, and lines 13 through 15.)
- Word Wrap: Toggle to Show/Hide word wrapping.
- Theme: Select a theme for the code display. Both light and dark themes are available to choose from.
- Height: Enter a height for the code box.
- Font Size: Set your code’s font size.