Syntax Highlighter

Ember 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 (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 an 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 ');
    }
}