How to get inline style html of a content element?

I am building a theme to convert md content with css file to html code with inline style, the result will be copy and pasted to a platform that only accepts inline stylization and no css.

So in other words, I have this:
(dot after > to display tags unrendered)

<.p class=“test”>Paragraph<./p>

h1 {
color: #FFF;
p {
color: #000;
font-size: 13px;
.test {
font-size: 16px;

And I want it to convert to:

<.h1 style=“color: #FFF;”>Header1<./h1>
<.p style=“color: #000;font-size: 16px;”>Paragraph<./p>

How do I do that with Hugo? I can think of using regex and replace class assignment with content from search result within selected css file using resource.Get, but I can’t figure out how to do the convertion when dealing with multi-layered classes and ids.

Is there any way to achieve this goal, using Hugo template or even local JavaScript.

Mail Chimp offers a CSS inliner tool:

But, as you mentioned, this is outside the scope of this forum.

JavaScript wise, I see:

Yeah, I saw a few website that does something like this, but I thought it would be nice to be able to do it within hugo.

Thanks for the recommendation of the two JavaScript solutions. I took a closer look at juice (especially the demo site) and it might do the trick straight in serve -w, although using npm does install a lot of extra files within the project…

There is not a clean way to do this in hugo that I know of.