bezahlt von Syntax-Highlighting in 2 Minuten einbauen
Wenn man Code in seinen Blog-Posts verwendet gilt dafür das Selbe wie für den Text. Der Code muss gut lesbar sein. Strukturiert und nicht in seiner Masse den Leser erschlagen. Wenn man einen großen Block Code vor sich hat, fühlt man sich sehr schnell davon erschlagen. Hier hilft selbst minimales Syntax-Highlighting sehr.
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.
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.
| User | annonyme | 2015-10-22 21:49 |
write comment: