coder

Code Syntax Highlighter for Elementor

Highlighting more than 200 syntaxes

Highlighting syntaxes​

Coder is a simple and flexible syntax highlighting WordPress plugin for Elementor based on lightweight and robust prism.js library. 

Powered by Prism JavaScript library

Coder is based on free, fast, lightweight and robust JS library for code highlighting

One-click
Customization ​

Syntax Highlighter has many options that allow you to manage even small details

Includes 30 Premade Stylish Themes

The plugin has 30 stylish skins for code highlighting, supported in all syntaxes

GitHub and BitBucket
code support

Supported BitBucket Snippets & Repositories and GitHub Gists & Repositories

More Than Just a Code Highligher

Flexible settings and an intuitive interface will help you easily create highlighted code sections without a single line of code 🙂

Pretty and readable
code-appearance

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.

int MyFunction()
{
    // There once was a man named Dave
    int Result = 0;

    // Whose code just wouldn't behave
    MyObject *Ptr = new MyObject();

    // He left to go to a meetin'
    Result = Ptr->DoSomething();

    // And left his memory a leakin'
    return Result;
}

C++ code with displaying hidden characters such as tabs and line breaks

Ready-made Templates
for your website

To improve you initial experience with the plugin we included Image-box Templates to the package. These are just some examples that can inspire you to create your style. It provides you a quick start in a few clicks

Light and Dark
Themes

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. 

/**
 * Always returns true.
 * More on https://merkulov.design/
 *
 * @since 1.0.0
 * @access public
 **/
public boolean isAvailable() {
    return false;
}

Minimalist syntax highlighting of PHP code in minimalistic form with a button for copying code

body {
 background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
 linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
 linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
}
 
h1, h2, h3, h4, h5, h6 {
 transition: all 500ms cubic-bezier(.25, 1, .7, .1);
 box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, .2);
 color: #ff0099
}

A snippet of CSS code with a preview of gradients and colors. Hover over a property to see a preview.

Advanced features for CSS stylesheets

If you write in CSS, then the plugin will be able to show how the color or gradient will be right in the highlighted code.

External code sources
like BitBucket or GitHub

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.

                    

Code snippet from the BitBucket Snippet(https://bitbucket.org/merkulovd/workspace/snippets/gnXxe7) with highlighted lines.

{ 
  { 
    while (.. ){ 
      if (..){
          }
      for (.. ){ 
          }
          options.BatchSize = 300; //Madness? THIS IS SPARTA!
      if(..)   {
            if(..)     {
                   if(..)   {
                ...
                return 1; # returns 1
                ...(another few hundred brackets)
                       }
                  }
         } //endif
    }
  }
}

A snippet of PHP code with highlighting rainbow brackets.

Line Numbers and Rainbow Brackets

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.

Supported Syntaxis List

The Syntax Highlighter for Elementor can be useful for different kinds of WordPress sites associated with development, courses or training, documentation, administration, or even with math or scientific research.

Markup(HTML, XML, etc.)
CSS
C-like
JavaScript
ABAP
Augmented Backus–Naur form
ActionScript
Ada
AL
ANTLR4
Apache Configuration
APL
AppleScript
AQL
Arduino
ARFF
AsciiDoc
6502 Assembly
ASP.NET (C#)
AutoHotkey
AutoIt
Bash
BASIC
Batch
BBcode
Bison
Backus–Naur form
Brainfuck
BrightScript
Bro
C
Concurnas
C#
C++
CIL
CoffeeScript
CMake
Clojure
Crystal
Content-Security-Policy
CSS Extras
D
Dart
DAX
Diff
Django/Jinja2
DNS zone file
Docker
Extended Backus–Naur form
Eiffel
EJS
Elixir
Elm
Embedded Lua templating
ERB
Erlang
Excel Formula
F#
Factor
Firestore security rules
Flow
Fortran
FreeMarker Template Language
G-code
GDScript
GEDCOM
Gherkin
Git
GLSL
GameMaker Language
Go
GraphQL
Groovy
Haml

Handlebars
Haskell
Haxe
HCL
HLSL
HTTP
HTTP Public-Key-Pins
HTTP Strict-Transport-Security
IchigoJam
Icon
Structured Text (IEC 61131-3)
Inform 7
Ini
Io
J
Java
JavaDoc
JavaDoc-like
Java stack trace
Jolie
JQ
JSDoc
JS Extras
JS Templates
JSON
JSONP
JSON5
Julia
Keyman
Kotlin
LaTeX
Latte
Less
LilyPond
Liquid
Lisp
LiveScript
LLVM IR
LOLCODE
Lua
Makefile
Markdown
Markup templating
MATLAB
MEL
Mizar
Monkey
MoonScript
N1QL
N4JS
Nand To Tetris HDL
NASM
NEON
nginx
Nim
Nix
NSIS
Objective-C
OCaml
OpenCL
Oz
PARI/GP
Parser
Pascal
Pascaligo
PC-Axis
PeopleCode
Perl
PHP
PHPDoc
PHP Extras
PL/SQL
PowerQuery

PowerShell
Processing
Prolog
.properties
Protocol Buffers
Pug
Puppet
Pure
PureBasic
Python
Q (kdb+ database)
QML
Qore
R
Racket
React JSX
React TSX
Ren’py
Reason
Regex
reST (reStructuredText)
Rip
Roboconf
Robot Framework
Ruby
Rust
SAS
Sass (Sass)
Sass (Scss)
Scala
Scheme
Shell session
Smalltalk
Smarty
Solidity (Ethereum)
Solution file
Soy (Closure Template)
SPARQL
Splunk SPL
SQF: Status Quo Function (Arma 3)
SQL
Stylus
Swift
TAP
Tcl
Textile
TOML
Template Toolkit 2
Turtle
Twig
TypeScript
T4 Text Templates (C#)
T4 Text Templates (VB)
T4 templating
UnrealScript
Vala
VB.Net
Velocity
Verilog
VHDL
vim
Visual Basic
WarpScript
WebAssembly
Wiki markup
Xeora
Xojo (REALbasic)
XQuery
YAML
Zig

Headinger – Custom headers for Elementor

Headinger

Custom Headings widget for Elementor

Videor– Video Clipping Mask for Elementor

Videor

Video Clipping Mask for Elementor

Masker – Image Clipping Mask for Elementor

Masker

Image Clipping Mask for Elementor

Lottier – Lottie Animated Images for Elemetor

Lottier

Lottie Animated Images for Elementor

Pricer – Price lists and Price table for Elementor

Pricer

Stylish Price lists and Price Tables

Glider

Responsive Slideshow Carousel & Slider

Excited to get more for Elementor?

We have many useful add-ons for Elementor. You can see some of them in the columns on the left.