Syntax Highlighter


Koala includes our ‘Ecko Blocks’ plugin, which introduces additional features to the Code core Gutenberg block. These features include language-specific syntax highlighting, multiple color schemes, line numbers, and support for popular languages (a complete list can be found below).

Color Schemes

// This is an example of the 'Light' color scheme

function wp_get_time(){
    if(get_theme_mod('layout_use_custom_date_format', false)){
        the_date();
    }else{
        the_time('jS F Y ');
    }
}
// This is an example of the 'Dark' color scheme.

function wp_get_time(){
    if(get_theme_mod('layout_use_custom_date_format', false)){
        the_date();
    }else{
        the_time('jS F Y ');
    }
}
// This is an example of the 'High Contrast' color scheme.

function wp_get_time(){
    if(get_theme_mod('layout_use_custom_date_format', false)){
        the_date();
    }else{
        the_time('jS F Y ');
    }
}

Line Numbers

If you wish to display line numbers along with a Code block this can be enabled via the included options. Below is an example Code block using line numbers with the Dark color scheme.

const http = require('http');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello World\n');
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

Supported Languages

  • Apache
  • Bash
  • C#
  • C++
  • CSS
  • CoffeeScript
  • Diff
  • HTML/XML
  • HTTP
  • Ini
  • JSON
  • Java
  • JavaScript
  • Makefile
  • Markdown
  • Nginx
  • Objective-C
  • PHP
  • Perl
  • Python
  • Ruby
  • SQL
  • DNS Zone File
  • Dart
  • Dockerfile
  • Elm
  • Erlang
  • Go
  • Haml
  • Handlebars
  • Haskell
  • Haxe
  • Less
  • Rust
  • SCSS
  • Swift
  • Haxe
  • Typescript
  • YAML

Below is a preview of some of the above languages being highlighted.

HTML / CSS

<!DOCTYPE html>
<html>
    <body>
        <h1>My First Heading</h1>
        <p>My first paragraph.</p>
    </body>
</html>
.wrapper{
    max-width: 1400px;
    width: 100%;
    @media (max-width: 1470px) {
        padding: 0 2.5%;
    }
}

Python

def openFile(path):
    file = open(path, "r")
    content = file.read()
    file.close()
    return content

Ruby

def self.consume_front(str, size)
    str[0..size] = ''
    str.lstrip!
end

Bash

ls -la /home

PHP

function ivy_get_time(){
    if(get_theme_mod('layout_use_custom_date_format', false)){
        the_date();
    }else{
        the_time('jS F Y ');
    }
}
There are currently no comments.