Discuss about converting block links to markdown

[mika-cn]

Discuss about converting block links to markdown

Block links are links that wrap a block (image, multiple line text etc.). As there's not coressponding format in markdown. We need to discuss about how we convert these block links.

[mika-cn]

What Block links do in HTML is just enlarge the clickable area. I think we can safely convert them into Markdown with easy understand format.

Here's my thoughts about these convertions:

Image block links

HTML:

<a href="/link.html">
  <div>
    <img src="a-picture.png" alt="alt-text" title="title-text">
  <div>
</a>

To convert these image block links, we can just put the link below the image, like this:

Markdown：

![alt-text](a-picture.png "title-text")

[link-text](/link.html)

Note that we padding the whole content with two line breakers (the markdown render of Github may ignore these lines, So you might not seeing them) so that it won't become a inline image. And about the "link-text" we can use either alter-text or title-text if it's exist. Or a hard-coded one like: "picture link" if none of them is exist.

As markdown supports image links, we can of cause convert it to common markdown format, like [![alt-text](a-picture.png "title-text")](/link.html).in this case.

block links of multiple lines of text

HTML:

<a href="/link.html">
  <div>
    <p>line A</p>
    <p>line B</p>
    <p>line c</p>
  </div>
</a>

This case is very common in some clickable cards on web page, such as: online shopping item cards, contact info cards etc. We can't simply put the link below the text content in this case. Instead, we can wrap these lines with two links, one at the beginning, one at the end. link this:

Markdown:

[↓↓↓](/link.html)

line A

line B

line C

[↑↑↑](/link.html)

Note that we also padding the whole content with two link breakers, and we using three downward arrows and three upward arrows as link text.

other block links?

• block links of table (I haven't seen one yet, we can handle it same as image block links)
• others? (I have not ideas)

---

What's on your mind? please comment below.

[mika-cn]

@Golddouble About the block links of multiple lines of text, discuss here.

[Golddouble]

Before I say anything about "block links of multiple lines of text" I would like to ask, how you managed to convert the "image block links" into clean Markdown.

I think of it like this:

1. The "Web Clipper" extracts the HTML code that the user has selected with the "Web Clipper" in the browser.
2. With the extract "Web Clipper creates now a HTML file
3. The code of the "Web Clipper" searches the HTML file for "image block links" by searching for ...

<a href="/link.html">
  <div>
    <img src="a-picture.png" alt="alt-text" title="title-text">
  <div>
</a>

4. In the HTML file, the "Web Clipper" somehow marks the found places.
5. The "Web Clipper" lets the HTML file with the markings pass through the turndown converter. This means that the marks from point 4) must not affect the conversion and must still be present after the conversion process.
6. Now the Markdown file is in the raw version.
7. The "Web Clipper" converts the previously marked "image block links" in such a way that they can be displayed as the user expects.

Is that how it works?

If so, couldn't you now simply also mark ...

<a href="/link.html">
  <div>
    <p>line A</p>
    <p>line B</p>
    <p>line c</p>
  </div>
</a>

... and after convert them in a good looking Markdown file?

[mika-cn]

Actually, we modify the html before pass it to Turndown. It's kind of like preprocess the html. We decide what the final format is, then modify the html so it'll not contains block links and feed it to Turndown to get the result.

It shouldn't be hard to write the code, but hard to figure out all situations. And we need to decide what markdown format each situation will be converted to.

I met a new case today:

<a href="/link.html>
  <h2>a section header</h2>
</a>

and it get converted to:

[

## a section header

](/link.html)

I think it should be converted to:

## [a section header](/link.html)

but I don't remember that markdown can support header links, and I tried it on some online markdown editors, they did know how to render this markdown.

[mika-cn]

I've published a new version(v0.4.39) that contains preprocess of block links. It should handle the cases that mentioned above. It's not perfect, we will enhance it when we encounter new problems.

[Golddouble]

Thank you. I will let you know, when I encounter new problems.

## [a section header](/link.html)
but I don't remember that markdown can support header links, and I tried it on some online markdown editors, they did know how to render this markdown.

I use markdown in Obsidian. And Obsidian also renders ## . So no problem for Obsidian either.

[Leilei332]

In some cases, inline links may be regarded as block links because of its style. Like this:

This inline link was regarded as a block link because it has an SVG image.

[mika-cn]

@Leilei332

This inline link was regarded as a block link because it has an SVG image.

I can reproduce this problem, will fix it in next version.