Search code examples
htmlvisual-studiovisual-studio-codemarkdown

Including a picture in a markdown file in VScode


i have to write a document using markdown in vscode. I have some troubles including images in my file. I want to have a caption for my image. I tried the suggestion on thist post. Therefore i created a folder "_includes" and i added a file image.html with the following code:

<figure class="image">
<img src="{{include.url}}" alt="{{include.description}}">
<figcaption>{{include.description}}</figcaption>

In my .md-file im trying to include the image using

{% include image.html src="/pictures/myimage.svg" description="test" %}

The problem is, vscode doesn't seem to recognize the {% include %} command. It just shows the code as plain text. Can anyone recommend me to a solution for this problem?

Kind regards


Solution

  • I had the same problem before. This answer worked best for me. Here's the code:

    ![](path_to_image)
    *image_caption*
    

    I also liked the output of this one better visually, but they're both fine functionally. Code:

    | ![space-1.jpg](http://www.storywarren.com/wp-content/uploads/2016/09/space-1.jpg) | 
    |:--:| 
    | *Space* |
    

    (I would add this as a comment, but I'm too new here to comment, sorry.)