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 in the field. This may also use Dynamic Tag data from ACF or other plugins
- 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 by entering a value or using a Dynamic Tag. 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