How to remove whitespace in my shortcode

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

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>
    

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'\
  """

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

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

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

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

you’re welcome. good luck.

if you need further assistance , just ping.

if you find the problem. drop a note here.

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

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 :wink:

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
1 Like

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