Verbatim Block Visual Test

This document demonstrates all verbatim block types in Scripta, showing each with and without options where applicable.

Math Blocks: - math - Display math - equation - Numbered equation (with optional label) - aligned - Aligned multi-line equations - array - Math arrays/matrices (with column format argument) - chem - Chemical equations

Code and Text: - code - Syntax-highlighted code (with optional language) - verse - Poetry with italic styling - verbatim - Raw preformatted text

Tables: - table / textarray - Tables with & separator - csvtable - CSV tables (with optional title) - datatable - Raw data display

Media: - image - Images with options: - Arguments: expandable - Properties: width, float, ypadding, description, figure, caption - iframe - Embedded content (with width, height)

Graphics (require JS integration): - svg - Inline SVG - tikz - TikZ diagrams - quiver - Commutative diagrams - chart - Charts

Configuration (hidden): - mathmacros - Define LaTeX macros - textmacros - Define text macros - settings, load, load-data, hide, docinfo, load-files, include, setup

Math Blocks

Basic Math (display mode)

The math block renders LaTeX mathematics in display mode:

Numbered Equation

The equation block creates a numbered equation:

\[ E = mc^2 \]

With a label for cross-referencing:

\[ E = mc^2 \]

Aligned Equations

The aligned block renders multi-line aligned equations:

Math Array

The array block creates a matrix or array with column alignment. The argument specifies column format (c=center, l=left, r=right):

Chemistry

Chemical Equations

The chem block uses mhchem notation for chemical equations:

Another example:

Code Blocks

Basic Code Block

The code block displays syntax-highlighted code:

function factorial(n) {
    if (n <= 1) return 1;
    return n * factorial(n - 1);
}

Code with Language Specification

renderText : String -> Html Msg
renderText str =
    Html.span [] [ Html.text str ]

Poetry and Verse

Verse Block

The verse block displays poetry with preserved line breaks and italic styling:

Tables

Text Table (textarray)

The table or textarray block uses & as column separator:

CSV Table

The csvtable block parses comma-separated values:

With a title property:

Data Display

Data Table

The datatable block displays raw data in preformatted style:

Raw Verbatim Text

Verbatim Block

The verbatim block preserves exact spacing and formatting:

Images

Basic Image

The image block displays an image from a URL:

Image with Width

Image with Caption and Figure Number

Expandable Image

Click the thumbnail to view full size (click overlay to close):

Floated Image

This text wraps around the floated image on the left. The image has a small top margin to align with the text baseline. When using float, the image becomes part of the text flow and subsequent content will wrap around it naturally. This is useful for magazine-style layouts where images are integrated with the surrounding text content.

Image with Fill Width

Embedded Content

Iframe

The iframe block embeds external content:

With custom dimensions:

Graphics Placeholders

These blocks require external JavaScript integration:

SVG

TikZ Diagram

Quiver Diagram

Chart

Macro Definitions

Math Macros (Hidden)

Define macros for use in math blocks:

Now we can use the macros:

Text Macros (Hidden)

Hidden/Configuration Blocks

These blocks are processed but produce no visible output:

| title number-to-level:2