Advanced post styling

Preformatted Text

This formatting option is generally used to show code snippets without rendering the code. In the editor, click the editor-preformatted-text preformatted text button or use the keyboard shortcut (⌘E). You’ll get a markdown section for a (multi-line) block of code, which entails 3 ``` backtick characters on the line above and below your section of preformatted text.

Inline preformatted text can be accomplished by highlighting the text you'd like preformatted, then clicking the editor-preformatted-text preformatted text button, which will insert a single backtick character before and after your text.

You can also use html <code>text here</code> or <pre>text here</pre> . <pre> will not have the grey background, but will still use a monospace font and respect whitespace, like so:

How doth the little crocodile
                  improve his shining tail...

Bulleted List

In the editor, click the editor-bulleted-list bulleted list button or use the keyboard shortcut (⌘⇧8). You may first highlight the text you’d like to be a bulleted list, if desired. You may also simply type an asterisk (*) followed by a space before each list item. The vertical spacing of your list items can be adjusted with a line break. For example:

  • item one
  • item two
  • item three

or

  • item one

  • item two

  • item three

Numbered List

In the editor, click the editor-numbered-list numbered list button or use the keyboard shortcut (⌘⇧7). You may first highlight the text you’d like to be a numbered list, if desired. You may also simply type "1. " before each list item. The vertical spacing of your list items can be adjusted with a line break. For example:

  1. List item
  2. List item
  3. List item

or

  1. List item

  2. List item

  3. List item

Insert Date/Time

Want to insert a date/time that will automatically display according to each user’s timezone? In the editor, click the editor-datetime insert date/time button. You’ll get a dialog to select a date from a calendar and a time of day, if desired. You can also denote a time span, like so:

2022-10-01T19:00:00Z2024-03-02T02:00:00Z

(The above was entered as October 1, 2022 at 1:00 pm until March 1, 2022 at 7:00 pm in the America/Denver timezone.)

Hide Details

Sometimes you might want to add extra details but don’t want those details to clutter your post. In the editor, click the editor-cog cog button, then select the editor-hidden-details Hide Details option.

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

will give you:

Summary

This text will be hidden

Blur Spoiler

In the editor, click the editor-cog cog button, then select the editor-blur-spoiler Blur Spoiler option.

[spoiler]This text will be blurred[/spoiler]

will give you:

This text will be blurred

1 Like