Gotovo svi blogeri, kreatori sadržaja ili tehnološki programeri ponekad moraju prikazati istaknute isječke koda na svom blogu. Ovo samo po sebi može biti glavobolja. Međutim, isticanje jedne ili više linija u ovom isječku također može biti potrebno, a ova funkcionalnost nažalost nije dio većine integracija koda. Na sreću, dodatak SyntaxHighlighter Evolved postoji. Pokazat ćemo vam kako ga koristiti da kod bude što čistiji i čitljiviji.
SyntaxHighlighter Evolved
Instalacija i aktivacija dodatka je jednostavna. Možete ga pronaći u spremištu dodataka WP.org ali budite sigurni da je to dobro učinio 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 Gutenbergovog urednika. A da ne spominjemo brojne parametre koji vam omogućavaju da personalizirate svoje iskustvo, što ga čini našim izborom za ovu vrstu zadatka.
U meniju podešavanja na vašoj WordPress nadzornoj ploči naći ćete novu stavku pod nazivom SyntaxHighlighter . Samo naprijed i kliknite na njega. 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 dobijate dobar broj prilagođavanja u pogledu načina na koji se kod prikazuje na vašoj web stranici. Možete dodati CSS klase u ugrađivanje, podesiti dopunu broja linija, odabrati Teme boje, koristite pametne kartice i prijelome redova i odlučite kako će se individualni jezik kodiranja na cijeloj web lokaciji opteretiti.
Ž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 kod. Obje su sigurne, međutim, svaka nudi specifične funkcije koje druga ne nudi (u trenutku pisanja ovog članka).
Ako su korisnici najvažniji za kopiranje vašeg koda, verzija 3.x će to učiniti. Međutim, ako je vaš za prikaz korisniji od stvarnog uslužnog programa, nova linija u verziji 2.x možda je bolja za vas jer uklanja potrebu za korištenjem klizača. za velike isječke koda.
Tada trebate prikazati brojeve linija ili ne. Za velike dijelove koda i vodiča brojevi linija su neprocjenjivi. Međutim, kada imate kratke isječke, nije ih potrebno trajno označavati kao retke 1 i 2. Uklanjanje ih može značajno poboljšati izgled koda.
A onda je tu veličina kartice još uvijek kontroverzna. Zadana opcija je 4, ali možete je promijeniti na bilo koji broj. Uključujući tač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 podešavanja , vidjet ćete pregled velikog koda, kao i velik broj parametara kratkog koda. Dobro bi bilo potrošiti vaše vrijeme da ih pregledate, samo da biste vidjeli šta sve dodatak može učiniti za prikazivanje vaših isječaka. Također, ovdje će se odraziti sve promjene koje ste prethodno napravili na prikazu koda u gornjim postavkama. Zato 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 raditi najbolje što možete.
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 ga koristiti. U divi ili klasični uređivač, možete koristiti tekstualni modul ili TinyMCE editor i samo zalijepiti kod između kratkih kodova. Zbog načina na koji kartica Visual funkcionira, predlažemo korištenje kartice tekst zadržati ove posebne znakove za oblikovanje.
Ako ste korisnik Gutenberg / Block Editora, stvari su tako jednostavne. Za to možete, opet, koristiti tekstualni blok. Još lakše, prilagođeni HTML blok. Kao i gore, zalijepite kod u oznake kratkog koda.
Još bolje, SyntaxHighlighter Evolved blok je sam po sebi. Dodatak uključuje vlastiti blok Gutenberg; pa ako niste kratki kôd i ne želite se zezati s postavkama, ne morate. Samo pronađite blok ispod formatiranje i umetnite je u svoju poruku ili stranicu.
Bez obzira na to kako ubacite kôd, na prednjem kraju stranice WordPressa vidjet ćete isti prikaz.
Da sumiram
Možda ćete iz nekoliko razloga trebati predstaviti isječke svojoj publici. Možda pišete vodiče ili objavljujete rješenja za uobičajene probleme koje publika može uzeti i koristiti kako joj drago? 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.
