Display non-print characters

In this example, we're going to make pilcrow and line break symbols to be visible in your documentation.

Preview

This is a line that has been broken↵
without creating new paragraph. While the pilcrow¶

marks the end of the paragraph. 

How to implement

For starters, you will need to create a new output tag, if you want to show these symbols only under specific circumstances. Let's go with ShowSymbols

Then, create a new style file for your project and add a condition to it: Publish with specific output tags: ShowSymbols 

The file should contain the CSS code, described in the CSS code section below.

After this, while editing the topic, go to the VIEW tab of the Topic Editor toolbar in Design mode and select ShowSymbols tag as the preview tag.

CSS Code 

br {
  content: " ";
}

br::after {
  content: "↵\a";
  white-space: pre;
}

p::after {
  content: "¶";
}