Coder - Code Syntax Highlighter for Elementor

WordPress plugins Documentation

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.

Highlighting more than 200 syntaxes
Highlighting more than 200 syntaxes
Supported CitHub Gist and BitBucket Snippets
Supported CitHub Gist and BitBucket Snippets
Support displaying the project tree-view
Support displaying the project tree-view
30+ themes for Syntax Highlighting
30+ themes for Syntax Highlighting
Customizable theme appearance
Customizable theme appearance
Includes Templates for Elementor
Includes Templates for Elementor
Dynamic Day & Night color schemes
Dynamic Day & Night color schemes
Completely Cross-Browser support
Completely Cross-Browser support
Flexible settings of the code box
Flexible settings of the code box
Crafted for Elementor Builder
Crafted for Elementor Builder
Suitable for all kind of Layout and Templates
Suitable for all kind of Layout and Templates
Perfect for Popular Elementor Themes
Perfect for Popular Elementor Themes

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.

Features of the Coder widget for Elementor

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:

Installation of the Plugin through the WordPress Admin panel ( Recommended for most users )

STEP 1

First of all, open WordPress admin area login page and login in into WordPress as Admin. To do this visit http://yoursitename/wp-admin

STEP 2

Go to Plugins > Add New

Add New Plugin to WordPress
Add New Plugin to WordPress
STEP 3

Click Upload Plugin Button

Upload New Plugin to WordPress
Upload New Plugin to WordPress
STEP 5

Choose archive with Plugin and press Install Now Button

STEP 6

After Installing go back to the Plugins page and click Activate below plugin title

Activate Installed Plugin

Installation the plugin through FTP or build-in File manager

STEP 1

Use Login and Password to connect to your web-server via FTP or use your hosting file manager.

STEP 2

Upload archive with plugin to /wp-content/plugins

STEP 3

On next step Unzip the archive with the plugin

STEP 4

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.

Activate Installed Plugin

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.

Widget icon

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:

Content Tab

On the Content tab, you can enter the code or a source of code, as well as manage all available features.

Source Code settings

The section for choosing the language that will be used for the code box with syntax highlighting, inserting the code or its source.

Source

Two types of source code available:

Language

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.

Features settings

Section for managing various features. You can read more about the functions and see examples on https://prismjs.com/#plugins

Line Numbers

The toggle to enable/disable line numbering display.

Line Numbers display

Line Highlight

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 example of highlighting 18, 25-27 lines

Show Invisibles

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

Hidden characters display of the syntax highlighting widget

Autolinker

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

Clickable link in the code

Show Language

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 badge with the language name

Inline Color

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

The inline preview for colors in style sheets

Previewers

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

The style previews

WebPlatform Docs

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.

Clicking on the “background” go to the documentation https://webplatform.github.io/docs/css/properties/background/

Command Line

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

Root User Without Output
Non-Root User With Output

Copy to Clipboard Button

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

Copy button in the code box

Download Button

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

Download button in the code box

Match braces

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.

Match braces
Rainbow braces

Diff Highlight

The option highlights the code inside diff blocks.

Background highlight of diff blocks

Style tab

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.

Code Block

Language mark

Copy button

Advanced Tab

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.

Save changes

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.

Update page in the Elementor
Update page in the Elementor

Hosting for Elementor websites

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.