An image can be included using standard Markdown syntax. markdown  null regular-image.png alt text markdown  custom title castle.jpg alt text

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

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

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

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

By default image occupies all available horizontal space:Use fit parameter to fit an image to the text column width. :include-image: books.jpg {fit: true} Note: You can click on the scaled down images to display it full screen

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

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

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

Use noGap: true to remove top/bottom margins when there are multiple images in a row. markdown :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  :include-image: https://external-url { align: "left" } Note: Pass parameter to validate image urls

Use mobileOnly to only render an image in mobile screen size. Use desktopOnly to only render an image in desktop screen size. :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}