How to remove whitespace in my shortcode

sysc4ll · January 24, 2025, 12:49pm

how to remove whitespace in my shortcode ? Please

my shortcode :

<a href="{{ .Get "url" }}"
   target="_blank"
   style="{{ with .Get "link-style" }}{{ . }}{{ end }}"
   class="{{ with .Get "link-class" }}{{ . }}{{ end }}"
>{{- .Get "title" }} <i class="fa-solid fa-fw fa-arrow-up-right-from-square"></i></a>
{{- "" -}}

the use of this shortcode

({{< external-link url="https://docs.opencv.org/" title="https://docs.opencv.org/" >}})

the result :

( https://docs.opencv.org/ <fa-arrow-up-right-from-square>)

the problem is the whitespace after the ‘(’

how to remove it ? please

irkode · January 24, 2025, 1:34pm

I’m unable to reproduce your problem (v142.0)

no blanks in markdown => no blanks in HTML

used your shortcode as shown:

this Markdown

XX({{< external-link url="https://docs.opencv.org/" title="https://docs.opencv.org/" >}})YY

XX( {{< external-link url="https://docs.opencv.org/" title="https://docs.opencv.org/" >}} )YY

produces

<p>XX(<a
   href="https://docs.opencv.org/"
   target="_blank"
   style=""
   class=""
   >https://docs.opencv.org/ <i class="fa-solid fa-fw fa-arrow-up-right-from-square"></i
></a>)YY</p>
<p>XX( <a
   href="https://docs.opencv.org/"
   target="_blank"
   style=""
   class=""
   >https://docs.opencv.org/ <i class="fa-solid fa-fw fa-arrow-up-right-from-square"></i
></a> )YY</p>

sysc4ll · January 24, 2025, 1:44pm

from firefox → copy → inner html (on the “p”) :

(





<a href="https://docs.opencv.org/" target="_blank" style="" class="">https://docs.opencv.org/ <i class="fa-solid fa-fw fa-arrow-up-right-from-square"></i></a>)

and with --minify :

Je vais détailler ici comment j'ai réalisé ce wargame en python avec
<a href="https://pypi.org/project/pytesseract/" target="_blank">pytesseract <i class="fa-solid fa-fw fa-arrow-up-right-from-square"></i></a>
et
<a href="https://pypi.org/project/opencv-python/" target="_blank">opencv-python <i class="fa-solid fa-fw fa-arrow-up-right-from-square"></i></a>
(
<a href="https://docs.opencv.org/" target="_blank">https://docs.opencv.org/ <i class="fa-solid fa-fw fa-arrow-up-right-from-square"></i></a>)

I use “hugo server” from my terminal with hugo v0.142.0-1f746a872442e66b6afd47c8c04ac42dc92cdb6f+extended linux/amd64 BuildDate=2025-01-22T12:20:52Z VendorInfo=snap:0.142.0

the block :

# intro

Pour réaliser un challenge en sécurité informatique, j'ai du lire un captcha,\
donc retrouvé le contenu de l'image (chiffres et lettres) représentant le code de validation du wargame.

Je vais détailler ici comment j'ai réalisé ce wargame en python avec
{{< external-link url="https://pypi.org/project/pytesseract/" title="pytesseract" >}}
et
{{< external-link url="https://pypi.org/project/opencv-python/" title="opencv-python" >}}
({{< external-link url="https://docs.opencv.org/" title="https://docs.opencv.org/" >}})

Voici l'image ou le captcha que je vais devoir lire :

{{< img-box src="/img/hacking/captcha.png"
                   caption="captcha.png"
                   img-class="img-fluid" >}}

external-link.html :

<!-- https://gohugo.io/templates/shortcode/ -->

<!-- "url" && "title" are non-optionals -->

<!-- "link-style" && "link-class" are optionals -->

<a href="{{ .Get "url" }}"
   target="_blank"
   style="{{ with .Get "link-style" }}{{ . }}{{ end }}"
   class="{{ with .Get "link-class" }}{{ . }}{{ end }}"
>{{- .Get "title" }} <i class="fa-solid fa-fw fa-arrow-up-right-from-square"></i></a>
{{- "" -}}

my hugo.toml :

# https://gohugo.io/getting-started/configuration/
baseURL = '/'
languageCode = 'fr'

title = 'www.sysc4ll.sh'

theme = 'sysc4ll'

# https://gohugo.io/getting-started/configuration/#configure-title-case
titleCaseStyle = 'none'

# https://gohugo.io/getting-started/configuration/#disablepathtolower
disablePathToLower = true

# https://gohugo.io/templates/pagination/#configuration
[pagination]
  pagerSize = 100

# https://gohugo.io/templates/output-formats/#customizing-output-formats
[outputs]
  home = ['html', 'rss', 'json']

# https://gohugo.io/getting-started/configuration-markup/#goldmark
# https://gohugo.io/getting-started/configuration-markup/#highlight
[markup]
  [markup.goldmark.extensions.typographer]
    disable = true
  [markup.goldmark.renderer]
    unsafe = true
  [markup.highlight]
    noClasses = false
    lineNos = false
  [markup.tableOfContents]
    ordered = false
    startLevel = 1
    endLevel = 5

# https://gohugo.io/content-management/urls/#permalinks
[permalinks]
  [permalinks.page]
    posts = '/:sections/:slug/'
    pages = '/:slug/'
    projects = '/:sections/:slug/'

# https://gohugo.io/methods/site/params/
[params]
  author = 'sysc4ll'
  description = """\
  passionné d'informatique et plus particulièrement : \
  de programmation, de cybersécurité et d'administration sur les systèmes \
  d'exploitation de type GNU/Linux ou BSD. \
  welcome !\
  """
  keywords = """\
  informatique,\
  développement,programmation,programming,coding,\
  cybersécurité,cybersecurity,cybersecu,hacking,\
  sysadmin'\
  """

irkode · January 24, 2025, 2:20pm

I had to remove the ìmg-box` shortcode because I don’t have and reapplied your text to the shortcode using a bare hugo new theme

UPDATE: your markdown settings did not change anything)

and it still does not add anything before or after the shortcode call.

the HTML in public is the one delivered to your server. regarding blanks and formatting of source that’s the only reference

I would recommend to check the generated HTML file in your /public folder not with a browser to see the real result. Browsers do special things. and Hugo has no influence how your browser shows his internal parsing tree. Even a view Source may apply formatting …

Maybe something happens between ( and < on your site. as us used {{-and {{ you are aware of these whitespace handling. If there’s is something happening on your side between the ( and the < it (partial, hook) … may generate empty lines…

you may have to provide the REAL stuff to track that down

Markdown Page

---
---
# intro

Pour réaliser un challenge en sécurité informatique, j'ai du lire un captcha,\
donc retrouvé le contenu de l'image (chiffres et lettres) représentant le code de validation du wargame.

Je vais détailler ici comment j'ai réalisé ce wargame en python avec
{{< external-link url="https://pypi.org/project/pytesseract/" title="pytesseract" >}}
et
{{< external-link url="https://pypi.org/project/opencv-python/" title="opencv-python" >}}
({{< external-link url="https://docs.opencv.org/" title="https://docs.opencv.org/" >}})

Voici l'image ou le captcha que je vais devoir lire :

there’s no difference with hugo or hugo server

HTML in public

  <h1 id="intro">intro</h1>
<p>Pour réaliser un challenge en sécurité informatique, j&rsquo;ai du lire un captcha,<br>
donc retrouvé le contenu de l&rsquo;image (chiffres et lettres) représentant le code de validation du wargame.</p>
<p>Je vais détailler ici comment j&rsquo;ai réalisé ce wargame en python avec
<a
   href="https://pypi.org/project/pytesseract/"
   target="_blank"
   style=""
   class=""
   >pytesseract <i class="fa-solid fa-fw fa-arrow-up-right-from-square"></i
></a>
et
<a
   href="https://pypi.org/project/opencv-python/"
   target="_blank"
   style=""
   class=""
   >opencv-python <i class="fa-solid fa-fw fa-arrow-up-right-from-square"></i
></a>
(<a
   href="https://docs.opencv.org/"
   target="_blank"
   style=""
   class=""
   >https://docs.opencv.org/ <i class="fa-solid fa-fw fa-arrow-up-right-from-square"></i
></a>)</p>
<p>Voici l&rsquo;image ou le captcha que je vais devoir lire :</p>

Minified

intro</h1><p>Pour réaliser un challenge en sécurité informatique, j&rsquo;ai du lire un captcha,<br>donc retrouvé le contenu de l&rsquo;image (chiffres et lettres) représentant le code de validation du wargame.</p><p>Je vais détailler ici comment j&rsquo;ai réalisé ce wargame en python avec
<a href=https://pypi.org/project/pytesseract/ target=_blank>pytesseract <i class="fa-solid fa-fw fa-arrow-up-right-from-square"></i></a>
et
<a href=https://pypi.org/project/opencv-python/ target=_blank>opencv-python <i class="fa-solid fa-fw fa-arrow-up-right-from-square"></i></a>
(<a href=https://docs.opencv.org/ target=_blank>https://docs.opencv.org/ <i class="fa-solid fa-fw fa-arrow-up-right-from-square"></i></a>)</p><p>Voici l&rsquo;image ou le captcha que je vais devoir lire :</p>

im on windows, but that should not have any effect for that problem

sysc4ll · January 24, 2025, 2:37pm

strange, here my html from public folder (without minify) :

<h1 id="intro">intro</h1>
<p>Pour réaliser un challenge en sécurité informatique, j'ai du lire un captcha,<br>
donc retrouvé le contenu de l'image (chiffres et lettres) représentant le code de validation du wargame.</p>
<p>Je vais détailler ici comment j'ai réalisé ce wargame en python avec






<a href="https://pypi.org/project/pytesseract/"
   target="_blank"
   style=""
   class=""
>pytesseract <i class="fa-solid fa-arrow-up-right-from-square"></i></a>
et






<a href="https://pypi.org/project/opencv-python/"
   target="_blank"
   style=""
   class=""
>opencv-python <i class="fa-solid fa-arrow-up-right-from-square"></i></a>
(





<a href="https://docs.opencv.org/"
   target="_blank"
   style=""
   class=""
>https://docs.opencv.org/ <i class="fa-solid fa-arrow-up-right-from-square"></i></a>)</p>
<p>Voici l'image ou le captcha que je vais devoir lire :</p>










<a
  data-fancybox
  href="/img/hacking/captcha.png"
  data-caption="captcha.png"
  style=""
  class="img-box"
  title="click me !"
>
  <img
    src="/img/hacking/captcha.png"
    alt="captcha.png"
    width=""
    height=""
    style=""
    class="img-fluid"/>
</a>


<h1 id="prérequis">prérequis</h1>

there are strange spaces

irkode · January 24, 2025, 3:00pm

looks like there is mor in your config, source layouts and theme

sysc4ll · January 24, 2025, 3:41pm

yes i have to review my code, thank you very much, and sorry to have to disturb you

irkode · January 24, 2025, 3:54pm

you’re welcome. good luck.

if you need further assistance , just ping.

if you find the problem. drop a note here.

irkode · January 27, 2025, 8:23pm

Sorry, should have been a more vigilant with that. I did not copy the comments in your shortcode for my tests.

your shortcode has HTML comments at the beginning and some newlines

<!-- https://gohugo.io/templates/shortcode/ -->

<!-- "url" && "title" are non-optionals -->

<!-- "link-style" && "link-class" are optionals -->

<a ...

Hugo will remove html comments (leaving the final newline). So we get 5 newlines here

in go templates comments look like {{/* comment */}} or with removal of whitespace {{- /* comment */ -}}.

You can either wrap all comments using {{- /* and */ -}} or each line individually. Keep in mind that these won’t go to the target html anyway (even before minify) so you may omit the html comment signs completely and style it like shown below using ‘#’ doesnt’ matter. and it’s just a matter of style

Maybe better use a comment at the end, too instead of returning an empty string

{{- /*
  #  https://gohugo.io/templates/shortcode/
  # "url" && "title" are non-optionals
  #  "link-style" && "link-class" are optionals
*/ -}}
<a
   href="{{ .Get "url" }}"
   target="_blank"
   style="{{ with .Get "link-style" }}{{ . }}{{ end }}"
   class="{{ with .Get "link-class" }}{{ . }}{{ end }}"
   >{{- .Get "title" }} <i class="fa-solid fa-arrow-up-right-from-square"></i
></a>
{{- /**/ -}}

p.s. the blank in whitespace comment delimiters is mandatory

{{/*
  ^ no space here
{{- /*
   ^ here we need exactly one space

Topic		Replies	Views
Whitespace control in shortcode call? support shortcodes	6	1015	April 7, 2023
Issue with whitespaces on deployed site support	7	193	June 26, 2025
How can I avoid unwanted whitespace being added in shortcodes and render hooks? support shortcodes	5	933	June 14, 2023
How is the Hugo Doc site showing shortcodes in code blocks?	21	6623	April 12, 2018
Misunderstanding of shortcode syntax in 0.55 support	25	7095	May 19, 2019

How to remove whitespace in my shortcode

Related topics