CSS not displaying for HTML inside .md file


So I am in the process of creating a theme, which derives from my portfolio website. I created the website first and used the website’s Layout and Assets, then when I was happy, moved those files into a theme.

It works all as intended… except a single page. The page has an .md file which includes raw HTML and references CSS in Assets/css/extended.

So basically, the page displays fine when all my files are inside the website directory, but when I move them to /themes/paperjack this single page does not render.

The page with the html not displaying properly is the “resume” page.

I have goldmark’s renderer set to unsafe already. As I mentioned, every other page works fine, it is just this one that fails to render the CSS correctly.

It should look like this:

Repo is here: GitHub - jack-hk/portfolio


Where do you include “assets/extended/resume.css”?

I didn’t do any extra steps to include the CSS. I thought it was complied into the single spreadsheet after building.

The HTML is added in the .md file like:

I love programming and usually work on side projects. This includes creating mods for my favourite games, participating in game-jams and fun solo projects.
Beside programming, I enjoy playing games, D&D and my guitar. I travel with my friends when I get the chance.</p>

<div class="resume-item">
    <div class="timeline">
        <div class="entry-timeline">
            <div class="title">
                <h3>2023 - Present</h3>


Also you can look at the repo if you want to see any further details.

I did, which is where I found the you didn’t include the CSS anywhere.

I think you mean “stylesheet” not “spreadsheet”, and no it’s not somehow magically compiled. You have to take care of that yourself.

Hahah yep, stylesheet, typo :smiling_face_with_tear:

Okay, how do I deal with it? And please explain how it works when I move all those files into the website directory but somehow breaks if moved into a theme.

Since all I am simply doing is moving the file’s location, and even then I made no effort to include in that instance, yet it works fine like that. I think I sort of get it, but an explanation would help.


I think jmooring was trying to explain that you need to include the CSS file somewhere. Hugo doesn’t include stylesheets in the HTML files automatically.

It’s not much different from including a CSS file in plain HTML. The only difference is that you would need to use Resource.Get to retrieve the path of the CSS file.

Thank you for the informative reply,

So is that the case of putting

{{ with resources.Get "assets/extended/resume.css" }}
  <link href="/assets/extended/resume.css" rel="stylesheet"/>
{{ end }}

Above the raw HTML in the .md file?

In the template file that you would like the stylesheet to apply. (I didn’t read your repo so I don’t know where you would like to include it.)

Template file? So you mean a partial or shortcode? Because in my context it is a markdown file.

Reading this back is funny since the issue had nothing to do with including CSS, and in that repo it is already included. I found that the issue was a folder structure problem, I have been out most of the day without time to fully troubleshoot, just assuming it was a syntax error or Goldmark.

So yea, turns out it the folder step “css” was missing for “extended”. Changed assets/extended to assets/css/extended and it works. I’m still getting used to Hugo project structure I guess :laughing:

It has everything to do with including CSS. If the resources.Whatever function doesn’t see the file, it doesn’t get included.

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.