Vkladanie a zvýrazňovanie kódu v Joomla - highlight skript

V jednom z predchádzajúcich článkov („Textové editory v Joomle“) som stručne opísal použitie textových editorov. Možnosti týchto editorov pokrývajú 99% potrieb používateľov Joomly. Ale niekedy ich schopnosti nestačia alebo je lepšie použiť špeciálne rozšírenia. Povedzme, že do článku potrebujete vložiť kód jedného z konfiguračných súborov servera Linux alebo fragmentov kódu PHP, napríklad zmeny v jednom zo súborov Joomla. A nielen ho vložiť, ale dbať na to, aby dobre zapadol do materiálu, aby bol kód zvýraznený. O tom, ako to urobiť, si povieme v tomto článku.
Špeciálne rozšírenia sú dobré nielen preto, že umožňujú jednoduché vkladanie kódu, ale aj preto, že ho umožňujú zvýrazniť. Ako príklad vložíme do článku fragmenty: jeden zo súborov Joomla a konfiguračný súbor pptp.

HS zvýrazňovač

Na implementáciu použijeme špeciálne rozšírenie - HS Highlighter. Pozostáva z dvoch pluginov: jeden má na starosti zvýraznenie kódu, druhý pridáva tlačidlo na vloženie kódu do materiálu. HS Highlighter podporuje obrovské množstvo programovacích a značkovacích jazykov a vďaka integrácii do Joomly dokáže vložiť kód aj dieťa.
Stiahnite si balík rozšírenia z webovej stránky ITnikRu. V čase písania tohto článku bola dostupná verzia 1.0.7. Nainštalujte HS Highlighter štandardným spôsobom cez "Extension Manager". Po inštalácii prejdite do správcu doplnkov a nájdite v zozname doplnok „Content – ​​Hs Syntax Highlighter“ – ide o doplnok na zvýrazňovanie kódu. Doplnok je zakázaný, povoľte ho a otvorte ho, aby ste mohli upraviť nastavenia.

V bloku „Hlavné parametre“ si môžete vybrať štýl zobrazenia úryvkov kódu a ich zvýraznenia. Mám rád "Midnight" - vyberám si to.

V bloku "Advance Setting" môžete nakonfigurovať ďalšie nastavenia, ako napríklad: pridanie prázdneho riadku za kód, pripojenie vašej šablóny štýlov atď. Pre začiatočníka je lepšie ponechať predvolené nastavenia. Uložíme zmeny, ubezpečíme sa, že je plugin povolený a nájdeme ďalší riadok v zozname pluginov "Button - Hs Highlighter Button" - toto je rovnaké tlačidlo. Povoľte tento doplnok a otvorte ho na úpravy.

V nastaveniach pluginu môžete určiť, či sa má po vložení kódu vložiť značka alebo nie. Naznačil som, aby som nič nedával. Uložíme a prejdeme priamo na vloženie kódu.
Otvorme si článok, do ktorého vložíme kód.

V spodnej časti okna editora vidíme, že sa objavilo tlačidlo na vloženie kódu - „Zvýrazniť kód“. Teraz je všetko celkom jednoduché: stlačte toto tlačidlo a vložte požadovaný kód.

Vložme do prvého odseku fragment kódu z indexového súboru šablóny "Beez5", pričom vyberieme štrnásty riadok a nastavíme číslovanie riadkov na začiatok od 9.

class="eliadunit">

Od autora

Čo urobíte, ak potrebujete zobraziť kód vo svojom článku Joomla? Použite značku

Je nepravdepodobné, že na Joomle uspejete.  Hľadáte doplnok Syntax Highlighter pre Joomla?  Takže zomrel už dávno.  Odporúčam použiť vlastné skript highlight.js.

skript highlight.js
Použitie skriptu highlight.js je dobrý spôsob, ako zistiť, ako používať vlastné skripty v redakčnom systéme Joomla!.  Pojem costomny znamená, že tento skript je napísaný špeciálne na riešenie určitých problémov.  Navyše sa dá použiť nielen na CMS Joomla.  Je všeobecný a bude fungovať na iných systémoch.
Skript highlight.js si musíte stiahnuť iba z oficiálnej webovej stránky.  Tu je odkaz https://highlightjs.org/ .  Skript sa sťahuje jednoducho, bez registrácie.  Takto autori popisujú jeho schopnosti:
Skript podporuje syntax 176 jazykov a má 79 rôznych štýlov css;
K dispozícii je funkcia automatickej detekcie jazyka;
Univerzálne zvýraznenie kódu;
Dostupné pre node.js;
Funguje s akýmkoľvek označením;
Kompatibilné s akýmkoľvek rámcom js.
Ako nainštalovať a nakonfigurovať skript highlight.js
Na inštaláciu a konfiguráciu skriptu použite malé pokyny.
Krok 1.
Stiahnite si skript z oficiálnej webovej stránky (highlightjs.org).
Krok 2
Nahrajte adresár skriptu cez FTP do vášho pracovného adresára šablóny, .

Krok 3
class="eliadunit">
V programe Notepad++ alebo podobnom vytvorte tri riadky kódu:

 
 
 
Youtemplate názov adresára šablóny, do ktorého ste nahrali adresár so skriptom.
Tu sa používa štýl dark.css.  Toto je jeden zo 79 štýlov použitých v skripte.  Pozrite si názvy ostatných štýlov v priečinku highlight/styles.  Napríklad, ak chcete použiť štýl Dracula, nahraďte dark.css dark.css.  Predvolený štýl (štandardná sivá) má názov default.css.

Prejdite do administratívnej časti stránky na karte Rozšírenia>>>Šablóny;
Otvorte pracovnú šablónu na úpravu kódu;
Potrebujeme súbor index.php, otvorte ho na úpravu;
Vytvorte si jeho kópiu a preneste ju do programu Notepad++;
Teraz potrebujete prvý riadok skompilovaného kódu pridať značku PRED a pridajte druhé dva riadky kódu PRED značku



.
Dôležité!  Ak máte nainštalovanú vlastnú šablónu, potom v nastaveniach s najväčšou pravdepodobnosťou existujú nastavenia „Vlastný kód“, kde sú bloky Pred a Predtým



, je lepšie vkladať kódy do týchto blokov.
Uložte zmeny.
Ako používať zvýraznenie skriptu
Teraz, aby ste „zvýraznili“ kód v článku lokality, stačí použiť univerzálny kód pre všetky jazyky:

 
...
Alebo použite zvýraznenie pre každý jazyk samostatne, napríklad takto pre html kód:

 
...
Pre pokročilých používateľov
Ďalšie možnosti použitia skriptu zvýraznenia nájdete na stránke:
Oficiálna stránka knižnice: https://highlightjs.org/ .
Dokumentácia API: http://highlightjs.readthedocs.io/.

Vizuálny editor JCE (Joomla Content Editor) disponuje širokou funkcionalitou, vďaka ktorej môžete jednoducho pridávať a upravovať materiály stránok, meniť ich štýl, a to aj bez znalosti CSS, HTML a PHP.  Znalosť a schopnosť pracovať so všetkými nástrojmi editora JCE vám výrazne zjednoduší prácu, umožní vytvárať esteticky riešený text s harmonicky usporiadanými obrázkami, odkazmi, tabuľkami, nahrávať a konfigurovať mediálne súbory rôznych typov atď.
Po stiahnutí, inštalácii a konfigurácii vizuálu na vašom webe sa prihláste do administračného panela a kliknite na tlačidlo „Vytvoriť materiál“.  Pred vami sa otvorí panel s nástrojmi editora JCE.


Väčšina tlačidiel editora JCE je veľmi podobná obľúbeným nástrojom textového editora a je intuitívna.
A tak sa pozrime na hlavné nástroje vizuálneho editora.
- dialógové okno editora: Pomocník.
- vymaže okno editora na vytvorenie nového dokumentu.
- vrátiť späť poslednú akciu (CTRL+Z).
- vráti poslednú akciu (CTRL+Y).
- použiť alebo odstrániť tučné písmo na vybraný text.
- použiť alebo odstrániť kurzívu na vybraný text.
- použiť alebo odstrániť podčiarknutie vybraného textu.
- použiť alebo odstrániť prečiarknutie vybratého textu.
- Zarovnať vybraný text alebo prvky na celú šírku, na stred, doľava a doprava.
- vkladanie a mazanie blokových úvodzoviek.
- použiť formát bloku na vybraný text alebo prvok.
Tento nástroj editora by mal byť prediskutovaný podrobnejšie.
Tento nástroj umožňuje orámovať vybraný text potrebnými tagmi, čo je dôležité pre SEO optimalizáciu stránky.  Z dôležitých možností tu:
Odstavec
- orámovanie vybraného textu tagmi, čo znamená, že text odkazuje na aktuálny odsek.  Značky sú automaticky orámované všetkými odsekmi textu vloženými z editora Word.
Blokový prvok (Div)
- blokový prvok html stránky, ktorý je navrhnutý tak, aby ovládal umiestnenie a dal širokú škálu vlastností textom, obrázkom, odkazom a iným objektom.
Adresa
- štítok 
je navrhnutý na ukladanie informácií o autorovi a môže obsahovať akékoľvek HTML prvky, ako sú odkazy, text, zvýraznenia atď. Vyhľadávacie nástroje analyzujú obsah tejto značky, aby zhromaždili informácie o autorovi stránky.  Predvolený text v kontajneri 


 zobrazené kurzívou.  Ak túto funkciu nepotrebujete, použite štýly na zmenu štýlu písma.
Naformátované
- štítok 
Určuje vopred naformátovaný text.  Text v prvku 
 zvyčajne sa vykresľuje písmom s pevnou šírkou a zachováva aj medzery a zlomy riadkov.
hlavička
– text, na ktorý sa vzťahuje táto možnosť, je orámovaný značkami h1, h2, h3 atď.  Značky h1-h6 kombinujú funkcie štýlu a optimalizácie.  Nadpisy h1-h6 sú z hľadiska optimalizácie prízvukové značky, ktorých úlohou je upozorniť vyhľadávacieho robota na najdôležitejšie úseky textu a jednotlivé slová z hľadiska určenia predmetu a témy.
Kód
- štítok je určený na zobrazenie jedného alebo viacerých riadkov textu, čo je programový kód.  Patria sem premenné, kľúčové slová, funkčné texty atď. Prehliadače spravidla zobrazujú obsah kontajnera 

 ako zmenšený text s jednou medzerou.

Príklad kódu
- text, na ktorý sa táto možnosť vzťahuje, je orámovaný značkami .  Tag slúži na zobrazenie textu, ktorý je výstupom počítačového programu alebo skriptu.  Prehliadače zvyčajne zobrazujú text v kontajneri 

 ako jednorozmerné písmo.  Štýly vám umožňujú vytvoriť si vlastný vzhľad a dojem.
Vložený prvok (SPAN)
- orámovanie textu pomocou značiek.  Značka je určená na definovanie vložených prvkov dokumentu.  Na rozdiel od blokových prvkov ako 
, 

 alebo 
pomocou značky môžete zvýrazniť časť informácie v rámci iných značiek a nastaviť pre ňu vlastný štýl.
Definície pojmov
- orámovanie textu pomocou značiek 
.  Tag 


 je jedným z troch prvkov 
, 



, 


 



…


 kam ide značka 



 vytvorenie výrazu a značky 



Popis Definície
- orámovanie textu pomocou značiek 



.  Tag 



 je jedným z troch prvkov 
,


,




, určený na vytvorenie zoznamu definícií.  Každý takýto zoznam je umiestnený v kontajneri 




…


 kam ide značka 



 vytvorenie výrazu a značky 




 definovanie pojmu.
- výber štýlov z CSS aktuálnej šablóny.Veľmi dôležitý nástroj. 
- vymazať štýl formátovania vybratého textu alebo prvku.
- vymazať vybraný text z HTML kódu.
– Vyberte písmo pre vybratý text.
- Vyberte veľkosť písma pre vybraný text.
- zmeniť farbu textu a farbu pozadia pre vybraný text.
- vystrihnúť vybraný text (tlačidlo nefunguje vo všetkých prehliadačoch).  Namiesto toho použite klávesovú skratku CTRL+X.
- kopírovanie textu do schránky (nefunguje vo všetkých prehliadačoch).  Namiesto toho použite klávesovú skratku CTRL+C.
- slúži na prilepenie textu z Wordu a iných textových editorov.  Pohľad editora sa určí automaticky.  Po výbere možnosti sa otvorí okno.

V tomto okne musíte vložiť (Ctrl + V) text z editora Word alebo akéhokoľvek iného editora, v ktorom je materiál uložený, a kliknúť na tlačidlo "Vložiť".
Potom text maximálne zachovanie štýlov formátovania sa vloží do textového poľa JCE.
- slúži na vkladanie textu a zároveň ho vyčistíte od štýlov formátovania.  Pri použití tejto možnosti získate len pevný text, niečo ako prilepenie z poznámkového bloku.  Po kliknutí na tlačidlo sa otvorí okno s nápisom „Prilepiť ako obyčajný text“.
– zväčšiť/zmenšiť odsadenie vybraného textu alebo prvku od ľavého okraja stránky.
- vytvorenie usporiadaného zoznamu (z rozbaľovacieho zoznamu si môžete vybrať čísla, malé alebo veľké písmená atď.).
- vytvorte zoznam s odrážkami (kruh, disk, štvorec).
- nastavenie textu v dolnom alebo hornom indexe.
- zmeniť veľké a malé písmená vybraného textu (veľké, malé písmená, každá veta s veľkými písmenami, malé písmená).
- vyberte špeciálny symbol z rozbaľovacieho poľa so symbolmi.  Keď umiestnite kurzor myši na symbol, v pravej časti okna sa zobrazí „ukážka“ symbolu, jeho HTML kód a NUM kód.

- orientácia označeného textu alebo prvkov: zľava doprava alebo sprava doľava.
- rozšírenie veľkosti editora na celú obrazovku.

- okno pre vkladanie a úpravu kódu.  Kliknutím na toto tlačidlo sa otvorí editor html kódu so zvýraznením:
Editor html kódu vizuálne zobrazuje štruktúru vašej stránky.  Pre pohodlie práce s kódom sú tu k dispozícii ďalšie tlačidlá, vďaka ktorým môžete povoliť alebo zakázať zvýraznenie kódu, číslovanie riadkov, môžete rýchlo nájsť a v prípade potreby nahradiť značky, slová v texte atď.
- obsah tlače.  Kliknutím na tlačidlo sa otvorí štandardné okno pre výber tlačiarne a nastavenie možností tlače.
- práca s tabuľkami.
– zobraziť alebo skryť sprievodcov (nezobrazené prvky na stránke lokality).
– zapnutie/vypnutie zobrazenia neviditeľných znakov (formátovanie, medzery a pod.).
– zobraziť alebo skryť prvky bloku.  Keď je táto možnosť povolená, bloky s textom a prvkami budú zvýraznené prerušovanou čiarou pre pohodlnú prácu s obsahom.
– vložte nezalomiteľnú medzeru (skratka  ).
- zmeniť štýl vybraného textu.Multifunkčný nástroj. 
- označí text ako citát alebo poznámku pod čiarou k inému materiálu.  Výber textu pomocou značky užitočné na zmenu štýlu obsahu pomocou CSS a používa sa aj na oddelenie kódu HTML do štrukturálnych prvkov.  Text vo vnútri kontajnera zvyčajne nastavujú prehliadače 

 kurzívou.  Po kliknutí na tlačidlo sa zobrazí modálne okno.

titul
- popis obsahu prvku vo forme tooltipu.
id
- určuje názov identifikátora štýlu.
trieda
- názov triedy, ktorý vám umožňuje priradiť značku k štýlu.
Štýl
- používa sa na štýlovanie prvku pomocou CSS.
Smer textu (smer)
- nastavuje smer a zobrazenie textu (zľava doprava alebo sprava doľava).
Jazyk
- hodnotu tohto parametra používa prehliadač na správne zobrazenie niektorých národných znakov.
Označuje, že sekvencia znakov je skratka (tag<skratka>).  Po kliknutí na tlačidlo sa zobrazí modálne okno podobné tomu, ktoré je uvedené vyššie.  Title (title) pridáva popis, v ktorom môžete uviesť vysvetlenie skratky.  Vyhľadávače navyše indexujú fulltextovú verziu skratky, čo sa dá použiť na zvýšenie hodnotenia dokumentu.
- označuje, že text je skratka.  Od skratky sa líši tým, že akronym je bežnou skratkou a je to samostatné slovo.  Skratky zahŕňajú nasledujúce slová: USA, DOS, TSUM, OSN, vzdelávací program atď.
V predvolenom nastavení je text umiestnený vo vnútri kontajnera<skratka> , podčiarknuté bodkovanou čiarou.  V modálnom okne pre skratku môžete vyplniť univerzálne atribúty úplne rovnako ako pre skratku.
- používa sa na zvýraznenie textu, ktorý bol v novej verzii dokumentu odstránený.  Text v kontajneri <del> prehliadače zvyčajne vykresľujú ako prečiarknuté.  Takéto zobrazenie umožňuje sledovať, aké zmeny boli vykonané v texte dokumentu.  Po kliknutí na tlačidlo sa zobrazí modal.

dátum/čas (dátum a čas)
- dátum a čas úpravy textu.
Citovať
- označuje odkaz na dokument, ktorý uvádza dôvod úpravy textu a ďalšie podrobnosti.
Všetky ostatné atribúty uvedené v tomto okne sú nám už známe.
– výber textu, ktorý bol pridaný do novej verzie dokumentu.  Text v kontajneri<ins> prehliadačmi zvyčajne označené ako podčiarknuté.  Takéto formátovanie vám umožňuje sledovať, aké zmeny boli vykonané v texte dokumentu.  Po kliknutí na tlačidlo sa zobrazí modálne okno s rovnakými atribútmi ako pri tlačidle „Vymazať“.
- vkladanie a úprava atribútov.  Atribúty sa používajú na definovanie toho, ako sa text správa po umiestnení kurzora myši, kliknutí atď.
Vybratý textový fragment sa umiestni do kontajnera<rozpätie>.  Tag <rozpätie> sa používa na definovanie vložených prvkov dokumentu.  Na rozdiel od blokových prvkov <tabuľka>, <p> alebo<div> pomocou značky <rozpätie>
 môžete zvýrazniť fragment dokumentu v rámci iných značiek a nastaviť vlastný štýl fragmentu.  Po kliknutí na tlačidlo sa zobrazí modálne okno.
Štandardná karta obsahuje známe atribúty.

Karta Udalosti


V záložke "Udalosti" (Udalosti) sú priradené udalosti, ktoré sa vyskytnú pri umiestnení kurzora myši, kliknutí atď.  kurzor na prvok.
Možné hodnoty:
onblur
- strata sústredenia.  Udalosť onBlur sa spustí, keď objekt stratí zameranie kliknutím alebo použitím klávesnice.  Zvyčajne sa to stane, keď kliknete na iný prvok aktuálneho textu.  Udalosť onblur je opakom udalosti zamerania.
zmeniť
- zmeniť hodnotu prvku formulára.  Udalosť onchange nastane, keď ovládací prvok formulára zmení svoju hodnotu.
po kliknutí
- udalosť nastane, keď sa klikne ľavým tlačidlom myši na prvok, ku ktorému je pridaný atribút onclick.
ondblclick
- dvojité kliknutie ľavým tlačidlom myši na prvok.
zameranie
- získanie prvku zaostrenia.  Napríklad pre textové pole je zameraná schopnosť zadávať text (blikajúci kurzor).
onkeydown
- tlačidlo je stlačené, ale nie uvoľnené.  Udalosť sa spustí po stlačení klávesu, ale keď kláves ešte nebol uvoľnený.
onkeypress
- tlačidlo je stlačené a uvoľnené.  Udalosť sa spustí, keď sa stlačí kláves na klávesnici a už bol uvoľnený.
na kľúč
- kľúč sa uvoľní.  Udalosť nastane po uvoľnení stlačeného tlačidla.
načítať
- dokument je vložený.  Udalosť naznačuje, že stránka sa úplne načítala vrátane obsahu, obrázkov, súborov CSS a externých skriptov.
onmousedown
- je stlačené ľavé tlačidlo myši.  Akčná udalosť sa podobá onclick a líši sa od nej tým, že nastane v momente stlačenia tlačidla myši.
onmousemove
- pohyb kurzora myši.  Udalosť sa používa na vytváranie rôznych efektov spojených s kurzorom myši, napríklad: popisy nástrojov.
onmouseout
- kurzor opustí prvok.  Udalosť sa spustí, keď sa ukazovateľ myši presunie mimo objekt.
onmouseover
- kurzor sa pohybuje nad prvkom.  Udalosť sa spustí, keď je kurzor myši nad prvkom.
onmouseup
- ľavé tlačidlo myši je uvoľnené.  Udalosť nastane po uvoľnení ľavého tlačidla myši.
pri resetovaní
- formulár sa vymaže.  Udalosť nastane pri vymazaní formulára, ku ktorému dôjde po stlačení tlačidla typu Reset.
onselect
- vybraný text v poli formulára.  Udalosť sa používa v textových poliach a spúšťa sa pri výbere textu pomocou myši alebo klávesnice.
onsubmit
- formulár bol odoslaný.  Udalosť sa spustí pri odoslaní formulára, spustí sa, keď používateľ klikne na tlačidlo typu Odoslať, grafické tlačidlo (typu obrázok).
vyložiť
- zatvorenie okna.  Udalosť sa spustí, keď sa stránka z nejakého dôvodu nenačíta, alebo keď sa stránka odstráni z okna alebo rámu.

Názov stránky
- názov stránky vytvorenej v dôsledku rozdelenia materiálu.
Alias ​​obsahu
- názov odkazu na stránku zobrazený v mini-menu.
Okrem odkazu na stránku v spodnej časti každej stránky (<<Назад - Вперед >>), v pravej hornej časti prvej stránky sa zobrazí mini-menu so zoznamom odkazov na druhú a ďalšie strany materiálu.  Vďaka mini-menu môžete jednoducho prechádzať zo strany na stranu pomocou ich názvov (alias) a výber položky „Všetky strany“ vám umožní zobraziť všetok materiál na jednej stránke.Pre pohodlie je ikona stránkovania duplikovaná tlačidlom „Zlom stránky“, ktoré sa nachádza v spodnej časti editora.
- vložiť/zmeniť obrázok.  Táto ikona sa objaví na paneli nástrojov editora po nainštalovaní doplnku Image Manager Extended, ktorý vám ušetrí veľa času a pomocou neho môžete: nahrávať obrázky a meniť ich veľkosť pri nahrávaní do správcu obrázkov, vytvárať priečinky, premenovať, vystrihnúť, kopírovať , prilepovať a odstraňovať priečinky a obrázky, vytvárať a odstraňovať miniatúry obrázkov, vytvárať alternatívne „obrázky s rolovaním“, upravovať obrázky v vstavanom editore obrázkov, vytvárať kontextové okná s obrázkami, galériami a popismi a ďalšie.
- vložiť/upraviť mediálny súbor. Táto ikona sa zobrazí na paneli nástrojov editora po nainštalovaní pluginu Správca médií, ktorý je určený na nahrávanie a vkladanie mediálnych súborov (Flash, Windows Media, QuickTime atď.) do článkov na webovej stránke, umožňuje jednoduché vkladanie filmov z Youtube a má široké možnosti nastavení. 

 
Po inovácii z Joomla!  1.5 pre Joomla!  3.0 Narazil som na problém s výstupom kódu do článkov Joomla!.  Keďže mne známe pluginy, ako napríklad Source from NoNumber, ešte neboli aktualizované, aby fungovali s novou verziou enginu, bolo potrebné hľadať spôsoby výstupu a zvýrazňovania kódu v článkoch pomocou štandardných nástrojov.  O natívnom plugine na zvýrazňovanie kódu GeSHi som už dávno vedel, no po neúspešnej skúsenosti s ním som ho takmer vôbec nepoužíval.  Problém sa však musel vyriešiť a ja, keď som získal trpezlivosť, som sa rozhodol zvládnuť tento doplnok, a ako sa ukázalo, nie márne.  Navyše sa ukázalo, že je to jednoduchšie, ako som si myslel...
Ukázalo sa, že GeSHi nie je o nič horší ako alternatívy pre Joomla!  3.0 teraz nie je k dispozícii a za 2.5 už nie tak veľa.  Práca s ním samozrejme nie je taká pohodlná, ako napríklad so Sourcerom, musíte vypnúť editor, ale jeho možnosti sa ukázali byť zďaleka slabé, ako som si myslel.  Doplnok GeSHi podporuje nasledujúce syntaxe programovacích jazykov:
html4strict
javascript
mysql
php stručný
Celkom dobrý zoznam, vzhľadom na to, že plugin je štandardný.  Nájdete ich v priečinku plugins/content/geshi/geshi/geshi.
Doplnok môžete zavolať pomocou nasledujúcej konštrukcie: 
 

.  Stačí nahradiť požadovaný programovací jazyk v parametri lang= a poskytne potrebné zvýraznenie a výstup kódu.  Na mojej stránke je dostatok príkladov fungovania stránky, napríklad v tomto článku o finalizácii Joomla!  2.5 jasne ukazuje, ako je kód zobrazený a zvýraznený.  Nižšie v tomto článku uvidíte aj príklad fungovania pluginu.

Je tu však jedno upozornenie – pri pridávaní kódu do článku je lepšie editor vypnúť.  Pretože existuje možnosť, že editor jednoducho vystrihne kód z článku alebo ho zdeformuje na nepoznanie.  Do článku sa dá vložiť cez HTML, ale potom je potrebné zakázať filtrovanie vo všeobecných nastaveniach stránky pre osobu, ktorá vkladá kód a možno budete musieť zakázať filtrovanie aj v plugine editora, čo neodporúčam robiť, keďže bezpečnosť stránok je nadovšetko.
Niektorí používatelia môžu potrebovať číslovanie riadkov vo výstupe kódu, preto môžete prejsť na tento riadok:
 var $line_numbers = GESHI_NO_LINE_NUMBERS; 
Nahraďte nasledujúcim:
 var $line_numbers = GESHI_NORMAL_LINE_NUMBERS; 
To je všetko, vo výstupe kódu zobrazíte aj číslovanie.  Zdá sa mi, že je to zbytočné, aspoň pre moju stránku, preto som neuviedol číslovanie.
Mimochodom, kód môže presahovať rámec článku, v závislosti od šablóny, ktorú používate, vo všeobecnosti sa to stáva pomerne zriedka, ale ako sa hovorí „zriedka, ale trefne“.  V tomto prípade, aby ste dosiahli normálne zobrazenie kódu pluginom a zabezpečili, že sa kód nikam nedostane, musíte do súboru CSS vašej šablóny napísať nasledujúcich pár riadkov:
Pre (veľkosť písma : 9px ; farba pozadia : #F6F6F6 ; šírka : 550px ; pretečenie : auto ; )
To je všetko.  Získame správne zobrazenie kódu v Joomla!  akejkoľvek verzie, bez inštalácie rozšírení tretích strán, čo je samozrejme pohodlné, no vkladanie kódu do článku nie je vždy pohodlné, keďže editor často do tohto procesu zasahuje.
Ďalším dôležitým detailom pluginu GeSHi pre Joomla je, že generuje odkazy na dokumentáciu pre určité kľúčové slová priamo v kóde.  Na jednej strane je to veľmi pohodlné, ale čo keď sa zúčastňujete výmeny odkazov?  A vo všeobecnosti veľa externých odkazov na stránkach nie je dobré vo vzťahu k SEO.  Aby ste zakázali pridávanie externých odkazov podľa kľúčových slov v GeSHi pre Joomla, musíte v súbore plugins/content/geshi/geshi/geshi.php nájsť tento riadok:
 var $keyword_links = true ;  A nahraďte ho nasledujúcim: var $keyword_links = false ; 
Vyššie, ako som povedal, môžete vidieť dve aplikácie pluginu GeSHi naraz.  Výstupom je PHP aj CSS, pričom editor nevypínam, ale jednoducho ho vkladám cez HTML editor.
Pri písaní článkov o programovaní a tvorbe WEB často musíte uviesť príklad zdrojového kódu.  Zároveň mnohé textové editory majú možnosť takéhoto zvýraznenia a kód vyzerá krásne a čitateľne (premenné sú zvýraznené jednou farbou, konštanty inou atď.).
systém Joomla 1.5 má podporu pre zobrazenie zdrojových kódov pomocou pluginu " Obsah – Zvýrazňovač kódu (GeSHi)“, ktorý zobrazuje formátovaný kód v materiáloch a je založený na engine GeSHi. 
Ale pre formátované zobrazenie zdrojového kódu je vhodné použiť špeciálny plugin na jeho zvýraznenie.  Jedným z týchto pluginov je Joomler SyntaxHighlighter ktorý sa ľahko inštaluje a používa.  Tento plugin používa na svoju prácu Javascriptovú knižnicu SyntaxHighlighter 2.0. 
Najnovšiu verziu doplnku si môžete stiahnuť na webovej stránke vývojára na tomto odkaze: http://www.joomler.net/download/81-joomla15-plugin.html
Pred inštaláciou doplnku SyntaxHighligher 2.0.1 na stránku ho musíte najskôr rozbaliť na lokálnom počítači, pretože sa sťahuje z dvoch archívov (archív je v archíve).
Ak chcete nainštalovať doplnok, prejdite na paneli správcu do ponuky „Rozšírenia“ a vyberte položku „Inštalovať / Odstrániť“, potom vyberte archív doplnku a kliknite na tlačidlo „Nahrať súbor a nainštalovať“. 
Teraz musíte aktivovať doplnok.  Ak to chcete urobiť, prejdite do ponuky "Rozšírenia" a vyberte položku "Správca doplnkov".  V "Plugin Manager" vyhľadajte plugin "Content - SyntaxHighlighter" a aktivujte ho kliknutím na biely krížik na červenom kruhu (obr. 2).  Môžete tiež prejsť do nastavení pluginu a vybrať tému, ktorá bude určovať štýl zobrazovania zdrojového kódu v článkoch. 

Používanie pluginu je veľmi jednoduché.  Na tento účel je potrebné v článku vložiť zdrojový kód medzi nasledujúce značky: 
...
,
Kde parameter pre štetec určuje programovací jazyk, v ktorom chcete zobraziť zdrojový kód.  Napríklad, ak chcete vypísať kód PHP, musíte zadať štetec: php.
Toto nastavenie podporuje nasledujúce programovacie jazyky: 
as3, actionscript3, bash, shell, c-sharp, csharp, cpp, c, css, delphi, pas, pascal, diff, patch, groovy, js, jscript, javascript, java, jfx, javafx, perl, pl, php, obyčajný, text, ps, powershell, py, python, rails, ror, ruby, scala, sql, vb, vbnet, xml, xhtml, xslt, html, xhtml.
Môžete tiež nastaviť ďalšie možnosti:
Možnosti doplnku

Parameter

Predvolená hodnota

Popis

automatické odkazy
pravda
Určuje, či sa majú zvýrazniť odkazy v kóde, aby sa na ne dalo kliknúť
class-name
" "

Umožňuje vám pridať triedu používateľov
kolaps
falošné
Zrolovaný kód
prvá línia
1

Určuje číslo prvého riadku
žľab
pravda
Zapína/vypína zvislé pravítko
Zlatý klinec
nulový
Zvýrazní jeden alebo viac riadkov kódu
html skript
falošné
Umožňuje zvýraznenie rôznych HTML/XML kódu
svetlo
falošné
Zapína/vypína zvislé a vodorovné pravítka
inteligentné karty
pravda
funkcia zalamovania - povoliť posuvník (ak je kód dlhý)
tab-size
4

Veľkosť karty
panel nástrojov
pravda
Zapne/vypne pomocnú lištu
zavinovacie linky
pravda
Povolí inteligentné karty
pravítko
falošné
Vloží vodorovné pravítko
Napríklad kód 
...
 
Používa sa na zobrazenie kódov jazyka Javascript, kde je zvýraznený 2., 4. a 6. riadok a kód začína od 10. riadku.
Tento kód je potrebné pridať do článku v režime html (bez grafického editora).  K tomu má editor TinyMCE tlačidlo „Upraviť html zdroj“ (obr. 3). 


Na stránke bude mať náš zdrojový kód taký krásny a čitateľný vzhľad (obr. 4): 







            

         
		 
		 

		
	

	
Súvisiace články
		


     

        
                
                Ako otvoriť ods.  Ako otvoriť ODS?  Tabuľka opendocument ods ako open
            
    
 

        
                
                Navrhovanie skupiny VKontakte s prihliadnutím na inovácie
            
    
 

        
                
                Ovládače skenera Canon
            
    
 

        
                
                Tlačiareň netlačí a nie je k dispozícii - čo robiť
            
    
 

        
                
                Najlepšie emulátory Androidu pre PC Najlepšie emulátory herných konzol pre Windows
            
    
 

        
                
                Aká je prípona súboru .odt?