Highlighting 200+ syntaxes
Coder is a simple and flexible syntax highlighting WordPress plugin for Elementor based on lightweight and robust prism.js library.
coder
–
Code Syntax Highlighter for Elementor
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 🙂
- 200+ languages currently supported
- 30+ Cool Style Themes
- BitBucket Snippets / BitBucket Repositories
- GitHub Gists / GitHub Repositories
- Mathematical Markup Language included
- Individual styles for each slide
- Line numbering feature
- Function Select specific lines
- Dynamic theme change for Day/Night
- Copy to Clipboard Button
- Treeview feature
- Works well with all WordPress themes built on Elementor
- Totally Seo Friendly
- Perfect for Elementor 2.5 and higher
- Perfect for RTL direction
- Fast and smooth installing
- Tested and compatible up to WordPress 5+
- Lightweight and Fast
- Looks perfect in Chrome, Firefox, Safari, Opera, and Edge
- Easy to use and customize with modern User Interface
- Installation Guide and detailed Users Manual
- Six months Included Support for CodeCanyon buyers
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
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.