1.5.1 Procedures

Procedure: code-sample form KEY: #:value #:id #:label #:copy-label #:notice-title #:classes #:preview-classes #:panel-classes #:pre-classes #:toggle-classes ¶

Show a component and the form that produced it, in one card.

The specimen is the form rendered, and the source beside it is the same form pretty-printed, so the two can never disagree: pass the expression, not a copy of its output. The source is folded away until a reader asks for it, and it carries a copy button, which is what a documentation page is for.

The form is evaluated for display, in an environment holding both the caller’s bindings and (hygguile hygguile), so a page only writes its specimen once. Pass value to hand over an already-rendered fragment instead – useful when the specimen is not something that can be evaluated, or when you would rather it not be.

form

The S-expression to show and to render, e.g. '(button "Save").

value

An already-rendered fragment to show as the specimen, or #f to render form.

id

A stable HTML identifier, or #f for a generated one. Give one when the page has to name the specimen, e.g. to link to it.

label

The accessible name of the control that unfolds the source.

copy-label

The text of the button that copies the source.

notice-title

The title of the notification a copy raises.

classes

List of CSS classes for the card.

preview-classes

List of CSS classes for the row holding the specimen and the fold control.

panel-classes

List of CSS classes for the panel the source lives in.

pre-classes

List of CSS classes for the <pre> itself, replacing the ones pre chooses; empty leaves the source in the mono face it is set in.

toggle-classes

List of CSS classes for the fold control.

(code-sample '(button "Save"
                      #:on-click "save()"))

Procedure: pretty-code datum ¶

Render datum as the source a reader would write: quoted forms in shorthand, the arguments of a form aligned under its head, and a form that does not fit wrapped at a fixed column width.

datum

The S-expression to render, exactly as the page passes it to the component it shows.

(pretty-code '(button "Save" #:size '(text-sm)))
;; => (button "Save"
;;             #:size
;;             '(text-sm))