---
title: "How to change the color of the text in Markdown"
slug: "how-to-change-the-color-of-the-text-in-markdown"
description: "To change the color text in Markdown editor, paste the provided code and update the desired text and color."
tags: ["Customization"]
updated: 2026-06-20T09:00:31Z
published: 2026-06-20T09:00:31Z
canonical: "docs.document360.com/how-to-change-the-color-of-the-text-in-markdown"
---
> ## Documentation Index
> Fetch the complete documentation index at: https://docs.document360.com/llms.txt
> Use this file to discover all available pages before exploring further.
# How to change the color of the text in Markdown
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.
NOTE
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.
1. Open the desired article in the Knowledge Base portal.
2. Paste the appropriate snippet from the table above at the location where you want the styled text.
3. Replace `Text content` with your desired text.
4. Replace the style values (colour name, pixel value, or hex code) with your requirements.
### Customising text colour
```
Text content
```
Replace `red` with any valid CSS colour name (e.g. `blue`, `green`) or a hex code (e.g. `#e63946`).
### Customising text size
```
This text is larger than normal.
```
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
```
Text with padding and background.
```
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.
