Jak přidat styly do TinyMCE & Markdown obsahu

Mnozí autoři dávají přednost pracující v Markdown protože je to jednodušší jazyk s menšími překážkami. Je to zdaleka dokonalé, ale nabízí čistší zobrazení textu s lehkostí exportu do HTML.

Výchozí styly značky Markdown jsou bohužel dost nudné. Ale s knihovna wysiwyg.css, můžeš mají živý dokument okamžitě.

Tato bezplatná knihovna CSS transformuje veškerý základní obsah TinyMCE nebo Markdown do formátované, snadno čitelné bloky HTML.

Pro použití tohoto pluginu nemusíte znát žádný složitý HTML / CSS. Jednoduše zabalit generovaný obsah do div s třídou .wysiwyg, a vy jste všichni.

Skutečným problémem je vytvoření aplikace, která by tento proces automatizovala, nebo přidáním této knihovny do backendu pro uživatelský administrační panel.

Možnosti jsou však nekonečné a můžete to dokonce použít pro místní psaní chcete-li exportovat svůj obsah z Markdown do HTML.

Ve výchozím nastavení má tato knihovna CSS podporu pro všechny velké HTML tagy představitelné. To zahrnuje všechny záhlaví, seznamy, odkazy, před / kódové značky, číslice a dokonce i poloobsažené tagy a . Je tu úplný seznam v repozitáři GitHub, pokud si to chcete ověřit.

Pokud definujete své vlastní typografické styly, mohou to být i ty přepsat výchozí nastavení v šabloně stylů. Takže můžete získat všechny výhody wysiwyg.css smíšené s vlastními možnostmi písma.

Knihovna nemohla být jednodušší. Prostě místně stáhnout kopii nebo vytáhněte ji přímo použitím npm install wysiwyg.css

Odtud jen zahrnout soubor CSS v hlavě dokumentu a nechte ji běžet. Zaměří se pouze na obsah uvnitř kontejneru s třídou .wysiwyg, takže tato třída by měla zabalit jakýkoliv kontejner, který chcete.

Knihovna je stále aktualizován poločasově, takže můžeš najít nejnovější aktualizace v hlavním repo programu GitHub. A pokud máte návrhy nebo nápady na nové aktualizace, neváhejte se podělit s tvůrcem Jeremy Thomasem na jeho stránce Twitter @jgthms.