Cum să adăugați stiluri în conținutul TinyMCE & Markdown

Mulți scriitori preferă lucrează în Markdown pentru că este un limbaj mai simplu, cu mai puține obstacole de urcare. S-a acordat că este departe de a fi perfect, dar oferă o vizualizarea mai curată a textului cu ușurință de exportarea în HTML.

Din păcate, stilurile implicite Markdown sunt de obicei destul de plictisitoare. Dar cu wysiwyg.css bibliotecă, poti aveți un document vibrant imediat.

Această bibliotecă gratuită CSS transformă toate conținutul dvs. de bază TinyMCE sau Markdown în formatate, ușor de citit de HTML.

Nu aveți nevoie să cunoașteți niciun HTML / CSS complex pentru a utiliza acest plugin. Pur şi simplu înfășurați conținutul generat într-o div cu clasa .WYSIWYG, și sunteți toți pregătiți.

Dificultatea reală este construirea unei aplicații care să automatizeze acest proces sau adăugarea acestei biblioteci pe backend pentru un panou de administrare utilizator.

Cu toate acestea, posibilitățile sunt nesfârșite și chiar puteți folosi acest lucru pentru munca scrisă la nivel local dacă preferați să exportați conținutul de la Markdown la HTML.

Implicit, această bibliotecă CSS are suport pentru fiecare etichetă HTML importantă imaginabil. Aceasta include toate anteturile, listele, link-urile, etichetele pre / cod, cifrele și chiar etichetele semi-obscure cum ar fi și . E a lista plina în reputația GitHub dacă doriți să o verificați.

Dacă vă definiți propriile stiluri tipografice, acestea pot chiar rescrie setările implicite în foaia de stil. Deci, puteți obține toate avantajele wysiwyg.css amestecat cu opțiunile de fonturi proprii.

Biblioteca nu a putut fi mai ușor de configurat. Doar descărcați o copie la nivel local sau trageți-l direct utilizând npm instalează wysiwyg.css

De acolo, tu doar includeți fișierul CSS în capul documentului și lăsați-l să ruleze. Se va viza doar conținutul în interiorul unui container cu clasa .WYSIWYG, astfel încât această clasă ar trebui să înfășoare orice container doriți.

Biblioteca este în continuare actualizate semi-frecvent, Asa ca poti găsiți actualizările recente în principal repo GitHub. Și dacă aveți sugestii sau idei pentru noi actualizări, nu ezitați să le împărtășiți cu creatorul Jeremy Thomas pe pagina lui Twitter @jgthms.