Hello,
I am trying to implement the blog for my website. I decided to go with NimblePublisher as I need just the most basic functionality.
One thing it does is translating markdown code into html. One thing I notice is that the result completely lacks styling.
For example, in my .md file I have, say, # Welcome. It then gets translated into <h1>Welcome</h1>, but the output in the browser is a mere text, no bigger/bolder/darker font etc.
I believe, it makes sense, because there’re no classes.
But then I see on the internet blogs claiming to have been implemented with the help of NimblePublisher, and they all have proper looks.
Please, help me to understand what I am missing here.
Also, it does not display correctly, quotes, lists, links etc.
The images and bold/italic/strikethrough work fine.
Hi there!
Just like you’ve observed, there are no CSS classes associated with the output. This is because NimblePublisher serves the purpose of turning markdown files into HTML and metadata (often referred to as “front matter” in static site lingo). It will be up to you as the user of NimblePublisher to provide CSS, if desired. NimblePublisher is not a “fully-fledged web content publishing system” in the same sense as you might be expecting from it, but rather one part of a whole.
The big picture of NimblePublisher is that it will allow you to solve the problem of converting markdown files to HTML and associated metadata, and allows you to then choose how to serve that HTML. This blog post from Dashbit explains how their own website uses NimblePublisher as one part of a Phoenix-based website.
Here’s one example article from Fly on how to use the Tailwind CSS library with NimblePublisher: Crafting your own Static Site Generator using Phoenix · The Phoenix Files. Do note that this article outlines just one of many possible ways to do this, as again, it will be up to you as the user of the library on how you wish to use and display the HTML content.
Depending on how your project is set up (and which libraries you use), you will need to find a way to include CSS in the output that is served to web browsers. If you’re using Phoenix as part of this project, for example, you’ll find plenty of resources for how to include CSS. Perhaps you can share more on what you’re wanting to achieve and with which tools?
Like you also observed, images and bold/italic/strikethrough display in your browser as you would expect. This is because those visual effects are achieved through various HTML tags rather than CSS 
. I would expect list elements to also display as lists, but perhaps there’s more to this story.
4 Likes
Thanks a lot. I’ve added css styling for blog class and now it all made sense.
1 Like
