Elementor Syntax Highlighter

Description

This Elementor widget allows you to add syntax highlighted code snippets to your content.

The syntax highlighter is implemented using PrismJS.

To use drag the “Highlighted Code” widget from the “Basic” section of the Elementor sidebar onto you post. Then select the language you will be using and fill in the code in the sidebar. You’ll see a preview of what things will look like in the main content panel.

Screenshots

  • Using the highlighter widget
  • Frontend example
  • The Elementor widget closeup
  • The Elementor widget in the sidebar

Installation

Make sure Elementor is activated, then activate this plugin. You’ll see the widget under the “Basic” section in the Elementor sidebar.

FAQ

Q: Can I use another PrismJS theme?
A: Currently only the Okaidia theme is supported. Soon, the selected PrismJS theme will be configurable.

Q: What languages can be highlighted?
A: markup, css, clike, javascript, bash, c, csharp, cpp, fsharp, git, go, graphql, haskell, http, java, javadoc, javadoclike, jsdoc, js-extras, js-templates, json, latex, lisp, makefile, markdown, markup-templating, matlab, nginx, objectivec, perl, php, phpdoc, php-extras, pug, python, r, jsx, tsx, regex, sass, scss, scala, shell-session, sql, twig, typescript

Q: The language I want to highlight isn\’t in the dropdown. How can I select it?
A: Currently only a subset of languages is supported. Soon, the full set of PrismJS languages will be supported.

Q: Does this support any of the PrismJS plugins?
A: Not yet. There are plans to support line numbers and copy paste in the future.

Reviews

April 11, 2020
Plugin works as intended. Perfectly simple. Still lacks few features that would be great (copy/paste button, numbered lines, style settings). In my case I would love to see it having width setting because my website is narrow and I would like to somehow stay without horizontal scroll. Thanks for good plugin
Maret 11, 2020
We wasted 1 day testing plugins but finally found the right one for ELEMENTOR
Pébruari 10, 2020
The plugin works as advertised in the plugin description. I appreciate your work. It's the one and only working code highlighting for elementor. Looking for future updates with line numbering and the copy feature.
Read all 3 reviews

Contributors & Developers

“Elementor Syntax Highlighter” is open source software. The following people have contributed to this plugin.

Contributors