How to Add Styles to TinyMCE & Markdown Content
Many writers prefer working in Markdown because it’s a simpler language with fewer hurdles to climb. Granted it is far from perfect, but it offers a cleaner view of your text with the ease of exporting into HTML.
Read Also: A Guide to Writing Web Content Using Markdown
Unfortunately, the default Markdown styles are usually pretty boring. But with the wysiwyg.css library, you can have a vibrant document in no time.
This free CSS library transforms all your basic TinyMCE or Markdown content into formatted, easy-to-read blocks of HTML.
You don’t need to know any complex HTML/CSS to use this plugin. Simply wrap the generated content into a div with the class .wysiwyg, and you’re all set.
The real difficulty is building an app that would automate this process, or adding this library onto the backend for a user admin panel.
However, the possibilities are endless, and you could even use this for local writing work if you prefer to export your content from Markdown to HTML.
By default, this CSS library has support for every major HTML tag imaginable. This includes all headers, lists, links, pre/code tags, figures and even semi-obscure tags like <sup> and <abbr>. There’s a full list in the GitHub repo if you want to check it out.
If you define your own typographic styles, these can even rewrite the default settings in the stylesheet. So you can get all the benefits of wysiwyg.css mixed with your own font choices.
The library could not be easier to setup either. Just download a copy locally or pull it directly using npm install wysiwyg.css
From there, you just include the CSS file in your document head, and let it run. It’ll only target the contents inside a container with the class .wysiwyg, so this class should wrap whatever container you want.
The library is still being updated semi-frequently, so you can find recent updates in the main GitHub repo. And if you have suggestions or ideas for new updates feel free to share with the creator Jeremy Thomas on his Twitter page @jgthms.
Read Also: 10 Best Free Source Code Editors