Syntax Highlighter

Slate 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 ');
    }
}