Code Syntax Highlighter for Elementor

Highlighting more than 200 syntaxes
Highlighting more than 200 syntaxes

Coder is a simple and flexible syntax highlighter 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.

/**
 * 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

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.

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

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.

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.

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.


                    

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

Syntax Highlighter 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.

{ 
  { 
    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.

Key features of the Coder for Elementor

  • 200+ languages currently supported
  • 30+ Cool Style Themes
  • BitBucket Snippets / BitBucket Repositories
  • GitHub Gists / GitHub Repositories
  • Mathematical Markup Language included
  • Line numbering feature
  • Function Select specific lines
  • Accessible syntax highlighting themes included
  • Treeview feature
  • Copy to Clipboard Button
  • Dynamic theme change for Day/Night
  • Customizable fonts, colors, borders, backgrounds, etc.
  • Works well with all WordPress themes built on Elementor
  • Included pot file for quick translation on any language
  • Perfect for RTL direction
  • All major browsers supported Chrome, Firefox, Safari, Opera, and Edge
  • Installation Guide and detailed Users Manual
  • Six months Included Support for CodeCanyon buyers

List of supported syntaxes

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

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.