Comments (8)
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.
from maoxian-web-clipper.
@Golddouble About the block links of multiple lines of text, discuss here.
from maoxian-web-clipper.
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:
- The "Web Clipper" extracts the HTML code that the user has selected with the "Web Clipper" in the browser.
- With the extract "Web Clipper creates now a HTML file
- 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>
- In the HTML file, the "Web Clipper" somehow marks the found places.
- 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.
- Now the Markdown file is in the raw version.
- 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?
from maoxian-web-clipper.
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.
from maoxian-web-clipper.
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.
from maoxian-web-clipper.
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.
from maoxian-web-clipper.
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.
from maoxian-web-clipper.
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.
from maoxian-web-clipper.
Related Issues (20)
- [question of interest] opening my file, that was created through clipping HOT 4
- maoxian clip zhuhu's formula error HOT 10
- 裁剪微信公众号文章,图片下载失败 HOT 10
- Markdown 格式剪裁出错。 HOT 6
- Links in my mardown-file are not hidden, because of "redundant spaces" HOT 8
- 关于web-clipper的问题反馈以及一个建议 HOT 5
- Figures shown up seems odd HOT 12
- code not shownup right way HOT 3
- 能否借鉴singlefile的懒加载(lazyload, lazy load, 延迟加载)功能 HOT 3
- kubuntu install native APP error HOT 5
- 使用浏览器书签来保留剪辑历史记录 / use browser bookmarks to keep clipping history HOT 1
- Chrome 118.0.5993.71版本用不了吗? HOT 1
- 本插件与IDM下载浏览器插件冲突(chrome浏览器) HOT 2
- 使用追加裁剪信息到内容尾部时,剪裁部分和追加信息部分拼接尺寸大小不一致,影响观感 HOT 1
- 请问如何实现“自由选区”,感谢 HOT 2
- NativeApp 没有启动成功 HOT 4
- 有没有对接其他笔记软件的计划 HOT 1
- 无法裁剪某些网页, 提示 r is not defined HOT 1
- 无法打开本地保存的页面 HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from maoxian-web-clipper.