shd101wyy / vscode-markdown-preview-enhanced

One of the "BEST" markdown preview extensions for Visual Studio Code
https://shd101wyy.github.io/markdown-preview-enhanced
Other
1.47k stars 173 forks source link

Saving HTML when updating html.md to embed_local_images: true doesn't embed images in output .html #1269

Open MarkDVerhagen opened 5 years ago

MarkDVerhagen commented 5 years ago

Using Atom : 1.40.1 Electron: 3.1.10 Chrome : 66.0.3359.181 Node : 10.2.0

Updated the relevant part of my html.md file in the markdown-preview-enhanced package to the following:

## Configuration
Default values:
yaml
---
html:
  embed_local_images: true
  embed_svg: true
  offline: false
  toc: undefined

print_background: false
---

Although right-clicking the preview tab and saving as html (either offline or cdn-hosted) doesn't yield a .html file with embedded images. Do I not understand embedded images to mean that the .html contains the image files, i.e. there is no need to attach the raw images when sending the .html, or is something else going wrong?

I've restarted atom after updating the configurations

marclang commented 4 years ago

@MarkDVerhagen

Same problems/misunderstanding here. Any insight on this since your last post ?

MarkDVerhagen commented 4 years ago

Yeah, was a misunderstanding on my part - you have to include the image files in the same directory as the html. I think actual embedding in the formal sense

marclang commented 4 years ago

I figured out that it's really about embedding image in html file. I found some tricks to get it working.

Solution 1 : I don't know why but when exporting html as html ebook, the embedding is working :

---
ebook:
  html:
    cdn: true
export_on_save:
  ebook: "html"
---

I understood this as the embedding feature works, but the argument embeb_local_images is not properly passed/read or whatever ...

Solution 2 :

Yet, for some reasons, I rather preferred to export my file as "normal" HTML export. So I dug in the Atom code, and I set const embedLocalImages = true; l 1028 in the markdown-enjine.js file (in the package folder)

I am no java-script guy and I don't know anything about it, so it's probably an ugly "fix" and a better solution certainly exists, but it worked for me. Now, my images are truly embedded in my html files. Note that this permanent, all your html files will embed images.

Hope this helps. And if you find a cleaner solution, I'll take it ;)