Styling anchor elements within list items

support
1

I have some bullet points on my homepage that I would like to give specific styling to. I thought a reasonable approach would be to wrap a markdown link in a custom shortcode:

{{% big_title %}}
- [QUESTIONS]({{<< ref "/questions" >}})
{{%/ big_title %}}

The shortcode is located in layouts/shortcodes/big_title.html:

<p id='test'>{{ .Inner }}</p>

And my custom style is in static/css/style.css:

#test{
  color: blue;
  font-weight: bold;
}

The styling works (the text is both blue and bold) but the text is incorrect and there is no link. This is the text that renders (in blue and bold):
- [QUESTIONS](http://localhost:1313/questions/)

I have played around with all sorts but I just can’t seem to get this to work.

I should add that if I make a test with raw HTML in my markdown file (after setting unsafe = true in [markup.goldmark.renderer]):

<p id='test'>
<a href='/about'>TEST</a>
</p>

“TEST” renders as a functioning link but without styling.

Many thanks in advance for the support.

Disclaimer: I have a basic understanding of markdown, HTML and CSS (in decreasing order). I have spent a reasonable amount of time just processing simple .md files in Hugo and I am now attempting to build a basic theme of my own.

Sidenote:
I’ve read and reread several sections of the Hugo docs but I’m just not seeing a clear path towards steadily learning the power of Hugo and applying it. If anyone has a particular resource they could recommend it’d be much appreciated.

2

If you’re going to include raw HTML in your Markdown, as you have done within your shortcode template, you need to be aware of the rules as described in the CommonMark specification.

The most common mistakes are:

You can fix your problem by changing this:

<p id='test'>{{ .Inner }}</p>

To this:

<p id='test'>

  {{ .Inner }}
</p>

Technically you don’t need the blank line above the template action because, with your example, .Inner has a leading newline, but it’s good to get into the habit of doing so.

3

Thank you. However, though your suggestion has fixed the text rendering, the styling is now gone.

Please note that I am using Hugo extended version 0.130. If you think that updating Hugo will solve this issue, I’ll gladly do so. I just suspect that it’s probably just me making a mistake somewhere.

4

I guess I don’t understand what you’re trying to do.

Are you trying to place a paragraph within a list item, or are you trying to wrap an entire list within a paragraph? The latter is invalid per the HTML spec.

5

My aim

  • I have a bullet pointed hyperlink written in markdown. I would like to apply some styling to it.

My attempt

What I am currently trying (which may hopefully clarify my first message):

  • Wrap the text in a shortcode which wraps everything into a HTML paragraph with a unique id.
  • Use the unique id to apply a style in my css file.

My issues

  • In my first message, the issue was that the styling rendered but the hyperlink did not render (the raw markdown was rendering).
  • After making your changes, the issue is now that the hyperlink renders but the styling does not.

Other points

My problem persists even when I remove the bullet point and just try simply apply styling to the hyperlink.

The problem may not be with the shortcode, as I noted in my first message:

I should add that if I make a test with raw HTML in my markdown file (after setting unsafe = true in [markup.goldmark.renderer]):

<p id='test'>
<a href='/about'>TEST</a>
</p>

“TEST” renders as a functioning link but without styling.

Apologies if am mixing several topics.

Thanks again

6

Let’s say your list ultimately renders like this:

<ul>
  <li>
    <a href="foo">foo</a>
  </li>
  <li>
    <a href="foo">foo</a>
  </li>
</ul>

Do you want to style the a element or the li element?
Do you want all of them within the ul element styled the same way?
Is the styling global or only for a particular list?

7

For now, I would say that I am just trying to style the a element. I would like to eventually have an <ul> element with the same style applied to all <li> elements within it. I have no answer on the global/local styling yet since I’m just testing a few things so I can get my bearings and see how I might start building my own theme.

If you could, please take note of my earlier point about raw HTML in my markdown file (without a shortcode) also not receiving the styling. Although I started off thinking the issue was with the shortcode, I no long think this is the case. I’ll add a bit more detail:

Putting this straight into my markdown file works:

<p id='test'>TEST</p>

The id is picked up my my css file and the styling is applied.

This does not work: (the wrapping in the <p> element with an id is what I initially tried to use a shortcode for)

<p id='test'>
<a href='/about'>TEST</a>
</p>

The hyperlink renders but with no styling.

Thanks

8

In your CSS you need to target the correct element.

#test > a {
  color: blue;
  font-weight: bold;
}

You can use Markdown attributes to add id, class, or other attributes to most block elements. In your site configuration do this:

[markup.goldmark.parser.attribute]
block = true

Then in your Markdown do this:

My list:

- A link to [Post 1](/posts/post-1)
- A link to [Post 2](/posts/post-2)
{id="test"}

Hugo renders the above to:

<p>My list:</p>
<ul id="test">
  <li>A link to <a href="/posts/post-1">Post 1</a></li>
  <li>A link to <a href="/posts/post-2">Post 2</a></li>
</ul>

Then, to target just the a elements (not the wrapping li elements), do this in your CSS:

#test a {
  color: blue;
  font-weight: bold;
}
9

Thanks a lot. I have made the first CSS change you suggested and it’s working. I will take some time later to look into the markdown attributes.

In my defense, I did say…

Thanks again!

(markdown attributes working perfectly too)

10

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