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>
{{- "" -}}
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’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-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’image ou le captcha que je vais devoir lire :</p>
Minified
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>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’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>
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