Gotovo svi blogeri, kreatori sadržaj ili programeri tehnologije ponekad moraju prikazati istaknute isječke koda na svom blogu. Ovo samo po sebi može biti glavobolja. Međutim, isticanje jednog ili više redaka u ovom isječku također može biti potrebno, a ta funkcionalnost nažalost nije dio većine integracija koda. Srećom, dodatak SyntaxHighlighter Evolved postoji. Pokazat ćemo vam kako ga koristiti da kod bude što čistiji i čitljiviji.
SyntaxHighlighter Evoluved
Instalacija i aktivacija dodatka je jednostavna. Možete ga pronaći u spremištu dodataka WP.org ali pobrinite se da to dobro učini Alex Mills (Viper007Bond), jer zaista ima puno rezultata. Međutim, znamo da je ovaj pouzdan i ažuran. Štoviše, ovaj dolazi sa specijaliziranim blokom za urednika Gutenberga. A da ne spominjemo brojne parametre koji vam omogućuju personaliziranje vašeg iskustva, što ga čini našim izborom za ovu vrstu zadataka.
U izborniku Parametri na vašoj WordPress nadzornoj ploči naći ćete novu stavku pod nazivom SyntaxHighlighter . Samo naprijed i kliknite na nju. Tamo možete prilagoditi svaku sitnicu koja će vam trebati za ugradnju isječaka na vašu WordPress stranicu.
Postavke SyntaxHighlighter
Stranica postavki za dodatak je relativno jednostavna. Jedan poseban element koji nam se sviđa kod ovog dodatka je to što dobivate dobar broj prilagodbi u vezi s načinom na koji se kôd prikazuje na vašoj web-lokaciji. Možete dodati CSS klase u ugradnju, prilagoditi ispunu brojeva retka, odabrati teme boju, koristite pametne kartice i prijelome redaka i odlučite kako će se učitavati isticanje kodnog jezika na cijelom web-mjestu.
Želimo definirati tri određena parametra koja bi većina ljudi trebala znati.
Verzija dodatka, brojevi linija i veličine kartica
Prvo je koju verziju dodatka učitavate. Iako dodatak ostaje ažuriran u spremištu, možete birati između verzija 2.x i 3.x dodatka , ovisno o načinu na koji želite prikazati svoj kôd. Obje su sigurne, međutim, svaka nudi specifične značajke koje druga ne nudi (u trenutku pisanja ovog članka).
Ako korisnici kopiraju vaš kôd, najvažnija je verzija 3.x. Međutim, ako je vaš za prikaz korisniji od stvarnog uslužnog programa, novi vam redak u verziji 2.x možda je bolji za vas jer uklanja potrebu za korištenjem pomičnih traka. za velike isječke koda.
Tada trebate prikazati brojeve linija ili ne. Za velike dijelove koda i tutorijala brojevi redaka su neprocjenjivi. Međutim, kada imate kratke isječke, nije ih potrebno trajno označavati kao retke 1 i 2. Njihovo uklanjanje može značajno poboljšati izgled koda.
A onda je tu veličina kartice još uvijek kontroverzna. Zadana je opcija 4, ali možete je promijeniti na bilo koji broj. Uključujući točnu vrijednost 2. (Da, shvaćamo da ne postoji ispravna vrijednost. Svidjaju nam se samo 2 razmaka za kartice.)
Vaš kôd i kratice
Ako se pomaknete na dno stranice Parametri , vidjet ćete pregled velikog koda, kao i velik broj parametara kratkog koda. Dobro bi bilo potrošiti vaše vrijeme da biste ih pregledali, samo da biste vidjeli što sve dodatak može učiniti za prikazivanje vaših isječaka. Također, ovdje će se odraziti sve promjene koje ste napravili gore na prikazu koda u gornjim postavkama. Stoga budite sigurni da ste pritisnuli Save nakon promjene bilo koje opcije.
Iako neki ljudi nisu najveći ljubitelji kratkih kodova jer vas mogu povezati s određenim dodacima, mislimo da ih vrijedi koristiti jer su pametni i lako se pamte. Ako ništa drugo, trebate upamtiti dvije stvari i tada će dodatak najbolje raditi za vas.
ou ou ou et...bien, vous obtenez</li><li>[highlight 5-9]</li></ul>
Ili neke varijacije. Ako se sjećate, sigurni ste u različite stvari koje možete učiniti s ovim dodatkom. Iako možete koristiti dugački identifikator, dodatak SyntaxHighlighter izgrađen je dovoljno dobro da pojednostavi vaš rad.
Koristite kratke kodove
Gdje god možete prikazati kratki kod, možete ih koristiti. U Divi ili klasičnog uređivača, možete koristiti modul Text ili uređivač TinyMCE i samo zalijepiti kod između kratkih kodova. Zbog načina na koji kartica Visual funkcionira, predlažemo korištenje kartice Tekstovi zadržati ove posebne znakove oblikovanja.
Ako ste korisnik Gutenberga / Block Editora, stvari su tako jednostavne. Za to možete, opet, koristiti tekstualni blok. Još jednostavnije, prilagođeni HTML blok. Kao i gore, zalijepite kôd u oznake kratkog koda.
Još bolje, blok SyntaxHighlighter Evolved je sam po sebi. Dodatak uključuje vlastiti Gutenbergov blok; pa, ako niste kratki kôd i ne želite se zezati s postavkama, ne morate. Samo pronađi blok ispod formatiranja i umetnite je u svoju poruku ili stranicu.
Bez obzira na to kako umetnete kôd, isti će prikaz biti prikazan na prednjem kraju vaše WordPress stranice.
Da sumiram
Iz mnogih ćete razloga možda trebati predstaviti svojoj publici isječke. Možda pišete vodiče ili objavljujete rješenja za uobičajene probleme koje publika može uzeti i koristiti kako god želi? Ali ponekad integracija GitHub-a jednostavno ne pruža vrstu iskustva koje želite za svoje korisnike. Tada vam treba dodatak poput SyntaxHighlighter Evolved.
U samo nekoliko klikova, uz malo prilagodbe i Gutenbergov blok ili kratki kod, publika će bez problema istražiti vaš kôd.
