The Dead Simple Markdown Guide to Images

Written by typesetting | Published 2024/08/20
Tech Story Tags: markdown | markdown-syntax | text-formatting | markdown-guide | markdown-images | markdown-formatting | markdown-best-practices | markdown-image-syntax

TLDRTo add an image in Markdown, use ![alt text](URL "title"). For linking an image, enclose the image Markdown in brackets and add the link in parentheses. Optionally, include a title for additional context.via the TL;DR App

Images

To add an image, add an exclamation mark (!), followed by alt text in brackets, and the path or URL to the image asset in parentheses. You can optionally add a title in quotation marks after the path or URL.

![The San Juan Mountains are beautiful!](/assets/images/san-juan-mountains.jpg "San Juan Mountains")

The rendered output looks like this:

Note:Ā To resize an image, see the section onĀ image size. To add a caption, see the section onĀ image captions.

Linking Images

To add a link to an image, enclose the Markdown for the image in brackets, and then add the link in parentheses.

[![An old rock in the desert](/assets/images/shiprock.jpg "Shiprock, New Mexico by Beau Rogers")](https://www.flickr.com/photos/beaurogers/31833779864/in/photolist-Qv3rFw-34mt9F-a9Cmfy-5Ha3Zi-9msKdv-o3hgjr-hWpUte-4WMsJ1-KUQ8N-deshUb-vssBD-6CQci6-8AFCiD-zsJWT-nNfsgB-dPDwZJ-bn9JGn-5HtSXY-6CUhAL-a4UTXB-ugPum-KUPSo-fBLNm-6CUmpy-4WMsc9-8a7D3T-83KJev-6CQ2bK-nNusHJ-a78rQH-nw3NvT-7aq2qf-8wwBso-3nNceh-ugSKP-4mh4kh-bbeeqH-a7biME-q3PtTf-brFpgb-cg38zw-bXMZc-nJPELD-f58Lmo-bXMYG-bz8AAi-bxNtNT-bXMYi-bXMY6-bXMYv)

The rendered output looks like this:

This guide is a Matt Cone project available on Markdown Guide under the CC BY-SA 4.0 license.


Written by typesetting | Shaping readable and sustainable publications.
Published by HackerNoon on 2024/08/20