An image can be included using standard Markdown syntax. alt text custom title alt text  

has extension to provide additional features: annotations fit scale alignment border presentation mode Znai include-image

Use to add a title to an image. beautiful castle title :include-image: castle.jpg {title: "beautiful castle"}

When you specify a title, hover mouse over it to see a clickable anchor. Use to override auto generated identifier. beautiful castle anchorId :include-image: castle.jpg {title: "beautiful castle", anchorId: "castle-image"}

Use to include a border around image. border: true :include-image: image.png {border: true}

By default, images generated with fit to the text column width. auto scaled down image Note: You can click on the scaled down images to display it full screen include-image

Use to take all the available horizontal space: wide image wide :include-image: books.jpg {wide: true}

To scale image up or down use option, is default, is half an image size. Note: You can click on the scaled down images to display it full screen scale 1 0.5 :include-image: books.jpg {scale: 0.3}

Use option to align images left or right. aligned left aligned right align :include-image: books.jpg {align: "left", scale: 0.3} :include-image: books.jpg {align: "right", scale: 0.3}

Use to make image collapsible. Note: option is required books collapsed: true|false title :include-image: books.jpg { fit: true, title: "books", anchorId: "my-books", collapsed: true }

Use to remove top/bottom margins when there are multiple images in a row. books castle noGap: true :include-image: books.jpg { fit: true, title: "books", collapsed: true, noGap: true } :include-image: castle.jpg { fit: true, title: "castle", collapsed: false }

Pass external url in place of image to render image from a remote site Note: Pass parameter to validate image urls  :include-image: https://external-url { align: "left" }

Use to only render an image in mobile screen size. Use to only render an image in desktop screen size. only visible in mobile screen size only visible in desktop screen size mobileOnly desktopOnly :include-image: small-book.png {title: "only visible in mobile screen size", mobileOnly: true} :include-image: books.jpg {title: "only visible in desktop screen size", desktopOnly: true, fit: true}