Osobní stránky

Zvětšení zvýrazňovače syntaxe při najetí myši

Na těchto stránkách používám pro zobrazování zdrojových kódů javascriptový zvýrazňovač syntaxe WP SyntaxHighlighter. Nelíbilo se mi, že pokud je výrazňovaný kód širší než velikost hlavního sloupce, musí uživatelé používat horizontální posuvník stejně jako u následujícího příkladu.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Naprogramoval jsem tedy v JavaScriptu za použití knihovny jQuery automatické zvětšování zvýrazňovače při najetí myši. Vše si můžete vyzkoušet na předchozím odstavci.

Největší problém při implementaci byl s tím, že zdrojový HTML kód zvýrazňované části je nahrazen až pomocí JavaScriptu, v dokumentu tedy ve fázi onReady tyto elementy neexistují. Musíme tedy použít jQuery funkci .on(), která funguje od verze 1.7 a funguje i pro elementy vytvořené dynamicky za pomocí JavaScriptu.

JQuery funkce .on() řeší případy, které by jinak nešly vyřešit. Je často používaná při ajaxovém volání a přepisování stránky. Tato funkce nahrazuje starší funkci .live() od jQuery verze 1.7.

Jakub Škvára


Jakub je cestovatel, blogger a webový vývojář. Zajímá se především o technické novinky a rád navštěvuje konference. Používá: Symfony2 Framework, AngularJS, NodeJS, MongoDB a další moderní technologie. Aktuálně žije v Londýně.