Scripta Reference for Hakyll Website

#note #tag:scripta

Inline Elements

  • [b text] — Makes text bold
  • [i text] — Makes text italic
  • [link Label URL] — External link (opens in new tab)
  • [par] — Inserts a paragraph break
  • [hrule] — Inserts horizontal rule
  • [hrule 200] — Horizontal rule 200px wide
  • [prog Label URL] — Program/app link (opens in new tab)

Block Elements

  • | image — Displays an image
    • Properties: width, float, caption, display (fullwidth, row)
    • Row mode: expandable makes images clickable to open full size
  • | equation — LaTeX math equation (auto-wraps aligned environments)
  • | theorem NAME — Theorem block with optional name
  • | quotation — Block quote
    • Property: title:text for attribution

Examples

[i This is [b bold and italic] text]

| equation
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}

| theorem Pythagorean
a^2 + b^2 = c^2

| quotation title:Einstein
Imagination is more important than knowledge.

| image width:400 float:left caption:My photo
path/to/image.webp

| image display:row expandable
image1.webp
image2.webp

image

Display images with various layouts.

Arguments: - expandable — Click opens image in new window - background — Use as page/section background

Properties: - width:N — Width in pixels - height:N — Height in pixels - caption:Text — Caption text - float:left or float:right — Float image with text wrap - display:row — Multiple images in horizontal row - display:fullwidth — Full-width image (100%) - ilink:URL — Make image a clickable link - opacity:N — (with background) Page background opacity (0-1)

Examples:

| image width:300 caption:A sunset
sunset.webp

| image expandable display:row width:200
img1.webp, img2.webp, img3.webp

| image background opacity:0.3
background.webp

| image float:left width:200 caption:Figure 1
diagram.webp

slideshow

Image slideshow with navigation controls.

Arguments: - expandable — Click opens image in new window

Properties: - width:N — Image width in pixels (default: 600) - height:N — Image height in pixels

Content: One image per line, optionally with caption after |

| slideshow expandable height:400
photo1.webp | First caption
photo2.webp | Second caption
photo3.webp

equation

LaTeX display math (rendered by KaTeX).

Content: LaTeX equation. If content contains &, auto-wraps in aligned environment.

| equation
\int_0^1 x^n dx = \frac{1}{n+1}

| equation
f(x) &= x^2 + 2x + 1 \\
     &= (x+1)^2

theorem

Mathematical theorem with optional name.

Arguments: - (Name) — Optional theorem name/attribution

Content: Theorem statement (rendered in italics, label in bold)

| theorem (Euclid)
There are infinitely many prime numbers.

quotation

Indented, italicized quotation block.

Properties: - title:Text — Optional title displayed in bold above

Content: Quotation text. Supports

for paragraph breaks.

| quotation title:Gettysburg Address
Four score and seven years ago...
[par]
Now we are engaged in a great civil war...

audio

Clickable audio player.

Properties: - title:Text — Display title (default: filename)

Content: Path to audio file in /media/audio/

| audio title:Piano Sonata
beethoven.mp3

video

Embedded video (YouTube, Vimeo, or direct URL).

Properties: - width:N — Width in pixels (default: 640) - height:N — Height in pixels (default: 360) - caption:Text — Caption below video

Content: Video URL

| video width:800 caption:Tutorial
https://www.youtube.com/watch?v=dQw4w9WgXcQ

pdf

Embedded PDF viewer.

Properties: - width:N — Width (default: 100%) - height:N — Height (default: 600px)

Content: Path to PDF file in /media/pdf/

| pdf height:800px
paper.pdf

prog

Embedded HTML application (iframe).

Properties: - title:Text — Display title - width:N — Width in pixels (default: 600) - height:N — Height in pixels (default: 400) - display:external — Show as link instead of iframe

Content: Path to HTML file in /prog/

| prog title:Game of Life width:800 height:600
life.html

| prog display:external title:Calculator
calc.html

center

Center-align content.

Content: Text/HTML to center (supports inline elements)

| center
This text is centered.

vspace

Vertical spacing.

Arguments: - N — Height in pixels

| vspace 30

hide

Hidden content (not rendered).

| hide
This content won't appear in output.