This page shows how images are rendered in this theme.

Normal Markdown Syntax to Place an Image

Normally, images are centered in the page.

![](https://hbb.afl.rakuten.co.jp/hgb/1ee40173.5e0d8bb1.1ee40174.f69272c5/?me_id=1205150&item_id=10004413&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fchamp%2Fcabinet%2Fkarate%2Fimg60748112.jpg%3F_ex%3D400x400&s=400x400&t=pict)

Special Syntax

Floating image

Float image to right: when the alternative text for the image includes right, the image is treated as floating image.

![right](https://1.bp.blogspot.com/-36JFMZJkRzQ/YGb7rmCVUII/AAAAAAAAjls/PJqguHshxvEO40z9sIOTRk0ctQVN1B1pQCLcBGAsYHQ/s400/judo_boy_w_mask.jpg)

right

Clear: and to clear the floating, hr element with clear class can be used.

<hr class="clear">

Similar as right, left in alternative makes image floated to left.

![left](https://1.bp.blogspot.com/-36JFMZJkRzQ/YGb7rmCVUII/AAAAAAAAjls/PJqguHshxvEO40z9sIOTRk0ctQVN1B1pQCLcBGAsYHQ/s400/judo_boy_w_mask.jpg)

left

These floating images are enabled by regular expression ^right and ^left, following markdown also treated as floating image:

![left:addtional notes](https://example.com/example.jpg)