How to Style Images With Markdown

Table of Contents

• Series: Awesome Tips about Pandoc and Markdown
• Image Inline-style
• Image Reference-style
• Hyperlinked Images
• Pandoc link attributes
• Center image
• Side by Side Images
• Embed Images as base64 Content

Series: Awesome Tips about Pandoc and Markdown

---

Image Inline-style

• ![alt text](image.jpg "title")
• alt vs title
  • alt text is read to blind people and understandable by Google and other search engines
  • Title text: what a user sees after hovering over the image
• Prefer ![]() syntax over img tag
  • The raw HTML is passed through unchanged in HTML, S5, Slidy, Slideous, DZSlides, EPUB, Markdown, and Textile output, and suppressed in other formats.
• In Pandoc, An image with nonempty alt text, occurring by itself in a paragraph, will be rendered as a figure with a caption. The image’s alt text will be used as the caption.
• If we don’t want the caption, just make sure it is not the only thing in the paragraph, or insert a nonbreaking space after the image:

![Baby Crying](https://media.giphy.com/media/l1KVaj5UcbHwrBMqI/giphy.gif)\

Image Reference-style

• Used when the images are used multiple times
• Used to embed image as base64 text

![alt text][my_image]

[my_image]: url "Title Text"

Hyperlinked Images

• Wrap the image in another link and set the link href to a different url.
• Same trick can be used to change image destination.

[![Build Status](https://travis-ci.org/philc/vimium.svg?branch=master)]
(https://travis-ci.org/philc/vimium)

Pandoc link attributes

• ![image](foo.jpg){#id .class width=30 height=20px}
• We can add CSS style, id, change width, height to px or percentage, or add any key value.

Center image

1. html: p align

<p align="center">
  <img src="https://media.giphy.com/media/e1BxgoFxAOmbK/giphy.gif" alt="Wonder Woman Happy Dance"/>
</p>

2. Add center CSS in Pandoc

<style>
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
</style>
![DNCE’s Waving Pug](https://media.giphy.com/media/3oKIPsx2VAYAgEHC12/giphy.gif){.center}

DNCE’s Waving Pug

Side by Side Images

![alt text](the_image "Logo Title Text 1")

<!-- Side by Side Images -->
Header Left |  Header Right
:--------:|:-------:
![](image_link)  |  ![](image_link)

Embed Images as base64 Content

• Use tools like base64-image.de to convert image to base64 text.

![][my_image]
[my_image]: data:image/png;base64,xxxxx