Markdown render hooks, determine if a link is alone on the line

support
1

Hello,

I’m currently playing around with HUGO as a potential replacement for my current blog.

I want to apply a different processing if the link is the only thing on the line. Something a bit like this

Input Outcome
This is a link to https://google.fr Hello this is a link to <a href="https://google.fr>"https://google.fr</a>
https://google.fr <blockquote><a href="https://google.fr>"https://google.fr</a></blockquote>

So far, I wrote this little piece of code to put in my render-link hook:

{{ $linkAlone := false }}
{{ range split  (readFile .Page.File) "\n" }}
    {{ if eq (chomp  .) $.Destination }}
        {{ $linkAlone = true }}
    {{ end}}
{{ end }}

Which can tell me if the link can be found alone on a single line. It does work, but if the link is twice in the content, once in a line and once in a text, both time it will be true causing the text to be split in two.

It’s also not the best performance-wise to re-read the file at each link.

Would any of you have a suggestion on how I could detect it better?

Thanks,
Samuel

2

I cannot think of anything, but a file read for each link could get expensive.

We have the ability to do what you want with images. With a configuration change we can remove the surrounding p tags from all stand-alone images, e.g.,

![alt](a.jpg)

And then in the render hook use the .IsBlock method to determine if the image is “stand-alone.”

We do not have this ability with links, because there hasn’t been any demand.

Questions:

  1. Why do you want to do this (what’s the benefit)?
  2. Can you do this instead?
 > https://www.google.com

For a non-portable, hacky solution, you could do something like:

![@](https://www.google.com)

And in the image render hook, do something different if the alt text is @ and IsBlock is true.

Finally, consider a shortcode instead.

3

Hi,

But a file read for each link could get expensive.

I agree :sweat_smile:, currently I’m testing with only a few articles, but it would definitely slow down the build process if I need to re-read the file at each link.

We have the ability to do what you want with images.

Yes I noticed, I also rapidly looked at the transform.go#L46-L53 source, and it looks like it would be relatively easy to add a check for I assume ast.Link instead of ast.Image and also add the isBlock attribute if the parent child count is 1. Am I wrong?

  1. Why do you want to do this (what’s the benefit)?
  2. Can you do this instead?

I’m using a custom api to fetch the opengraph tags of a website, once I have them, I can render embeds directly in HUGO to remove the need for client-side JavaScript.
Here is what they look like right now:

image
image1178×476 49.4 KB

For a non-portable, hacky solution, you could do something like:
![@](https://www.google.com)

Finally, consider a shortcode instead.

I guess the image trick could work, but it isn’t pretty, and it’s the same for short codes, I want to avoid using them because they are not portable, I would need to edit a ton of files just to convert my existing content.

Thanks,
Samuel

4

Another hacky approach: disable the Goldmark linkify extension[1] and hijack level 6 headings with a heading render hook.

###### https://www.example.org

{{ if eq .Level 6 }}
  <blockquote>
    {{ .Text }}
  </blockquote>
{{ else }}
  <h{{ .Level }} id="{{ .Anchor }}">{{ .Text | safeHTML }}</h{{ .Level }}>
{{ end }}

From what I’ve seen, authors rarely go past level 5, and most TOCs are limited to level 3 or 4 as well.

Yes, you would have to modify your existing content, but this might be a little easier.

Other than that, you can fork and code, or submit a proposal to replicate #10493 for links.

  1. I typically disable this extension because, if I want a link, I will insert a link. ↩︎

5

I typically leave the linkify extension on for my blog, as most publicly available editors (Github, StackEdit, JetBrains IDEs) also have it on.

The level 6 heading hack is indeed the best solution yet, but still requires editing everything.

I did fork HUGO and I have successfully added the IsBlock attribute to Link and AutoLink nodes:

But as I’m not familiar with either HUGO or go for that mater, it’s going to take me some time to make sure it doesn’t break anything.

On a sidenote, kudos, HUGO is stupidly easy to build locally compared to some opensource projects out there :smile:

Samuel

1 Like
6

Sure… there are ‘expensive’ solutions, but the following are really simple. First we need to determine what you are after (1 or 2):

1. You want the link to be a blockquote

Doing a regular expression for lines ‘starting with https:// and not containing a space’ in your content and replacing them with > https:// should do the trick in most cases. It is also the most elegant solution. You get what you want. Surely we assume here that the blockquote styling has semantic value. In that case your portability argument is not applicable.

2. You want the link italic/styled

This can be done with CSS. I think that most cases can be covered using a combination of the first-child and last-child selector, like this:

 p > a:first-child:last-child {font-style: italic;}

This targets all links in paragraphs that are both the first child and the last child.

7

I love the second approach. Couldn’t that be used to style the link as a block with a gray background etc., i.e. like a blockquote?