Slate › Guide › Live sessions

Styling a code diagram

35Make it match

A diagram with default colours looks pasted on. The controls under the code area put it on your board properly.

ColoursText, Lines, Fill and Accent each take a colour. Fill has a tick beside it — leave it off for open shapes that let the board show through, turn it on for solid boxes.
TypeFont offers the same faces as the board, so a diagram can be chalky like your handwriting or clean for a handout. Size sets the base text size.
Match boardSnaps every setting back to the current surface and ink colour in one press.
Reading the codeThe editor colours keywords, labels, arrows, numbers and comments as you type, so a mistyped keyword shows up before you render. Tab indents instead of jumping out of the box.
Kept with the pictureColours, font and size are saved alongside the code, so reopening a diagram brings back exactly what you set. Duplicating one gives the copy its own settings — change the copy and the original is untouched.

Part of the Slate guide — or read the whole guide on one page.

Try it on the board.

Slate is free, needs no account and works offline once it has loaded.