How to get inline style html of a content element?

support
1

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)

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

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

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.

2

Mail Chimp offers a CSS inliner tool: https://templates.mailchimp.com/resources/inline-css/

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

3

JavaScript wise, I see:

4

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…

5

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