The Markdown editor does not have built-in support for custom font colours, sizes, or spacing. The workaround is to use inline HTML with the <span> tag and the style attribute, which Document360's Markdown editor renders correctly. The <span> tag wraps the text you want to style, and the style attribute applies the CSS property directly — for example, color:red sets the text colour to red.
When to use inline HTML styling
These techniques are useful when you need to:
- Highlight specific text — draw attention to a warning, a term, or a key value using colour without using a callout block.
- Match a visual style or brand guideline — apply a specific colour or font size to align with your product's design language.
- Add visual separation — use padding and a background colour to make a snippet or label stand out from surrounding body text, similar to a badge or tag.
Use these sparingly. Overuse of custom colours or sizes makes articles harder to read and inconsistent across your knowledge base.
These techniques only work in the Markdown editor. In the WYSIWYG editor, use the toolbar options for colour and formatting instead.
Quick reference
Use these snippets directly. Replace the placeholder text and values as needed.
| Style | HTML snippet |
|---|---|
| Text colour | <span style="color:red">Text content</span> |
| Font size | <span style="font-size:18px">Text content</span> |
| Padding and background | <span style="padding:10px;background-color:#f0f0f0">Text content</span> |
| Combined | <span style="color:red;font-size:18px;padding:10px;background-color:#f0f0f0">Text content</span> |
How to apply custom text styles in Markdown
The pattern is the same for all three styles — only the CSS property inside style="" changes.
- Open the desired article in the Knowledge Base portal.
- Paste the appropriate snippet from the table above at the location where you want the styled text.
- Replace
Text contentwith your desired text. - Replace the style values (colour name, pixel value, or hex code) with your requirements.
Customising text colour
<span style="color:red">
Text content
</span>
Replace red with any valid CSS colour name (e.g. blue, green) or a hex code (e.g. #e63946).
Customising text size
<span style="font-size:18px">
This text is larger than normal.
</span>
Replace 18px with your desired font size. Standard body text in most knowledge bases renders at 14–16px, so values above this will appear larger.
Customising text padding and background
<span style="padding:10px;background-color:#f0f0f0">
Text with padding and background.
</span>
Replace 10px with your desired padding size and #f0f0f0 with your desired background colour. You can use any valid CSS colour name or hex code.
