Syntax Highlighter


Koala 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

[eckosc_column_container count=”two”]
[eckosc_column_item]

  • Apache
  • Bash
  • C#
  • C++
  • CSS
  • CoffeeScript
  • Diff
  • HTML/XML
  • HTTP
  • Ini
  • JSON
  • Java
  • JavaScript
  • Makefile
  • Markdown
  • Nginx
  • Objective-C
  • PHP
  • Perl
  • Python

[/eckosc_column_item]
[eckosc_column_item]

  • Ruby
  • SQL
  • DNS Zone File
  • Dart
  • Dockerfile
  • Elm
  • Erlang
  • Go
  • Haml
  • Handlebars
  • Haskell
  • Haxe
  • Less
  • Rust
  • SCSS
  • Swift
  • Haxe
  • Typescript
  • YAML

[/eckosc_column_item]
[/eckosc_column_container]

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