Swiftlets
DocumentationShowcaseAbout

Text Formatting

Examples of text styling and inline formatting elements

← Back to Showcase

Basic Text Formatting

Basic text formatting elements for emphasis and styling.

Swift Code

Strong("Bold text using Strong")
Em("Italic text using Em")
Mark("Highlighted text using Mark")
Small("Small text using Small")

// Combined formatting
P {
    Text("This paragraph contains ")
    Strong("bold")
    Text(", ")
    Em("italic")
    Text(", and ")
    Mark("highlighted")
    Text(" text.")
}

Generated HTML

<strong>Bold text using Strong</strong>
<em>Italic text using Em</em>
<mark>Highlighted text using Mark</mark>
<small>Small text using Small</small>

<p>This paragraph contains <strong>bold</strong>, <em>italic</em>, and <mark>highlighted</mark> text.</p>

Preview

Bold text using Strong
Italic text using Em
Highlighted text using Mark
Small text using Small

This paragraph contains bold, italic, and highlighted text.

Code and Preformatted Text

Code elements for displaying inline code and code blocks.

Swift Code

// Inline code
P {
    Text("Use ")
    Code("let x = 42")
    Text(" to declare a constant.")
}

// Code block with Pre
Pre {
    Code("""
func greet(name: String) -> String {
    return "Hello, \(name)!"
}
""")
}

// Preformatted text without code
Pre("""
    ASCII Art Example:
     _____
    /     \
   | ^   ^ |
   |   >   |
    \_____/
""")

Generated HTML

<p>Use <code>let x = 42</code> to declare a constant.</p>

<pre><code>func greet(name: String) -> String {
    return "Hello, \(name)!"
}</code></pre>

<pre>    ASCII Art Example:
     _____
    /     \
   | ^   ^ |
   |   >   |
    \_____/</pre>

Preview

Use let x = 42 to declare a constant.

func greet(name: String) -> String {
    return "Hello, \(name)!"
}
    ASCII Art Example:
     _____
    /     \
   | ^   ^ |
   |   >   |
    \_____/

Quotations

Elements for quotations and citations.

Swift Code

// Block quote
BlockQuote {
    P("The only way to do great work is to love what you do.")
    P("- Steve Jobs")
}

// Inline quote
P {
    Text("As Einstein said, ")
    Q("Imagination is more important than knowledge.")
}

// Cite element
P {
    Q("To be or not to be")
    Text(" from ")
    Cite("Hamlet")
}

Generated HTML

<blockquote>
    <p>The only way to do great work is to love what you do.</p>
    <p>- Steve Jobs</p>
</blockquote>

<p>As Einstein said, <q>Imagination is more important than knowledge.</q></p>

<p><q>To be or not to be</q> from <cite>Hamlet</cite></p>

Preview

The only way to do great work is to love what you do.

- Steve Jobs

As Einstein said, Imagination is more important than knowledge.

To be or not to be from Hamlet

Subscript and Superscript

Subscript and superscript for scientific notation and footnotes.

Swift Code

// Chemical formula
P {
    Text("Water is H")
    Sub("2")
    Text("O")
}

// Mathematical expression
P {
    Text("E = mc")
    Sup("2")
}

// Footnote reference
P {
    Text("This needs a citation")
    Sup {
        Link(href: "#ref1", "[1]")
    }
}

Generated HTML

<p>Water is H<sub>2</sub>O</p>

<p>E = mc<sup>2</sup></p>

<p>This needs a citation<sup><a href="#ref1">[1]</a></sup></p>

Preview

Water is H2O

E = mc2

This needs a citation[1]

Insertions and Deletions

Elements for showing document edits and changes.

Swift Code

// Track changes
P {
    Text("The event is on ")
    Del("Saturday")
    Text(" ")
    Ins("Sunday")
    Text(".")
}

// With attributes
P {
    Text("Price: ")
    Del {
        Text("$99")
    }
    .attribute("datetime", "2025-01-01")
    Text(" ")
    Ins {
        Text("$79")
    }
    .attribute("datetime", "2025-01-15")
}

// Strike through (using Del as alternative)
Del("This text is no longer accurate")

Generated HTML

<p>The event is on <del>Saturday</del> <ins>Sunday</ins>.</p>

<p>Price: <del datetime="2025-01-01">$99</del> <ins datetime="2025-01-15">$79</ins></p>

<del>This text is no longer accurate</del>

Preview

The event is on Saturday Sunday.

Price: $99 $79

This text is no longer accurate

Abbreviations and Definitions

Elements for abbreviations, definitions, and annotations.

Swift Code

// Abbreviation with title
P {
    Text("The ")
    Abbr("HTML", title: "HyperText Markup Language")
    Text(" specification is maintained by the W3C.")
}

// Keyboard shortcut with Kbd
P {
    Text("Press ")
    Kbd("Ctrl")
    Text(" + ")
    Kbd("C")
    Text(" to copy.")
}

Generated HTML

<p>The <abbr title="HyperText Markup Language">HTML</abbr> specification is maintained by the W3C.</p>

<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.</p>

Preview

The HTML specification is maintained by the W3C.

Press Ctrl + C to copy.

Special Text Elements

Special purpose text elements for technical content.

Swift Code

// Keyboard input
P {
    Text("Press ")
    Kbd("Cmd")
    Text(" + ")
    Kbd("S")
    Text(" to save.")
}

// Sample output
P {
    Text("The command outputs: ")
    Samp("Hello, World!")
}

// Variable
P {
    Text("The ")
    Var("x")
    Text(" variable stores the result.")
}

// Time element
P {
    Text("Published on ")
    Time("January 1, 2025", datetime: "2025-01-01")
}

// Data element with value
P {
    Text("Product ID: ")
    Data("12345", value: "prod-12345")
}

Generated HTML

<p>Press <kbd>Cmd</kbd> + <kbd>S</kbd> to save.</p>

<p>The command outputs: <samp>Hello, World!</samp></p>

<p>The <var>x</var> variable stores the result.</p>

<p>Published on <time datetime="2025-01-01">January 1, 2025</time></p>

<p>Product ID: <data value="prod-12345">12345</data></p>

Preview

Press Cmd + S to save.

The command outputs: Hello, World!

The x variable stores the result.

Published on

Product ID: 12345

Basic ElementsLists