Syntax-Highlighting in 2 Minuten einbauen
Deswegen wollte ich gerne bei dem Code in meinem Blog richtiges Syntax-Highlighting haben. Den PHP-Code wollte ich nicht anfassen und dachte mir: "Da gibt es doch bestimmt was in JavaScript". 1 Minute später hatte ich eine Lösung gefunden.
highlight.js lässt sich ganz schnell integrieren und man muss nicht mal was downloaden.
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.8.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.8.0/highlight.min.js"></script>
Wenn man nun keine code-Tags verwendet, sondern wie ich es gemacht hatte, ein DIV mit spezieller CSS-Klasse verwendet hatte, muss man highlight.js noch sagen, dass dieser verwendet werden soll. Dies macht man ganz einfach über JQuery.
<script type="text/javascript">
hljs.configure({useBR: true});
$('div.bcode').each(function(i, block) {
hljs.highlightBlock(block);
});
</script>
Und schon hat man alle Quellcodes mit Syntax-Highlighting. Man kann es mit Vorgaben, welches Highlighting man gerne möchte (XML, PHP, Java, etc), aber selbst ohne diese Angaben sind die Resultate schon wirklich super.