build: 251ms run: 2ms

Monospaced cells

There are 4 types of monospace cells: MonospaceCell, ValueCell, AnnotatedValueCell, and SourceCell.

Monospace cell

With dc.Mono, you can create a basic monospace cell.

dc.Mono("I am a monospace Cell.")
I am a monospace Cell.

Monospace cells support syntax highlighting with devcard.WithHighlighting option:

dc.Mono(devcard.WithHighlighting("clojure"), "(defn lookup [kw]\n  (get @*registry kw))")
(defn lookup [kw]
  (get @*registry kw))

The behavior of dc.Append for a monospace cell is slightly different from a markdown cell: rather than adding text to the end of the line, it appends a new line. I find this behavior both intuitive and the most common use case.

dc.Mono()
for i := range 7 {
	dc.Append("Processing item #", i+1, "...")
}
dc.Append("Done.")
Processing item #1...
Processing item #2...
Processing item #3...
Processing item #4...
Processing item #5...
Processing item #6...
Processing item #7...
Done.

Value cell

Value cells contain pretty-printed Go values:

rect := image.Rectangle{}
dc.Val(v)
image.Rectangle{
  Min: image.Point{
    X: 0,
    Y: 0,
  },
  Max: image.Point{
    X: 0,
    Y: 0,
  },
}

Annotated value cell

Annotated value cells are similar, but each value has a comment attached to it:

dc.Ann("Small", image.Rect(5, 5, 10, 10), "Large", image.Rect(10, 10, 60, 60))
// Small
image.Rectangle{
  Min: image.Point{
    X: 5,
    Y: 5,
  },
  Max: image.Point{
    X: 10,
    Y: 10,
  },
}

// Large
image.Rectangle{
  Min: image.Point{
    X: 10,
    Y: 10,
  },
  Max: image.Point{
    X: 60,
    Y: 60,
  },
}

Source cell

Source cell contain source code of a function declared in the module:

dc.Source("examples.code")
// code appends a cell with Go code to the end of the devcard.
func code(dc *devcard.Devcard, src string) {
	dc.Mono(devcard.WithHighlighting("go"), src)
}

The name of the function should always be prefixed by the package it’s declared in.

Keep in mind that the function must be declared in the same module as your devcard. If you try to reach outside of it, you’ll get an error:

dc.Source("image.Rect")
SourceCell error
can't locate the source for image.Rect

❬ prev: Text cells | top: examples | next: Image cell ❭