Text-formatting Tools for this forum (code block, spoiler text, hide text, scrollable content)

HanonO · June 18, 2025, 6:46pm

If you haven’t clicked the gear icon when composing, it offers many useful functions. Many of these functions also work when typed inline as formatting.

Spoiler Blur

The simplest is the [spoiler] [/spoiler] tags which will blur content in between so a reader won’t see it unless they click.

The murderer is Lord Chartreuse!

You can spoiler multiple paragraphs by putting the opening and closing spoiler tags alone on a line before and after the content.

I’ve got lots to say about inconsistencies in the Marvel Universe! Get ready!

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.

Code Blocks and monospace, inline and paragraph

If you’re pasting long blocks of code or need to use monospace to make specific characters more discernible like l and I (l and I) you can switch temporarily to monospace inline with backticks ` before and after (the unshifted tilde ~ key on US keyboards) or for longer excerpts, put three backticks on a line alone to start monospace and three on a line alone to end it.

Code here.

Second paragraph.

You can also use the inline backticks or code formatting to display a macro verbatim which would otherwise be converted. I use backticks here to reveal the actual [spoiler] BIG SECRET! [/spoiler] tags without them actually taking effect as they normally would: BIG SECRET! . I can use a code block with three backticks alone on a line before and after code to reveal I’m using backticks for extra layers of meta

`[spoiler] BIG SECRET! [/spoiler]`

Scrollable Content (non code, potentially with other links and media)

The code block creates a scrollable window for long text by default, but you can make any content scrollable in a window with it’s own vertical scroll bar so readers don’t have to mouse wheel past a building’s height of text if they scroll outside the window.

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.

Superfluous image!

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.

Clicking Insert Scrollable Content will insert a div macro and you can put the long content in between.
<div data-theme-scrollable="true"> [content goes here] </div>

Quote Blocks - non scrollable

Highlight text and click the quotation-marks icon in the formatting bar to set off text.

In real life, I assure you, there is no such thing as Algebra.
–Fran Lebowitz

This is denoted by a right caret > before each paragraph of quoted text, so this can be be a good or bad option for quoting parser transcripts - at the command prompt it will produce layers of inline quotes like Usenet.

West of House
You are standing in an open field west of a white house, with a boarded front door.
There is a small mailbox here.

open mailbox
Opening the small mailbox reveals a leaflet.

read leaflet
(Taken)
"WELCOME TO ZORK!

ZORK is a game of adventure, danger, and low cunning. In it you will explore some of the most amazing territory ever seen by mortals. No computer should be without one!"

drop leaflet
Dropped.

Hide Details: click a link to reveal more

I also really like “Hide Details” as you can use it for spoilers or tangent material or a large amount of material you want to make optionally visible.

[details="Summary"]
This text will be hidden
[/details]

“Summary” is the shown text that when clicked will reveal the hidden excerpt between the bracketed tags which can include media and other links.

Summary

This text will be hidden

It's great for spoilers...

Rosebud is a sled!

Only click if you're a Lorem Ipsum fan

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat.

A link to our Code of Conduct

Superfluous image!

In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.

jwalrus · June 18, 2025, 8:40pm

Just to add, right carets can be escaped with a backslash if you want to start a line with a literal right caret (if, for example, you’re quoting a passage from a parser game).

>\>X ME
>As good-looking as ever.

… appears as:

>X ME
As good-looking as ever.

Hidnook · June 18, 2025, 8:58pm

Any formatting can be escaped with backslash.

> X ME
(\> X ME)

[spoiler] text [/spoiler]
(\[spoiler] text [/spoiler])

Also supports other Markdown formatting, such as

links
[links](google.com)

bullet points
- that can be nested
- like so

or with hyphens but it looks the same
- you can indent these too

* bullet points
  * that can be nested
  * like so
- or with hyphens but it looks the same
  - you can indent these too

(with two spaces before the asterisk)

Headings

Subheadings

Subsubheadings

(beginning a line with # , ## , and ### respectively)

and ~~strikethrough~~ text (~~strikethrough~~).

If you want to have backticks within a code block like this: ` without escaping the code block, you can use `` to surround your code instead (and in this situation I used ``` inline to show 2 backticks, and 4 to show 3, and so on…).

You can make horizontal lines:

with:

---

(notice the empty newlines before and after).

There’s even some HTML support, like a different way to do links and even keyboard buttons!

<a href="google.com">a different way to do links</a>
<kbd>keyboard buttons!</kbd>