help center

On this page

Code Highlight widget

Last Update: January 14, 2024

Elementor’s Code Highlight widget enables you to use syntax highlighting to present code examples in a readable, easy to copy format.

  1. 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
  2. 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
  3. Line Numbers: Choose Show to display line numbers next to each line
  4. 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
  5. 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.)
  6. Word Wrap: Toggle to Show/Hide word wrapping
  7. Theme: Select a theme for the code display. Both light and dark themes are available to choose from
  8. Height: Enter a height for the code box
  9. Font Size: Set your code’s font size

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article