Elementor Syntax Highlighter Plugin
An Elementor widget to add syntax highlighting to your sight with PrismJS.
THIS PLUGIN IS NO LONGER MAINTAINED, SINCE ELEMENTOR NOW HAS A SYNTAX HIGHLIGHT WIDGET OF ITS OWN.
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.
Installation
Make sure Elementor is activated, then activate this plugin. You’ll see the widget under the “Basic” section in the Elementor sidebar.
Screenshots
Using the highlighter widget
Frontend example
The Elementor widget closeup
The Elementor widget in the 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.