TWiStErRob

Cheat sheet for formatting tags

Formatting used in this blog

All-in-one visual medley of most formatting options I use in markdown on this website.

I created this blog more than half a year ago and a lot of convetion I tried to introduce was lost in memory. This document will help to remember what’s possible and how it will look like.

It should also help to quickly test if formatting would break with any future updates of the site.

TL;DR

This heading is not part of the TOC. All headings can be linked via their short name: this heading.

Formatting

  • Belonging words should have   between to prevent wrapping: Papp Róbert.
  • Long list of alternatives should have <wbr> between them to allow wrapping: this one/that one/other thing
  • Use <samp> for sample output: Exit code: 1.
  • Use <samp> for math: 4 people × 5 days = 20 man hours.
  • Use <var> for something representing a number: your age times.
  • Use <mark> for callout Grammar Nazis
  • Use <mark> for UI elements: Press Next to proceed.
  • Use <abbr> to show an abbreviation: shot, but it’s not necessary if the abbr is defined in markdown
  • Custom colors when referencing something highlighted on an image: Save button.

Code

  • File extensions with <code>: .css, .js, .html
  • Paths and file names with <samp>: lib/code/path/file.name
  • Liquid-like code may need some escaping: {{tag}}
  • Fencing code blocks’ ticks can be output like this: <code>```</code>```.
  • Don’t be lazy with alternative/code/formatting.

Normal code block

/** Comment */
public void method();

Some extra explanation to help understand the code.

Code block with title

/** Comment */
public void method();

Code block with Liquid code

{% for tag in site.data.tags %}<li>{{ tag.name }}{% unless forloop.last %}, {% endunless %}</li>{% endfor %}

Code block for shell

me@laptop$ command args "more args"
output text from command
though output may be highlighted weirdly

Quotes

Here’s a short quotation which is in the middle of a sentence.

This is a long quotation by someone, normal markdown formatting rules apply:
strong, em, em, strong em, html bold, code, kbd, samp, ins, del TWiStErRob

Program output text output from file.name in library

Alerts

All alerts support markdown and their names are all lowercase, because they’re used as CSS classes, for example TODO is alert todo=. The TODO: prefix is not automatically inserted, it’s for name calling only here.

Alert:
This is like any normal markdown, even when used from non-markdown context:
strong, em, em, strong em, html bold, code, kbd, samp, ins, del.

Warning: call out a caveat that’s easy to trigger
This is like any normal markdown, even when used from non-markdown context:
strong, em, em, strong em, html bold, code, kbd, samp, ins, del.

Info: supplementary information, for example links to further reading or documentation.
This is like any normal markdown, even when used from non-markdown context:
strong, em, em, strong em, html bold, code, kbd, samp, ins, del.

Success:
This is like any normal markdown, even when used from non-markdown context:
strong, em, em, strong em, html bold, code, kbd, samp, ins, del.

Text:
This is like any normal markdown, even when used from non-markdown context:
strong, em, em, strong em, html bold, code, kbd, samp, ins, del.

TODO: reminder to myself that something needs to be done here
This is like any normal markdown, even when used from non-markdown context:
strong, em, em, strong em, html bold, code, kbd, samp, ins, del.

Terminal:
This is like any normal markdown, even when used from non-markdown context:
strong, em, em, strong em, html bold, code, kbd, samp, ins, del.

Go to top