code

Code as a canvas environment: the full editor experience — syntax highlighting, line numbers, a line/column readout, error markers — with the code choreographed like everything else on a canvas. Content is written as lines{} chunks; cues wrap chunks to bring them in and out on the timeline, and the environment assembles whatever is visible into one document, numbering the lines actually shown. With editable: true, the reader’s first keystroke forks the assembled text into their own copy (kept between visits); choreography freezes until they reset.

codeNode
A code canvas titled fit.py: a Python function fitting a line with NumPy, and the two lines calling it highlighted.A code canvas titled fit.py: a Python function fitting a line with NumPy, and the two lines calling it highlighted.

#The code environment

code puts code on the canvas with syntax highlighting, line numbers, a line/column readout and error markers, and lets cues choreograph it like anything else there. Its implicit attribute is language; title names the environment, editable lets the reader edit the text, and continue: #id carries session state forward from an earlier environment.

A Python code canvas that loads three islands’ areas and species counts into NumPy arrays, takes their logarithms and fits a line to them.A Python code canvas that loads three islands’ areas and species counts into NumPy arrays, takes their logarithms and fits a line to them.
code{
    lines{
        import numpy as np

        # Baltra, Bartolomé and Santa Cruz: area in km² and plant species counted
        area = np.array([25.09, 1.24, 903.82])
        species = np.array([58, 31, 444])

        log_area = np.log10(area)
        log_species = np.log10(species)
        z, log_c = np.polyfit(log_area, log_species, 1)
    }
}(
    language: python
)
A code environment does not execute anything by default. An output shown to the reader is authored — a comment or a later chunk asserting what an interpreter would print. A runnable environment is the opt-in exception: the reader may run it, into the environment's console, and nothing it prints ever reaches the canvas.

#Lines

Code lives in lines chunks: the unit a cue wraps and the unit every other reference addresses. Chunks rather than line numbers, so that inserting a line above a chunk does not renumber what a cue points at. A chunk takes indent (its implicit attribute), highlight, and the error and diff attributes error-lines with error-message, added-lines and removed-lines.

#The typing cue

cue.write types the chunks it wraps in character by character on the timeline. in: anchors when the typing starts and speed: is characters per second, 35 by default.

Three frames of a Python code canvas: a polyfit line alone, then a print line beneath it half typed, then typed in full.Three frames of a Python code canvas: a polyfit line alone, then a print line beneath it half typed, then typed in full.
code{
    lines{
        z, log_c = np.polyfit(log_area, log_species, 1)
    }
    cue.write{
        lines{
            print(z)   # ≈ 0.34
        }
    }(
        in: 1
    )
}(
    language: python
)

#Splicing values into code

{{ }} substitution reaches literal code bodies exactly as it reaches prose — it is a preprocessor over source text, so an @let constant or a fully-qualified dataset column splices into a chunk before anything is parsed:

@data#survey:galapagos-plants-1973.csv

scene{
    The areas come from the attached survey.
}[
    code{
        lines{
            area = np.array([{{#survey.area}}])
        }
    }(
        language: python
    )
]

The column arrives as its cells joined with commas, which is the form a Python list literal takes.

#Running code

runnable: true puts a Run button in the environment's toolbar for signed-in readers. A run executes exactly what the editor shows — the reader's fork, once they have edited — in a disposable sandbox with no network access; stdout and stderr stream into a console that folds out of the environment's footer, and a runtime error marks the line it names in the editor. Running needs an explicit language (auto never runs). Python runs with the scientific stack ready — numpy, pandas, statsmodels, matplotlib — plus the standard library; JavaScript runs on Node with its built-in modules; C compiles with gcc, AddressSanitizer on, so memory errors report their line. No other packages can be installed.

A chunk with setup: true is provisioning rather than content: it never displays, and it always executes, prepended in source order outside cue gating — so what a run computes cannot depend on where the reader has scrolled. Imports and fixture values live there.

A runnable, editable Python code canvas, its toolbar carrying the Run control.A runnable, editable Python code canvas, its toolbar carrying the Run control.
code{
    lines{
        import statistics
    }(
        setup: true
    )
    lines{
        area = [25.09, 1.24, 903.82]
        print(statistics.mean(area))
    }
}(
    language: python
    runnable: true
    editable: true
)

#Attributes

languageImplicit
Drives the syntax highlighting, the header icon, and the display name.
autojavascripttypescriptpythonjavacsharprubygocppphpswiftplaintexthtmlcssjsonxmlbashsqlkotlinrustscaladartluahaskellelixirclojureerlangperlrmatlabgroovyobjective cvisual-basicassemblyfortrancobolfsharpocamlpowershellshellyamlmarkdowngraphqlprotobufchalkpostgrespostgresqlsassscssotherjstspycsc#rbc++ktrsshhsexscljcljserlplmvbvbsasmf90f95f03f08f15f18cobcblfsfsifsxmlmlips1psm1ymlmdgqlprotopgpsqltxttextplainobjc
Also written: langCan be written as shorthand: code:value
Defaultauto
title
The filename shown in the header tab, beside the language’s own mark.
Also written: name, filename, file-name, file
editable
The reader may edit the code. Editing forks the assembled text into their own copy and freezes choreography; on a runnable environment, Run executes the fork.
Defaultfalse
runnable
The reader may run the environment: the shown text (their fork, once edited) plus setup chunks executes in a disposable sandbox, streaming stdout and stderr into the environment's console. Needs an explicit language (auto never runs); Python (with the scientific stack), JavaScript and C.
Defaultfalse
show-line-numbers
Show the line-number gutter. Numbering runs over whatever the timeline has made visible, not over the chunks as written.
Also written: line-numbers
Defaulttrue
wrap
Start with soft wrap on.
Defaultfalse
continue
Inherit an earlier same-type environment's state: continue: #that-environment.

#Allowed content

#Allowed in

#Examples

A Python code canvas titled greet.py, holding a two-line function that greets a name.A Python code canvas titled greet.py, holding a two-line function that greets a name.
code{
    lines{
def greet(name):
    return f"Hello, {name}!"
    }
}(
    language: python
    title: greet.py
)
Three frames of the first step: one line of Python, then a second line fading in beneath it.Three frames of the first step: one line of Python, then a second line fading in beneath it.
code{
    lines{
x = 1
    }
    cue{
        lines{
y = x + 1
        }
    }(
        in: 1
    )
}(
    language: python
)
A JavaScript code canvas titled mean.js, a function that averages an array.A JavaScript code canvas titled mean.js, a function that averages an array.
code{
    lines{
function mean(values) {
    const total = values.reduce((a, b) => a + b, 0);
    return total / values.length;
}
    }
}(
    language: javascript
    title: mean.js
)

Last updated