Images

Basic Usage

Insert images with Markdown syntax. Place image files under static/img/ and reference them with a path starting with /img/.

Source

![diagram](/img/logo.svg)

Result

Center an Image

Markdown cannot center images directly; wrap them in a <div style={{ textAlign: 'center' }}> instead.

Source

<div style={{ textAlign: 'center' }}>
  <img src="/img/logo.svg" alt="diagram" />
</div>

Result

Rotate an Image

Add style={{ transform: 'rotate(deg)' }} to <img>; positive values rotate clockwise.

Source

<img src="/img/logo.svg" alt="diagram" style={{ transform: 'rotate(15deg)' }} />

Result

Center and Rotate

Combine centering (outer div) and rotation (inner img) to apply both at once.

Source

<div style={{ textAlign: 'center' }}>
  <img src="/img/logo.svg" alt="diagram" style={{ transform: 'rotate(15deg)' }} />
</div>

Result

Image paths .svg, .png, .jpg, etc. all work; this site applies a uniform rounded corner and thin border to images (see the global .markdown img style).