Coder is a simple and flexible syntax highlighting WordPress plugin for Elementor based on lightweight and robust prism.js library. Even the basic Coder widget settings provide a pretty and readable code-appearance. It supports more than 200 Programming, Scripting, and Mathematical Markup Languages with 30+ different style themes. Moreover, you can easily add code on the page from external sources like BitBucket or GitHub using the URL. The product contains everything for your convenience and even more.
The widget is certainly a convenient tool not only for those who write code but also for readers because the code can be easily identified on the content page, thereby saving time and increasing readability. A lot of features will help to improve and adapt the code block according to specific tasks: line numbers, highlighting specific lines, displaying the inline preview of colors in style sheets, adding of the code copy button, and others.
The Coder widget can be useful for different kinds of WordPress sites associated with development, courses or training, documentation, administration, or even with math or scientific research.












Once the plugin is installed, it is ready to use and does not require any whistles and bells. The straightforward and flexible settings allow you to enable/disable the necessary features and change the themes, colors, fonts, background, and manage other options. One of the interesting features is detecting if the user has requested the system use a light or dark color theme and adjust the code block to the settings. All this can be configured directly from the Elementor’s interface and does not require additional code knowledge.
Coder for Elementor is exceptionally compatible with all modern browsers. It does not matter which browser users view your site: Chrome, Firefox, Opera, Safari, or Edge. Everything will look great on all devices and in all browsers.
The plugin installation takes only a few seconds. Also, you do not need to make any additional settings. The plugin is ready to work immediately after installation – you only need to install and activate it in WordPress. Read more about capabilities and settings in the Online Documentation.
Installing the WordPress plugin is quick and straightforward. After you have downloaded the archive with the plugin, you will see the file with the plugin inside. Unzipped purchased the product you will see inside the archive with the plugin pluginname.zip There are two ways to install it:
First of all, open WordPress admin area login page and login in into WordPress as Admin. To do this visit http://yoursitename/wp-admin
Go to Plugins > Add New

Click Upload Plugin Button

Choose archive with Plugin and press Install Now Button
After Installing go back to the Plugins page and click Activate below plugin title

Use Login and Password to connect to your web-server via FTP or use your hosting file manager.
Upload archive with plugin to /wp-content/plugins
On next step Unzip the archive with the plugin
Installing WordPress Plugin is almost finished. Go to the Plugins page and click Activate below plugin title. You can find out your username and password on the website of your hosting provider.

After installing and activating the plugin, you can go to settings of the Plugin. Also, you can read more helpful articles about WordPress Themes and WordPress Plugins.
Coder is a simple and flexible syntax highlighting WordPress plugin for Elementor based on lightweight and robust prism.js library. Even the basic Coder widget settings provide a pretty and readable code-appearance. It supports more than 200 Programming, Scripting, and Mathematical Markup Languages for syntax highlighting with 30+ different style themes.
For further work, you need the Elementor to be installed on your site. You can download it from wordpress.org
Open or create a page using Elementor to start using the syntax highlighting widget. You will find the widget at the end of the general section.

Drag the widget to a page using the Element editor to start customizing. In the left pane of the editors, you can customize the widget to the style of your site. Each of the tabs presented a specific group of settings:
On the Content tab, you can enter the code or a source of code, as well as manage all available features.
The section for choosing the language that will be used for the code box with syntax highlighting, inserting the code or its source.
Two types of source code available:
Select the language that you use for the code to highlight the syntax correctly. The plugin supports more than 200 languages, find all the list here https://prismjs.com/#supported-languages. Besides, you can see how the highlighting of a particular language looks in the examples.
Section for managing various features. You can read more about the functions and see examples on https://prismjs.com/#plugins
The toggle to enable/disable line numbering display.

The toggle to enable/disable certain lines highlighting. You can highlight a specific line, range of lines or list of lines separated by commas.

The toggle to enable/disable hidden characters display such as tabs and line breaks.

The option converts URLs and emails in code to clickable links. Parses Markdown links in comments.

The toggle to enable/disable language display used for the code box with syntax highlighting. The option adds a badge with the name of the language in the corner of the box.

The toggle to enable/disable color previews display in style sheets. This improves code readability and understanding.

The toggle to enable/disable previews to display angles, colors, gradients, easing, and time.

Makes tokens link to WebPlatform.org documentation. The links open in a new tab. This plugin is still in beta. For example, clicking on a property in the CSS, you refer to the documentation where we can read more about this property. This can be especially useful for sites with training materials, lessons, or courses.

The toggle to enable/disable a command line display with a prompt and, optionally, the output/response from the commands. It may be useful for sites with information about Linux, Mac OS, or various system settings. Read more about the plugin here


The toggle to enable/disable a button that copies the code block to the clipboard when clicked.

The toggle to enable/disable a button for a code file download. The option available if URL is selected as source code.

The option will highlight brace pairs when the cursor hovers over one of the braces. The highlighting effect will disappear as soon as the cursor leaves the brace pair. Besides, you can enable rainbow braces to highlight pairs of brackets with different colors.


The option highlights the code inside diff blocks.

On the Coder widget styles tab, you can configure everything related to the visual style of elements: style theme, colors, typography, backgrounds, gradients, and more.
The settings in the widget advanced tab of the plugin allow you to flexibly configure everything that relates to the design of the plug-in wrapper. The settings on this tab are entirely similar to the native Elementor widgets and will be convenient for experienced users of the Elementor. Learn more about Advanced Tab settings from Elmentor’s official documentation.
Do not forget to save changes after completing the widget setup. To do this, click on the Update button at the bottom of the page.

Fast and reliable hosting is significant for any WordPress site. We recommend all our customers use SiteGround WordPress Hosting. Many unique settings and features make this hosting the number 1 for WordPress: Free Website Transfer, Staging Tools, Free SSL, CDN, and much more for 3.95/mo.