How to Validate Your Headings in Ghost 🚩

While reviewing one of my last posts, I struggled a bit with its headings. This is easy when the posts have only two levels of headings, h2 and h3, but if you want to go deeper, you have to rely on the heading shortcut (Ctrl + H) to switch from h2 to h6.

Have I clicked enough on the shortcut? Should I do it again? It can be difficult to see in preview mode if you have the correct headings. The titles can be really spaced from one to the other. Or the styles of the headings could be quite similar to each other, like in the default Casper theme (at least in the version that I currently have). 👻

Let's check an example where all the headings are side by side.

Yeah, the h3 and h4 are pretty much the same and I would even say that h4 looks bigger than h3! 😮 The only way to check if the semantic is correct is to look directly at the source code. Not very practical, right?

Fortunately, for people like me who use Ghost as a backend, CSS can offer a pretty straightforward solution to make sure you have structured your headings correctly. Simply paste the following code in your  Settings → Code injection section, and you are good to go!

<style>
  h1::before { content: "h1. "; color: blue; }
  h2::before { content: "h2. "; color: blue; }
  h3::before { content: "h3. "; color: blue; }
  h4::before { content: "h4. "; color: blue; }
  h5::before { content: "h5. "; color: blue; }
  h6::before { content: "h6. "; color: blue; }
</style>

So, the previous code will add the corresponding HTML tag to all headings and let you check if you need to enable the heading shortcut once more. 😉

And yeah, another solution could be to just write my posts directly in Markdown, where the headings could not be more self-explanatory. 😋

## Title 2
### Title 3
#### Title 4
##### Title 5
###### Title 6