Syntax Highlighter

Syntax highlighting is a feature which displays text, especially source code, in different colors and fonts according to the category of terms.

Slate comes included with a Syntax Highlighter shortcode for code blocks, using HighlightJS. It includes auto language detection, multiple color schemes, and supports popular languages (complete list can be found below).

Highlighter Color Schemes

The highlighter also include dark, light and high contrast color schemes which can be seen below.

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

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

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

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

Shell

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

admin

View Comments

There are currently no comments.