How can I set render-image.html to handle both md and html syntax of image insetion

support
1

I’m new to HUGO, and have always been writing .md in Typora.

Typora is a great editor but it has a strange built-in image zoom design: when I do not zoom the pic, the image insert style is typically markdown like this ![image-xx](http://img.xx.xx/image-xx.png)

But when I sometimes want to zoom, the Typora auto change the syntax like: <img src="http://img.xx.xx/image-xx.png" alt="image-xx" style="zoom: 67%;" />

Now the qusetion is, I don’t kown much of Go or html, How can I write the render-image.html templete to handle these two syntax in a single .md file

I’ve try ChatGPT, response like this

{{- if eq .OutputFormat.Name "html" -}}
  {{- if eq .Page.Extension ".md" -}}
    {{- $figureRegex := `!\[([^\]]+)]\(([^)]+)\s*("(?:[^"]*)"|'(?:[^']*)'|)(?:\s*([^)]*))?\)` -}}
    {{- $matches := findREAll $figureRegex .Content -}}
    {{- range $i, $e := $matches -}}
      {{- $alt := index $e 1 -}}
      {{- $src := index $e 2 | safeURL -}}
      {{- $title := index $e 4 -}}
      <figure>
        <img src="{{ $src }}" alt="{{ $alt }}"{{ with $title }} title="{{ $title }}"{{ end }}>
        {{ with $title }}<figcaption>{{ . }}</figcaption>{{ end }}
      </figure>
    {{- end -}}
  {{- else -}}
    {{- $src := .Destination | absURL -}}
    {{- $alt := .Params.alt | default "" -}}
    {{- $title := .Params.title -}}
    <figure>
      <img src="{{ $src }}" alt="{{ $alt }}"{{ with $title }} title="{{ $title }}"{{ end }}>
      {{ with $title }}<figcaption>{{ . }}</figcaption>{{ end }}
    </figure>
  {{- end -}}
{{- end -}}

Use regex is a nice try, but this code brings so many syntax errors, and I can not solve them well 0.0

2

There are so many things wrong with the code above that I don’t even know where to begin.

If you want to leverage Hugo’s image render hook, don’t zoom in Typora.

Also, the CSS zoom property is still considered non-standard.

3

Now I wonder How render-image works, is my thought about tackle these two syntax here even doable?Why the generates of static html just ignore the <img src="http://img.xx.xx/image-xx.png" alt="image-xx" style="zoom: 67%;" /> insertion code

4

I’m not sure I understand your question. View source in your browser (typically Ctrl+U). Do you see:

<!-- raw HTML omitted -->

If yes, change your site configuration:

[markup.goldmark.renderer]
unsafe = true

It is safe if you control the content.

5

THX for reply! Your answer solved it perfectly！

6

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