Plugin WP pentru afișarea codului

Plugin WP pentru afișarea codului

Există nenumărate plugin-uri pentru WordPress care îți permit afișarea bucăților de cod. Eu folosesc SyntaxHighlighter Evolved de mult timp, dar am încercat și altele, fără a găsi unul care să mă mulțumească.

Toate pluginurile au cel puțin una din următoarele probleme:

  1. Nu se împacă cu TinyMCE – editorul de WP. Ba se face escape la caractere, ba se strică formatarea la undo (Fără să se repare la loc la redo!), ba una, ba alta. Frustrant.
  2. Nu permit reutilizarea secvențelor de cod. Pe de altă parte, în zece ani de blog am avut nevoie de vreo trei ori să reutilizez secvențe de cod, deci nu știu dacă este atât de grav.
  3. Imposibilitatea de categorisire și/sau căutare între snippets (probabil că ăsta e motivul pentru care nu prea am reutilizat secvențe de cod? :D )
  4. Inexistența unui editor ceva mai avansat pentru cod. Poate că 2-3 linii de cod le poți scrie direct în TinyMCE, dar când ai blocuri ceva mai mari, te duci în editor, modifici, te întorci în browser etc. Pe mine mă scoate foarte ușor din flow treaba asta…
  5. O modalitate ușoară de a începe numerotarea liniilor de la un anumit număr;
  6. șamd.

Prin urmare, am făcut ce face orice programator: scratching my own itch. Am început să lucrez la un plugin care rezolvă toate problemele de mai sus, folosind ACE pentru editarea codului și Prism pentru afișare (care are doar vreo 5kb). Încă e în stadiu incipient, dar sunt foarte mulțumit de ce iese și de progres.

Momentan mă lupt cu API-ul TinyMCE, care are una dintre cele mai proaste documentații văzute de mine vreodată.

La cât îmi permit să lucrez la el, estimez că într-o săptămână este gata de folosire :)

Cineva interesat să testeze?

12 Comentarii

Ionuț Staicu a scris

@Grey Panther: Prism este ridicol de mic, vreo 5kb cu tot cu sintaxă și plugin-uri.

Cel mai probabil markup-ul generat va depăși rapid dimensiunea asta, mai ales pentru bucăți de cod ceva mai complexe și/sau lungi.

Pe de altă parte, parsarea JS este ceva mai costisitoare dpdv al randării….

Decizii, decizii… :)

Oricum, implementarea unui alt mecanism de randare este o chestie ce ține de câteva hooks :)

Ethos a scris

Salut.

Am o întrebare conexă cu tema articolului tău. Mai exact e despre TinyMCE. Vreau să inserez atributul onmouseover în codul html al unui link. Din păcate, atributul dispare când trec din modul HTML în modul vizual. La fel se petrec lucrurile cu onclick.

M-am informat pe net și am aflat că TinyMCE, editorul folosit de WordPress, elimină multe elemente și atribute care nu-i plac, printre care și acestea două. Am găsit ceva soluții care implică editarea fișierului functions.php cu un „hook” care să extindă lista implicită a elementelor valide acceptate de TinyMCE. Din păcate, soluția asta nu-mi folosește, pentru că functions.php e un fișier al temei și deci nu-i o soluție de durată, dacă uit de ea și schimb tema revin la setările inițiale, ori eu vreau o soluție simplă și definitivă.

Am găsit un plugin, menționat în acest articol, care permite setarea explicită a anumitor elemente și atribute corespunzătoare ca fiind valide. De exemplu, poți adăuga elementul iframe, cu atributele: class, id, src, style, după cum rezultă din screenshot-ul pluginului.

Din păcate, ca să adaug atributul onmouseover, trebuie să adaug prima dată elementul a (pentru link) și apoi să-i atașez acest atribut. Dar după ce adaug elementul a și atributul onmouseover pentru el, toate celelalte atribute ale unui link se șterg. Cu alte cuvinte trebuie să adaug la a, pe lângă onmouseover, toate atributele pe care le vreau la un link, ca de exemplu: href, rel, target. Asta aș putea face, dar nu sunt expert în html și nu aș dori să pierd din vedere un atribut util.

Întrebarea mea este dacă știi cumva un alt plugin similar sau dacă mă poți ajuta cu o soluție pentru ce mă doare pe mine: o modalitate simplă de a specifica ca editorul wp (de fapt TinyMCE) să nu-mi mai șteargă onmouseover din codul html al unui articol/pagini și care soluție să rămână activă după ce schimb tema și să nu îmi creeze complicații suplimentare (riscul ca alte atribute ale linkului să fie șterse, dacă nu le specific explicit și pe acelea).

Mersi.

Grey Panther a scris

@Ethos: hmm, parca poti hook-ui functiile si din plugin-uri, nu numai din teme? Oricum, pentru situatia „am schimbat ceva in tema, am facut update la tema si acuma s-au pierdut toate customizarile” poti sa te uiti la „child themes”. Dar nu prea te ajuta daca vrei sa schimbi temele si sa pastrezi customizarea.

Ionuț Staicu a scris

TinyMCE este un fel de dark magic, nu-ți face prea mari speranțe să faci chiar ce-ți dorești. Inițial eu aș fi vrut să fac un fel de edit in place, unde s-ar fi putut edita codul, dar… e mult prea multă bătaie de cap :)

Dacă vrei să doar să adaugi un event în frontend (deci după ce ai dat publish), ai putea adăuga o clasă respectivului link și faci bind pe acel event.

Pe lângă asta, dacă plănuiești ca rezultatul muncii tale să fie folosit de oricine altcineva în afară de tine, fii FOARTE rezervat în a modifica funcționalități din core.

Adaugă un comentariurăspuns pentru

Link-urile în context sunt binevenite. Comentariile fără nume/email valid sunt șterse.
PS: Comentariul NU este editabil.

Site-ul blog.iamntz.com utilizează cookie-uri. Continuarea navigării presupune acceptarea lor. Mai multe informații.

windows apple dropbox facebook twitter