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
  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. 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.)
  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

Share on facebook
Share on twitter
Share on linkedin
Share on email
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