Hugo shortcode adding extra space at end of link text - hugo

Question

I'm using a Hugo shortcode to add a class to links. We want to copy Wikipedia's style for "red links", pages that haven't been built yet but are planned.
The shortcode red-link.html looks like this:
{{ with .Get "title" }}{{.}}{{else}}{{.Get "url"}}{{end}}
When I use it in a markdown file, it looks like this:
Here is an {{< red-link title="example red link" url="#" >}}.
What I want is this (no space between link text and punctuation):
<p>Here is an example red link.</p>
What I get is this:
<p>
"Here is an "
example red link
" ."
</p>
Which ends up looking like this:
What do I need to change to remove that extra space between the end of the link and the period?

Answer 1

I had the same issue but the project was configured to add a new line at the end of all files. Instead of reconfiguring the project to also allow files without new lines at the end, I have found an ugly, but working solution.
Given the example of catertot, you probably have the following shotcode (notice the ending new line):
{{ blabla }}
The solution is to add a {{- "" -}} at the very end of the shortcode:
{{ blabla }}{{- "" -}}
This tells Hugo to strip any whitespace behind the link itself, resulting in a perfectly inlined shortcode without spaces.

Answer 2

I use a Hugo theme for my website which had a custom shortcode render-link.html file in quickstart/themes/YOUR_THEME/layouts/_default/_markup by default. The solution, as another answer points out is to add whitespace delimiters {{- /* This comment removes trailing newlines. */ -}} to your file, which removes leading and trailing whitespaces. However, in my theme, this was placed after the </a> tag, rendering it useless (see below).
<a href="{{ .Destination | safeURL -}}"{{ with .Title -}} title="{{ . -}}"{{ end -}}{{ if strings.HasPrefix .Destination "http" -}} target="_blank"{{ end -}}>{{ .Text -}}</a>{{- "" -}}
Ensure your shortcode looks as follows:
<a href="{{ .Destination | safeURL -}}"{{ with .Title -}} title="{{ . -}}"{{ end -}}{{ if strings.HasPrefix .Destination "http" -}} target="_blank"{{ end -}}>{{ .Text -}}{{- "" -}}</a>
If this does not solve the problem, consider checking your IDE settings. For example, in VS Code, you should consider disabling Settings → Files: Insert Final Newline.
Check out these other threads:
Single whitespace character after custom link template for Goldmark #6832
Markdown render hooks extra space

Answer 3

In your shortcode file, remove everything, including all blank lines, below this:
{{ with .Get "title" }}{{.}}{{else}}{{.Get "url"}}{{end}}
If that doesn't get rid of that space, try using appropriate
Go Template trim-whitespace delimiters ({{- and -}}). For example, try changing the above to this:
{{ with .Get "title" -}}{{. -}}{{else -}}{{.Get "url" -}}{{end -}}
I had this problem with my years-since shortcode, which I wrote about at https://www.ii.com/hugo-tips-fragments/#_8_years_since.

Answer 4

I was using a custom render-link.html file containing an empty line, this was creating a new paragraph before each link included with a Shortcode.
Removing this empty line in render-link.html fixed my issue. To be clear:
Before:
<!-- Source: https://roneo.org/en/hugo-open-external-links-in-a-new-tab/ -->
<a href="{{ .Destination | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank" rel="nofollow noopener noreferrer" {{ end }}>{{ .Text | safeHTML }}</a>
After:
<!-- Source: https://roneo.org/en/hugo-open-external-links-in-a-new-tab/ -->
<a href="{{ .Destination | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank" rel="nofollow noopener noreferrer" {{ end }}>{{ .Text | safeHTML }}</a>