Use custom CSS classes when processing markdown content files

support
1

I’m working on a Hugo theme based on the Bulma CSS framework. This framework works with “CSS classes only”, i.e. although it’s possible to use standard HTML tags its concept is to use a Bulma-specific CSS class for styling the content.

Example:

HTML
<h1>My heading</h1>

Bulma
<h1 class="title is-1">My heading</h1>

Now if Hugo processes this markdown in a content file…

# My heading

… with this template…

<div class="container">
  {{ .Content }}
</div>

… it results in…

<div class="container">
  <h1>My heading</h1>
</div>

Whereas I need something like…

<div class="container">
  <h1 class="title is-1">My heading</h1>
</div>

I found several other posts about this topic but I’m not sure if there really is an “advised” way how to handle this in Hugo.

Are there any plans to implement some kind of “mapping” so that additional classes can be generated when processing markdown?

2

The only way I have been able to achieve this is to target the h1 (or other classes) inside the container class. Basically, copy the title and is-1 classes’ css, and paste that code into a new css class that targets “container h1”.

In a few cases, I’ve just written the content of the markdown file in whatever HTML I needed.

Neither of those is very attractive.

1 Like
3

Yes, I also had this idea but would like to reject it :wink: Thought that maybe there was a more elegant way.

4

Yeah, because of modern css libraries like tachyons etc, we really need a way to “inject” classes when the markdown file gets converted to html. As in a pipeline.

2 Likes
5

What is the “modern” in CSS classes only?

1 Like
6

I probably didn’t explain well at all. In my opinion, recent css libraries like tachyons and probably others, cover the bases for most of classes and functions you’d need, for a basic site.

If I could cause hugo to add a specific class to some elements within my markdown pages, that would be really helpful.

For instance, if the library has a way to color text and background by adding classes like “red” and “bg-green” or something like that, it would be great if I could somehow say hugo, for any h1 here, add the class string “red bg-green”.

It is easy enough, though, to simply make a container div with some class, figure out what “red bg-green” from your library is doing, and make another custom class that applies to h1’s inside your container div.

7

Hugo’s website is based on Tachyons. So how was that done? HTML code in markdown files? Or no markdown files but html files in content?

1 Like
8

Tachyons has “nested” classes:

2 Likes
9

Ah, something again learned what I already knew (but forgot obviously). That’s the answer - tnx!

1 Like
10

Thanks @budparr, I haven’t used that yet but I’ll look into it for sure.

1 Like
11

Ok, had a few minutes to look at this. Conceptually, those “nested classes” are the same as the technique I mentioned. The ones included in Tachyons are a basic set, like a “starter kit”, but, you could easily add ones with similar naming convention, then bake them in, in the css build pipeline.

To wit, in case anyone needs the info, here’s what I do:

I put my cloned tachyons repo under a src folder in my project. Then after installing the npm modules inside there, I add any edits to:

 /path/to/my/project/src/tachyons/src/tachyons.css

… and edit /path/to/my/project/src/tachyons/package.json to write files to the right location under hugo’s static folder. Something like:

...
  "scripts": {
    "start": "npm run build:watch",
    "mutations": "immutable-css src/tachyons.css --strict",
    "build": "npm run build:css && npm run build:minify && npm run build:css2 && npm run build:minify2",
    "build:css": "tachyons src/tachyons.css > css/tachyons.css",
    "build:css2": "tachyons src/tachyons.css > /path/to/my/project/static/css/tachyons.css",
    "build:minify": "tachyons src/tachyons.css -m > css/tachyons.min.css",
    "build:minify2": "tachyons src/tachyons.css -m > /path/to/my/project/static/css/tachyons.min.css",
    "build:watch": "watch \"npm run build\" ./src/"
  }
...

Then, an npm start lets me edit the css I mentioned, and it will re-build the end result file and save it (and a minified copy for production) to the right location under the hugo project. This way, you’re only referencing one file in your site’s source, instead 2 or 3.

1 Like
13

@straurob Bulma now has the content class to wrap this kind of generated content!
See: https://bulma.io/documentation/elements/content/

1 Like
14

I add classes to markdown using {.classname} in my Markdown, as allowed by Markdown Extra. Is there anyway to support this in Hugo?

15

Hugo has moved to Goldmark as default Markdown processor.
And as per today Goldmark supports adding classes, id and custom attributes to heading only

## heading ## {#id .className attrName=attrValue class="class1 class2"}

## heading {#id .className attrName=attrValue class="class1 class2"}

You can read about goldmark custom attribute support on their github readme.

1 Like