Code text

Code text shows source code on the board, in a box you edit as in a programming editor:

• Highlighting: it highlights the syntax of its language and can show line numbers, wrap long lines, and fold blocks.
• Editor: it is edited in a code editor with bracket matching, auto-indentation, autocompletion, and syntax checks.
• Fixed box: the code scrolls inside it instead of reflowing the box.

Creating code text

Both ways leave the box in editing mode, with JavaScript highlighting until you choose a language, and the selection tool active again when you finish.

Creating a box at the default size

A box placed with one click, at the standard size.

• Operation:
  1. Pick Code text in the Tools panel.
  2. Click where the box should go.
  3. Type or paste the code, then click on empty board to finish.
• Result: a box of the default size, in editing mode. An empty box stays on the board.
• Tip: pasting a piece of code on the board with nothing selected also creates code text for it, with the language detected from the code.

Creating a box at a custom size

A box sized by hand from the start.

• Operation:
  1. Pick Code text in the Tools panel.
  2. Drag to draw the box the code will occupy.
  3. Type or paste the code, then click on empty board to finish.
• Result: a box of the size you dragged, in editing mode. Code that does not fit scrolls inside the box.
• Tip: the size can be changed later with the handles. See Sizing.

Editing

Changes the code with the help of a real code editor.

• Operation:
  1. Start editing. How depends on whether the box is already selected:
     • If the box is selected, click it again, or click Enter edit mode in the Actions panel.
     • If the box is not selected, double-click it.
  2. Type or paste the code.
  3. Click on empty board to finish.
• Result: the box keeps the code as you typed it, with its highlighting.

Typing aids

• Syntax is highlighted for the chosen language.
• Matching brackets are highlighted, and closing brackets are added as you type the opening ones.
• New lines follow the indentation of the language.
• Autocompletion suggests as you type.
• Other occurrences of the selected text are highlighted.

Folding blocks

• Blocks fold and unfold from the gutter.
• Folded blocks are kept with the shape, so the board shows what you left visible.

Syntax errors

Syntax errors are marked in the margin and in the code.

Sizing

The handles around a selected box resize the box, never the code.

• Any handle changes the width and height of the box.
  • The code keeps its size. It is set by Font size in Text Style.
  • Code that does not fit scrolls inside the box.

Wrapping and scrolling

• Line wrapping in the Code section wraps long lines instead of scrolling sideways.
• While editing, the wheel scrolls the code inside the box. The shape keeps that scroll position.

Attributes

Selected code text shows these sections of the Attributes panel.

Selection info

The attributes that affect the shape as a whole.

• X: the horizontal position of the shape's pivot. Inside a frame, it's measured from the frame.
• Y: the vertical position of the pivot, also measured from the frame inside one. Which way it grows depends on the Y axis direction in the UI settings.
• W: the width of the shape.
• H: the height of the shape.
• Rotation: the angle around the pivot.
• Opacity: the transparency of the whole shape, stroke and fill included.
• Corners radius: rounds the corners of the shape.

Code

The language and layout of the code.

• Language: the language used for syntax highlighting: Plain text, JavaScript, HTML, CSS, JSON, Python, or Markdown. HTML shapes always use HTML.
• Background: the background color of the source panel. Shown by HTML shapes and camera lens panes; the box of code text is colored in its Fill section.
• Line numbers: shows a number beside each line. Shown while the gutter is on.
• Line wrapping: wraps long lines instead of scrolling sideways.
• Gutter: shows the strip with line numbers, fold markers, and error markers beside the code. Hidden, the code keeps its place.
• Scale: shrinks or enlarges the whole source panel beside the shape, from 0.1 to 4. Shown for a selected HTML shape or camera lens pane.

Text Style

The typeface, size, and line height of the code. Font size is given in pixels.

Font style and family

• Font style: the family of typefaces to choose from.
  • Sans Serif: plain letterforms without finishing strokes.
  • Serif: letterforms with finishing strokes, as in print.
  • Handwriting: letterforms that look written by hand.
  • Mono: every character takes the same width, as in code.
  • Display: decorative typefaces for titles.
• Font family: the typeface, within the chosen style.

Font variant

• Font variant: the weight or slant of that typeface.

Font size

• Font size: the size of the text.

Letter spacing

• Letter spacing: for text on a path, the extra space between characters along the path.
• Line height: the space between lines.

Stroke

The stroke of the box.

• Stroke style: the kind of line. The style decides which of the controls below appear.
  • No stroke: no line at all. Arrows don't offer it.
  • Solid stroke: a continuous line.
  • Dashed stroke: a line made of dashes.
• Stroke color: the color of the line.
• Stroke opacity: the transparency of the line alone.
• Stroke width: the thickness of the line.
• Stroke gap: the space between dashes.
• Stroke dash length: the length of each dash.

Fill

The color and opacity of the box behind the code.

• Fill color: the color of the box. It also chooses the syntax palette: a dark color gives light code and a light color gives dark code.
• Fill opacity: the transparency of the box. At 0 only the code remains on the board, and the chosen color still decides the palette.

Actions

Besides the actions every shape has, covered in What every shape shares, code text offers this in the Actions panel.

Convert to Image

Replaces the box with an image that looks the same but draws faster, to keep a board with many shapes light. The box can no longer be edited.

• Operation: click Convert to Image. If the box has a text animation, a dialog warns that it will be lost, and you confirm with Convert.
• Result: an image in place of the box that looks the same, with highlighting, line numbers, and folded blocks. It is an SVG when that can match the box exactly, and otherwise a JPEG or PNG at up to double resolution. Move, rotate, scale, resize, and fade animations move to the image, and the text animation is removed.
• Tip: to edit the result again as text, use Convert SVG image to shapes. You get text shapes with the same layout and colors, not code text.

Animating code text

Code text takes the position, rotation, scale, resize, opacity, and text animations. Text Animation types the code in or out, and the highlighting follows as it appears. For the others, see Transforming shapes and Revealing and hiding shapes.

Player interaction

In play mode and in the Player the code is shown as it was left, at its saved scroll position. It cannot be scrolled, selected, or copied there.

Languages

Highlighting covers Plain text, JavaScript, HTML, CSS, JSON, Python, and Markdown; choose the language in the Code section. Code longer than 500,000 characters or 10,000 lines shows without highlighting.