Jednoduché zvýrazňovanie syntaxe na webových stránkach

Na mnohých webových stránkach sa zobrazuje zdrojový kód jednou farbou. Jednofarebný výpis zdrojového kódu nie je síce pre návštevníka prekážkou, ale zvýraznená syntax poteší a uľahčí čítanie zdrojového kódu. Spôsobov ako zvýrazňovať zdrojový kód je viac. Tým najspoľahlivejším, ktorý bude fungovať vo všetkých prehliadačoch, je zvýrazňovanie syntaxe na strane servera (napríklad v PHP pomocou funkcie highlight_file). V mnohých prípadoch však zvýrazňovanie syntaxe nie je na stránkach kľúčové alebo nemáme skriptovanie na strane servera k dispozícii, preto je možné rozmýšľať aj nad inými metódami.

Zvýrazňovanie syntaxe JavaScriptom

Využitie JavaScriptu na zvýrazňovanie syntaxe je celkom oprávneným použitím skriptovania na strane klienta. Farebné odlíšenie kľúčových slov, reťazcov alebo iných lexikálnych jednotiek môžeme zaradiť do takej kategórie vlastností našich stránok, kde nám neprekáža, že niektorí návštevníci vidia syntax zvýraznenú, zatiaľ čo iní uvidia jednofarebný text. A presne o takéto progresívne zlepšovanie, resp. plynulú degradáciu (angl. progressive enhancement, resp. graceful degradation) stránky sa dokáže postarať nevtieravý JavaScript (angl. unobtrusive JavaScript).

Výpisy zdrojových kódov sú väčšinou v HTML zapísané v elemente

code

, ktorý je vnorený do elementu

pre

. Takto zapísaný výpis zdrojového kódu je sémanticky správny - element

pre

slúži pre zachovanie bielych znakov (medzier, tabelátorov a nových riadkov) a element

code

určuje, že ide o zdrojový kód:

<pre><code class="javascript">function test ()
{
  alert ("pokus");
}</code></pre>

Princíp zvýrazňovania syntaxe prostredníctvom JavaScriptu je jednoduchý. Po tom, ako prehliadač nahrá stránku s výpismi zdrojových kódov, sa zavolá funkcia pre zvýraznenie syntaxe. Táto funkcia postupne prejde všetky elementy, ktorých obsahom sú výpisy so zdrojovými kódmi, pričom jazyk, ktorý má funkcia zvýrazniť, môže byť definovaný v atribúte

class

elementu so zdrojovým kódom. Pri zvýraznení sa obalia všetky nájdené kľúčové slová, reťazce alebo iné lexikálne jednotky do elementu

span

, ktorému sa nastaví iná farba textu. Tie lepšie zvýrazňovače syntaxe umožnia namiesto nastavenia farby nájdených slov nastaviť CSS triedu. Farby slov je potom možné určiť v oddelenom súbore s definíciou štýlov, čím sa dosiahne ideálne oddelenie obsahu, výzoru a správania.

Takýmto spôsobom sa dá aj na statické HTML stránky bez použitia skriptovania na strane servera ľahko pridať napríklad zvýrazňovač syntaxe HTML a CSS. Tento zvýrazňovač síce nie je také jednoduché rozšíriť o ďalšie jazyky, ale jeho princíp fungovania sa uberá správnym smerom. Konkrétne tento spomenutý zvýrazňovač bol ďalej rozšírený tak, že pridávanie ďalších jazykov bolo jednoduché, ale zdrojové kódy na stránke museli byť z nepochopiteľných dôvodov v elemente

textarea

. Po menších úpravách by sa z tohoto zvýrazňovača mohol stať ideálny JavaScriptový zvýrazňovač syntaxe. Jeho stránky sú žiaľ v súčasnej dobe nefunkčné.

S minimálnymi úpravami je takto možné pridať na ľubovoľnú stránku výpis zdrojového kódu, pričom o zvýraznenie jeho syntaxe sa postará samotný klient. Okrem toho, že tento spôsob nezaťažuje server ale klienta, je jeho výhodou aj to, že sa dá použiť v prostrediach, keď nemáme možnosť použiť skriptovanie na strane servera. Naopak nevýhodou je, že zvýraznenú syntax uvidia iba tí návštevníci, ktorých prehliadač vykonáva JavaScript.

Hypertextové komponenty

Spoločnosť Microsoft umožníla vo svojom prehliadači Internet Explorer od verzie 5 priradiť každému prvku správanie. Toto správanie je definované pomocou hypertextového komponentu, ktorý je uložený v samostatnom súbore (najčastejšie s príponou HTC). Pomocou vlastnosti štýlu

behavior

je možné ľubovoľným elementom takto definované správanie priradiť. Vďaka tomu sa dá úplne oddeliť správanie od obsahu a výzoru webovej stránky.

Čo keby sa zvýrazňovanie syntaxe oddelilo do takéhoto komponentu? Pekná myšlienka, avšak v súčasnosti dokáže hypertextové komponenty spracovať stále iba Internet Explorer. Dean Edwards vytvoril XBL wrapper, ktorý umožňuje použitie hypertextových komponentov v prehliadači Firefox. Definovanie správania sa pridá do definície podobne ako v Internet Exploreri - namiesto atribútu

behavior

použijeme atribút

-moz-binding

. Ak nám teda stačí, že zvýraznená syntax sa zobrazí iba používateľom prehliadača Internet Explorer alebo Firefox, neexistuje ďalší dôvod, prečo hypertextové komponenty nepoužiť.

Jednoduché zvýraznenie syntaxe umožňuje hypertextový komponent pre zvýrazňovanie syntaxe, ktorý tiež napísal Dean Edwards. Na rozdiel od predchádzajúceho zvýrazňovača sa dá tento komponent veľmi jednoducho rozšíriť o zvýrazňovanie ďalších jazykov a výsledok vyzerá slušne.

Pridanie hypertextového komponentu pre zvýrazňovanie syntaxe na vlastné stránky

1 Dôležité súbory

Aby sme mohli použiť vyššie spomenutý zvýrazňovač syntaxe, musíme si najskôr stiahnuť aktuálnu verziu zvýrazňovača. Budeme potrebovať hlavne nasledujúce súbory:

moz-behaviors.xml:
umožňuje používať hypertextové komponenty v prehliadači Firefox
bindings.xml:
definuje, aký komponent sa má pre zvýraznenie kódu daného jazyka použiť
star-light.htc:
parser, ktorý sa stará o samotné zvýraznenie kódu

Ďalej budeme potrebovať súbory, ktoré definujú pravidlá pre zvýraznenie kódu konkrétneho jazyka. V stiahnutej verzii sú napríklad zvýrazňovače pre HTML, CSS, XML, PHP, JavaScript, T-SQL alebo VBScript.

2 Inicializácia správania pre Firefox

Aby fungovali hypertextové komponenty aj v prehliadači Firefox, musíme najprv inicializovať vyššie spomenutý XBL wrapper. To spravíme najjednoduchšie tak, že pridáme medzi ostatné štýly nasledujúce pravidlo:

/* initialise behaviors support for mozilla */
head {-moz-binding: url(moz-behaviors.xml#block-netscape6);}

3 Priradenie správania zvoleným elementom

V ďalšom kroku určíme, pre ktoré elementy sa má zvýrazňovač použiť. Pridaním nasledujúceho pravidla do súboru so štýlmi napríklad určíme, aby sa použil zvýrazňovač JavaScriptu pri všetkých elementoch

code

, ktoré su vnorené v elemente

pre

a majú nastavenú triedu

js

alebo

javascript

:

/* syntax highlighter */
pre code.js, pre code.javascript
{
  behavior: url(star-js.htc) url(star-light.htc);
  -moz-binding: url(bindings.xml#star-js.htc|star-light.htc);
}

4 Definovanie použitých zvýrazňovačov

Nie vždy potrebujeme zvýrazňovače pre všetky jazyky. Posledným krokom je teda úprava súboru, v ktorom je definované, aký komponent sa o zvýraznenie daného jazyka má postarať. Ak nám stačí iba zvýrazňovanie jazyka JavaScript, bude súbor

bindings.xml

vyzerať takto:

<?xml version="1.0" encoding="ISO-8859-1"?>
<bindings xmlns="www.mozilla.org/xbl">

<!-- provide the default path to moz-behaviors.xml (keep the #behavior suffix) -->
<binding id="behavior" extends="moz-behaviors.xml#behavior"/>

<!-- syntax highlighter -->
<binding id="star-js.htc|star-light.htc" extends="#behavior"/>

</bindings>

5 Použitie

Ak sme postupovali podľa predchádzajúcich krokov, stačí na stránke, kde chceme zvýrazňovanie syntaxe použiť, priradiť elementu

code

vnorenom v elemente

pre

triedu

javascript

:

<pre><code class="javascript">function test ()
{
  alert ("pokus");
}</code></pre>

K tejto stránke musí byť samozrejme pripojený štýl s pravidlami z predchádzajúcich krokov a tiež potrebné súbory

moz-behaviors.xml

,

bindings.xml

,

star-light.htc

a v tomto prípade ešte aj

star-js.htc

Záver

Zvýrazňovanie syntaxe na webových stránkach nemusí byť zložité a dokonca na to nepotrebujeme použiť jazyk na strane servera. Ak nám nebude chýbať zvýrazňovanie v prípade, že prehliadač neumožňuje vykonávať mobilný kód, môže rovnako dobre ako jazyk na strane servera poslúžiť JavaScript vykonávaný prehliadačom návštevníka.

V tomto článku sme sa bližšie pozreli na zvýrazňovanie syntaxe pomocou hypertextových komponentov. Toto zvýrazňovanie nie je zďaleka ideálne, pretože ideálny JavaScriptový zvýrazňovač syntaxe by sa na túto technológiu určite nespoliehal. V prípade jednoduchých stránok môžeme však ich použitím získať veľa muziky za málo peňazí.