CSS Inline

support
1

I would like to implement a css inline directly in the single markdown file (in content) for example as a shortcode {{< css style=”—– “ >}}or whatever.

For the time being, I have the following way in the single layout (extract)

{{- if .HasShortcode “gallery” -}}
{{ $gallery := resources.Get “css/conditional/shortcodes/gallery.css” | minify | fingerprint }}link type=text/css rel=“stylesheet” href=“{{ $gallery.Permalink }}”> {{ end }}

So I am wondering whether is it possible to implement such conditionnal css directly in the md file ?

Thanks

2

no. you may not use template code in md files

if you need some code in both a template and a shortcode we usually:

  • write a partial template with the functionality

  • call that in templates

  • write a shortcode that calls the partial

  • use that shortcode in MD files

3

Thanks, but I don’t want to use both in template and shortcode.

I only need shortcode in md file. Instead of having a specific css file, just to put the css style lines inside the shortcode if possible.

4

Then you’re out of luck. Not to mention that your approach does not even need a shortcode: You could equally well test for .HasShortcode in, e.g., your footer partial and include the CSS there, if needed.

5

Sorry, but I am not sure to well understand.

The reason is to avoid having a partial or whatever but having the possibility for any md file to include something like <style> background : #fff</style>

6

You can always include raw HTML in your md. Is another question, if this is a good idea.

7

Sorry, I am a little bit lost.

Could you provide with a basic example.

Thanks

8

What more can I say? You can include any HTML in MD. You nearly wrote the example code yourself.
<style>body {background : #fff;}</style>

But in general, CSS is better placed in an external file and included at the bottom of the page, eg in the footer template.

9

https://html.spec.whatwg.org/multipage/semantics.html#the-style-element

Or to put it another way, even though popular browsers understand your intent, this fails validation:

<!DOCTYPE html>
<html lang="en-US" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0">
  <title>My Title | @@TITLE@@</title>
</head>
<body>
  <main>
    <style>
      h1 {color: red;}
    </style>
    <p>Foo bar baz.</p>
  </main>
</body>
</html>
1 Like
10

So it means it doesn’t comply with the web and html standards.

I have therefore to step back to the original implementation to include the custom stylesheet inside the <head> section

11

Exactly. When I suggested adding it to the footer, I confounded it with the script element. Why do you try to avoid the CSS in the head?

12

If I want to create a module that provides a shortcode (e.g., “gallery.html”), I would typically have to instruct site authors to (a) import the module in site config, and (b) add code to the base template to include module-specific CSS.

If I can somehow include the CSS in the shortcode itself, site authors don’t have to do the second part.

If it were me, I’d use JavaScript to inject a name-spaced style element into the head element. For example:

git clone --single-branch -b hugo-forum-topic-56102 https://github.com/jmooring/hugo-testing hugo-forum-topic-56102
cd hugo-forum-topic-56102
hugo server

The example above imports this module.

Note that the style element is injected only once, regardless of how many times you call the shortcode on a page.

1 Like
13

Thanks for the solution. I tested it as you proposed but I am not very familiar with such way (as I haven’t enough skills).

I believed that it would be more direct with something like:

{{ < css.inline > }} <style>color: green;font-size: 2rem;</style>{{< /css.inline > }}