Home / GitHub Page

Handling markdown images


#1

for an image rendering the code is

![GitHub Logo](/images/logo.png)

but with Joplin, the code is

![GitHub Logo](:/resource_id)

so except Joplin itself, we are not able to render the image ourselves ?

I ask that for joplin-web I wrote.
The preview of the rendering markdown never show the resources image.
Do I have to tweak the JS of the markdown ‘engine’ that transform markdown to html ?


#2

I think you have two options:

  1. Hook into the Markdown rendering of your app, and when you hit an image, convert the :/resource_id to a link to the actual image.

  2. In Note.serializeForEdit, which is used when opening a note in an external editor, the resource IDs are converted to the full path to the image. This is so that the images display in eg Typora. Maybe you can also somehow use this feature (thought maybe some tweak is needed to the code base).


#3

Ok, I will try that.
So, when submitting a note, I will need to check if there is an existing “markdown image pattern” (this one ![...](...) ) and for each of them, trigger a call on the endpoint API “/resources”. I hope the return result is the resource ID when "POST"ing , and then replace the image path by the resource_id.

To be continued :wink:


#4

I could do that trick as posted here Joplin Web - a webapp for our joplin editor