CSS in shortcodes - is it working as intended in 0.55?

support
1

Hi! Last year I wrote a tutorial for creating simple tooltips with Hugo shortcodes: https://www.starfallprojects.co.uk/blog/hugo-tooltip-shortcode/
It includes a shortcode called tooltip.html, which is as follows:

<style>
    .definition {
        visibility: hidden;
        width: 120px;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        bottom: 125%;
        left: 50%;
        margin-left: -60px;
        opacity: 0;
        transition: opacity 0.3s;
    }
    
    .term {
        position: relative;
        display: inline-block;
        border-bottom: 1px dotted black;}
    
    .term:hover .definition {
        visibility: visible;
        opacity: 1;
    }
    </style>
    <span class="term">
     {{ .Inner }} 
    </span>

In 0.55 it has broken (I only discovered this now when someone kindly contacted me to let me know)

I’ve got it working again. Either of the following fixes it:

  • Put {{ $_hugo_config := { "version": 1 } }} on line one of tooltip.html
  • Move the CSS into a separate .css file

Otherwise, the page doesn’t display anything after the shortcode. Looking in the console, it looks like the closing style tag doesn’t render correctly:

image
image.png730×488 17.6 KB

Is this working as intended? Would it also affect <script> tags? Obviously it doesn’t affect html tags such as <span>

2

Yes this is how things are now for Shortcodes with Markdown. You’ve probably seen this:

Also this has come up in the forum before:

3

Thanks for the reply.

Can you help me understand why the change to % causes <style> tags to break, but not html tags? Does blackfriday not tolerate tags? You can put html in it.

I’m not sure the thread you linked helps - it looks like his issue is unresolved/possibly bug with .Inner

4

I tried your sample
use
{{< tooltip >}}your word here{{< definition >}}Word definition here{{< /definition >}}{{< /tooltip >}}

or
{{< tooltip >}}your word here{{% definition %}}Word definition here{{% /definition %}}{{< /tooltip >}}

5

Don’t I need to use % in order to use .Inner?

6

-not the answer :frowning:

7

I’m not wild about enabling something that reduces security in any way.

I’m fine with following a rule to not include <style> in my shortcodes (or use the old version) if needed - I’m mainly trying to understand why it trips up on that. Especially as it looks like it starts to render it just fine, then falls over on the closing tag.

Edit to add: Ok interestingly deleting empty lines in the CSS got it rendering(ish), just the CSS not working. It’s . . . odd. But maybe I’m failing to understand something about markdown parsing.

8

quote:

For example, layouts/shortcodes/myshortcode.html will be called with either {{< myshortcode />}} or {{% myshortcode /%}} depending on the type of parameters you choose.

must be anywhere in the doc, when to use what

1 Like
9

no, it changes the way how blackfriday interprets the inner part

10

So deleting empty lines and some spaces/indents after } has got it working. So this is an issue with how blackfriday copes with CSS. Makes more sense now.

11

@StarfallProjects, you can also apply the CSS only if the shortcode is present.

For example, I have a gallery shortcode and apply the required css and javascript with an if statement in baseof.html

{{- if .HasShortcode "gallery" -}}
code here
{{ end }}

This way, if a user places the shortcode twice, your css won’t be duplicated.