Skip to main content

Inline previews

A typed doc string with the content type image, svg or html holds a document rather than plain text — and in the case of an image, one you cannot read at all as text. The plugin renders it in place, below the doc string, so the spec file shows you the picture or the page as well as the markup that produced it.

Opening a preview​

A doc string of one of those three types gets a grey eye icon in the gutter, beside its opening """. Click it and the rendered content appears below the closing """, with the icon turning green while the preview is open. Click again to close it.

<A snippet of the gutter beside a doc string's opening """, showing the eye icon grey when the preview is closed and green when it is open.>

Each preview is independent, so you can leave one open and the rest closed.

<A spec file with an """image doc string and its rendered picture below the closing quotes, and the green eye icon in the gutter.>

What each type shows​

  • image holds the picture base64 encoded. The plugin works the format out from the data itself — PNG, JPEG, GIF and WebP are all recognised.
  • svg holds the markup of the drawing, rendered as it stands.
  • html holds a page, rendered as a browser would.

Where the content cannot be decoded, the preview area says so instead of staying blank, so a truncated or corrupted value is obvious rather than looking like an empty picture.

Opening and closing them together​

The previews button on the editor toolbar opens or closes every preview in the file at once, and its dropdown carries their appearance settings — the colour of the bar down the left of each preview panel.

<A snippet of the editor toolbar with the previews button, shown pressed while previews are open in the file.>