Creating More Specific Code Highlights

[nixentric]

Is it possible to create code highlights like this in Hugo?

Please answer, thank you.

[razon]

You can achieve this via the Markdown render hook.

layouts/_default/_markup/render-codeblock-url.html

{{- $url := urls.Parse .Inner }}
{{- $parts := slice }}
{{- with $url.Scheme }}
  {{- $parts = $parts | append (printf `<span class="url-scheme">%s</span>://` .) }}
{{- end }}
{{- $parts = $parts | append (printf `<span class="url-host">%s</span>` $url.Host) }}
{{- $parts = $parts | append (printf `<span class="url-path">%s</span>` $url.Path) }}
{{- with $url.Query }}
  {{- $parts = $parts | append "?" }}
  {{- range $name, $values := . }}
    {{- range $values }}
      {{- $parts = $parts | append (printf
        `<span class="url-query-name">%s</span>=<span class="url-query-value">%s</span>`
        $name
        .)
      }}
    {{- end }}
  {{- end }}
{{- end }}
<div class="highlight-url">{{- delimit $parts "" -}}</div>
<style>
  .highlight-url .url-scheme {
    color: green;
  }
  .highlight-url .url-host {
    color: brown;
  }
  .highlight-url .url-query-name {
    color: red;
  }
  .highlight-url .url-query-value {
    color: blue;
  }
</style>

You should put the styles into your CSS file.

And then specify the fence as url in the content.

```url
https://www.youtube.com/watch?v=foobar
```

Result as follows.

[nixentric]

thankyou so much