Hoe stijlen toevoegen aan TinyMCE en Markdown Content

Veel schrijvers werken liever in Markdown omdat het een eenvoudiger taal is met minder hindernissen om te klimmen. Toegegeven, het is verre van perfect, maar het biedt een schoner beeld van je tekst met het gemak van exporteren naar HTML .

Helaas zijn de standaard Markdown-stijlen meestal behoorlijk saai. Maar met de bibliotheek wysiwyg.css kunt u binnen no-time een levendig document hebben.

Deze gratis CSS-bibliotheek transformeert al je standaard TinyMCE- of Markdown-inhoud in opgemaakte, gemakkelijk leesbare HTML-blokken .

U hoeft geen complexe HTML / CSS te kennen om deze plug-in te gebruiken. Verpak de gegenereerde inhoud eenvoudig in een div-bestand met de klasse .wysiwyg en u bent klaar.

De echte moeilijkheid is het bouwen van een app die dit proces zou automatiseren, of het toevoegen van deze bibliotheek aan de backend voor een paneel voor gebruikersadministratie.

De mogelijkheden zijn echter eindeloos en u kunt dit zelfs gebruiken voor lokaal schrijfwerk als u uw inhoud liever exporteert van Markdown naar HTML .

Standaard heeft deze CSS-bibliotheek ondersteuning voor elke denkbare grote HTML-tag . Dit omvat alle headers, lijsten, links, pre- / codetags, figuren en zelfs semi-obscure tags zoals en. Er is een volledige lijst in de GitHub-repo als je deze wilt bekijken.

Als u uw eigen typografische stijlen definieert, kunnen deze zelfs de standaardinstellingen in de stylesheet herschrijven . U kunt dus alle voordelen van wysiwyg.css combineren met uw eigen lettertype-opties .

De bibliotheek kan ook niet eenvoudiger worden ingesteld. Download gewoon een kopie lokaal of trek het rechtstreeks met behulp van npm install wysiwyg.css

Van daaruit neemt u gewoon het CSS-bestand op in uw documentkop en laat u het uitvoeren. Het target alleen de inhoud in een container met de klasse .wysiwyg, dus deze klasse moet elke gewenste container inpakken.

De bibliotheek wordt nog steeds semi-frequent bijgewerkt, zodat je recente updates kunt vinden in de hoofdrepos van GitHub. En als je suggesties of ideeën hebt voor nieuwe updates, kun je deze delen met de maker Jeremy Thomas op zijn Twitter-pagina @jgthms.