HighlightJS Plugin

HighlightJS ist ein Herbie Plugin, das den JavaScript basierten Code Syntax-Highlighter Highlight.js in deine Website einbindet. Highlight.js bringt die folgenden Features mit:

  • 130 Sprachen und 65 Stile
  • automatische Spracherkennung
  • funktioniert mit jedem Markup
  • kompatibel mit jedem JS-Framework
  • Multi-Sprachen Code Highlighting

Installation

Das Plugin installierst du via Composer.

$ composer require getherbie/plugin-highlightjs

Danach aktivierst du das Plugin in der Konfigurationsdatei.

plugins:
    enable:
        - highlightjs

Konfiguration

Unter plugins.config.highlightjs stehen dir die folgenden Optionen zur Verfügung:

# Folder with highlight.js stylesheets. If false, no styles are added.
stylesheets: "@plugin/highlightjs/assets/styles/"

# Highlight.js javascript. If false, no styles are added.
javascript: "@plugin/highlightjs/assets/highlight.pack.js"

# The initializer javascript with pure vanilla-javascript.
javascript_init: "@plugin/highlightjs/assets/highlightjs.js"

# The HTML markup
html: "<pre><code class="{class}">{content}</code></pre>"

# The highlight.js theme.
style: default

Anwendung

Das Plugin stellt dir den Shortcode [code] zur Verfügung, den du in deinen Seiteninhalten nutzen kannst. Als einzigen Parameter wird die Programmiersprache verlangt:

[code javascript]
    alert("Hello Herbie!");
[/code]

[code php]
    echo "Hello Herbie!";
[/code]

Unterstützte Sprachen

Das Highlight.js Package von Herbie unterstützt die folgenden Sprachen:

Apache, Bash, C#, C++, CSS, CoffeeScript, Diff, HTML, XML, HTTP, Ini, JSON, Java, JavaScript, Makefile, Markdown, Nginx, Objective C, PHP, Perl, Python, Ruby, SQL, Twig

Du kannst aber viele andere Sprachen einsetzen. Dazu stellst du dir dein eigenes Package unter https://highlightjs.org/download/ zusammen. Anschliessend muss die Plugin-Konfiguration angepasst werden.

Beispiel: Legst du die Dateien im Verzeichnis site/assets/default ab, könnte deine Konfiguration wie folgt aussehen:

stylesheets: "@site/assets/default/highlightjs/styles/"
javascript: "@site/assets/default/highlightjs/highlight.pack.js"

Beispiele

PHP

[code php]
$foo = 45;
for ( $i = 1; $i < $foo; $i++ )
{
  echo "$foo<br>";
  --$foo;
};
[/code]

Der obige Code erzeugt die folgende Ausgabe:

$foo = 45;
for ( $i = 1; $i < $foo; $i++ )
{
  echo "$foo<br>";
  --$foo;
};

JavaScript

[code javascript]
var i=10;
for ( i = 1; i < foo; i++ )
{
  alert i;
}
[/code]

Der obige Code erzeugt die folgende Ausgabe:

var i=10;
for ( i = 1; i < foo; i++ )
{
  alert i;
}

Und hier noch ein paar weitere Beispiele für Syntax Highlighting mit Herbie.

Java

public abstract class L2Char extends L2Object {
  public static final Short ERROR = 0x0001;
  public void moveTo(int x, int y, int z) {
    _ai = null;
    log("Should not be called");
    if (1 > 5) { // wtf!?
      return;
    }
  }

Python

def main():
    print "Hallo Welt!"

if __name__ == '__main__':
    main()

Perl

use Time::HiRes qw(sleep time);
use POSIX qw();
use IO::Handle;

my $delay = shift(@ARGV);

STDOUT->autoflush(1);
{
    my $start = time();
    my $end = $start + $delay;

    my $last_printed;
    while ((my $t = time()) < $end)
    {
        my $new_to_print = POSIX::floor($end - $t);
        if (!defined($last_printed) or $new_to_print != $last_printed)
        {
            $last_printed = $new_to_print;
            print "Remaining $new_to_print/$delay", ' ' x 40, "\r";
        }
        sleep(0.1);
    }
}
print "\n";

Bash

echo -n "Enter the name of an animal: "
read ANIMAL
echo -n "The $ANIMAL has "
case $ANIMAL in
  horse | dog | cat) echo -n "four";;
  man | kangaroo ) echo -n "two";;
  *) echo -n "an unknown number of";;
esac
echo " legs."