Code Highlight (Pro)

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

Share it on social networks

Was this article helpful?

Get Started With Elementor Today

Join millions of professionals who use Elementor to build WordPress websites faster and better than ever before

On this page

Birthday Sale: Up to 50%30% Off
Birthday Sale: Last 24 hours!
Birthday Sale: Last 24 hours:
Wait! You get 30-Day Money-back Guarantee

You have nothing to lose – but the discount