/

For the complete documentation index, see llms.txt. This page is also available as Markdown.

Quarkdown

2.5.1

Docs

On this page

Image size

While base Markdown requires HTML code to constrain the size of an image, Quarkdown introduces a syntax extension that achieves the same result more elegantly: !(WIDTHxHEIGHT)[ALT](URL).

Example 1

The following equivalent examples load image.png with the label Alt as CommonMark Markdown does, but also add a size constraint that fits the visible image into a 300px by 100px box.

!(300x100)[Alt](image.png)

<!-- or -->

!(300*100)[Alt](image.png)

<!-- or -->

!(300 100)[Alt](image.png)
Icon

In addition to pixels (whose unit can be omitted), any other size unit is supported. When using other units, you must use either * or a space as the delimiter instead of x.

!(5cm*35mm)[Alt](image.png)

<!-- or -->

!(2.5in 1cm)[Alt](image.png)

<!-- but not this -->

!(2.5inx1cm)[Alt](image.png)

<!-- '%' is an exception. This is valid (although not very readable) -->

!(30%x150%)[Alt](image.png)

Automatic dimension

When you set either component (width or height) to _ (underscore), it becomes automatic, meaning that component is calculated to preserve the original aspect ratio.

Auto height

<!-- 300px width, auto height -->
!(300x_)[Alt](image.png)

<!-- 5cm width, auto height -->
!(5cm*_)[Alt](image.png)

<!-- 2in width, auto height -->
!(2in _)[Alt](image.png)

<!-- 50% width, auto height -->
!(50% _)[Alt](image.png)

As a convenient shorthand, you can omit the automatic height entirely:

<!-- 300px width, auto height -->
!(300)[Alt](image.png)

<!-- 5cm width, auto height -->
!(5cm)[Alt](image.png)

<!-- 2in width, auto height -->
!(2in)[Alt](image.png)

<!-- 50% width, auto height -->
!(50%)[Alt](image.png)

Auto width

<!-- auto width, 100px height -->
!(_x100)[Alt](image.png)

<!-- auto width, 15mm height -->
!(_*15mm)[Alt](image.png)

<!-- auto width, 2in height -->
!(_ 2in)[Alt](image.png)