Geek Answers Handbook

Support for adding lazy image uploads to Markdown

I am using the kramdown parser to convert the metodda to html. I want to use lazy loading for images without changing the syntax of the source code. I can achieve this by editing the link.rb file in kramdown gems.

enter image description here

But I do not want to follow this path. Because if someone updates kramdown, I will lose these changes. Is there any other way to do this without changing the syntax of the original image?

Source Image Syntax:! ![](some image link)

Current output (without add-in): <img src="some image link" alt=""/>

Expected Result: <img data-src="some image link" alt=""/>

+4
source share
2 answers

You can mutate the resulting HTML code using Nokogiri , this is almost all the code needed for your task.

 def responsive_img_src(html_source) doc = Nokogiri::HTML::Document.parse('<html></html>', nil, 'UTF-8') fragment = Nokogiri::HTML::DocumentFragment.new(doc, html_source) fragment.css('img').each { |img| img['data-src'] = img['src'] } return fragment.to_html end

You cannot directly use Nokogiri::HTML(html_source) to parse your source, as it will transfer the output to a well-formed HTML document. This is why you need a DocumentFragment.

+2
source

If you use kramdown , you can add attributes to the markdown block. See documentation

In your case, An image: ![gras](){: data-src="some image link"} will do the trick.

+1
source

More articles: