CSS not displaying for HTML inside .md file

support
1

Hi,

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.

Troubleshooting
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:

image
image1663×1366 313 KB

Repo is here: GitHub - jack-hk/portfolio

Thanks,
Jack

2

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

3

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:

<h3>Hobbies</h3>
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>

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

(Truncated)

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

4

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.

5

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.

Thanks

6

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.

7

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?

8

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.)

9

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

10

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:

11

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

12

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