Skip to content

Image-Link

feature - image-link

Convert obsidian wikilink for images to mkdocs-material md-link for images

obsidian support wikilink with embbe an image in a note which is also known as internal link. However markdown and mkdocs-material does not support wikilink. It uses traditional markdown links.

wikilink :  ![[images/hello.png]] 
mdlink   :  [images/hello.png](images/hello.png)

Features

Internal Links

type wikilink converted link
basic ![[hello.png]] ![hello.png](hello.png)
path ![[image/hello.png]] ![images/hello.png](images/hello.png)
size ![[hello.png | 200x300]] see below content tab
caption ![[hello.png | caption]] see below content tab
size & caption ![[im/hello.png | my-caption | 200]] see below content tab

Web Links

type wikilink converted link
basic ![](https://path.to.image.png) see below demo
size ![100x100](https://path.to.image.png) see below demo
caption ![caption](https://path.to.image.png) see below demo
size & caption ![caption | 100x100](https://path.to.image.png) see below demo

Converted links in md_in_html form

<figure markdown>
  ![hello.png](hello.png){ width="200" height="300" }

</figure markdown>

<figure markdown>
  ![hello.png](hello.png)
  <figcaption>my-caption</figcaption>
</figure markdown>

<figure markdown>
  ![hello.png](hello.png){ width="200" height="300" }
  <figcaption>caption</figcaption>
</figure markdown>

Demo

Internal Links

Tip

Compare this page with it's original markdown. See the top right link

  • ![[hello.png]]

hello.png

  • ![[hello.png|200x200]]
hello.png
  • ![[hello.png|hello-caption|200x200]]
hello.png
hello-caption

Web Links

  • ![](https://history-computer.com/ModernComputer/Basis/images/Engelbart.jpg)
https://history-computer.com/ModernComputer/Basis/images/Engelbart.jpg
  • ![Engelbart](https://history-computer.com/ModernComputer/Basis/images/Engelbart.jpg)
https://history-computer.com/ModernComputer/Basis/images/Engelbart.jpg
Engelbart
  • ![100x100](https://history-computer.com/ModernComputer/Basis/images/Engelbart.jpg)
https://history-computer.com/ModernComputer/Basis/images/Engelbart.jpg
  • ![Engelbart|100x100](https://history-computer.com/ModernComputer/Basis/images/Engelbart.jpg)
https://history-computer.com/ModernComputer/Basis/images/Engelbart.jpg
Engelbart
  • [![\PyPi](https://img.shields.io/pypi/v/mkdocs-obsidian-support-plugin)](https://pypi.org/project/mkdocs-obsidian-support-plugin/)

result (web link image with hyperlink) : \

You can escape web link conversion by adding backslash - \ on prior to tag(replacement part)

Comments