O editor Markdown não possui suporte embutido para cores, tamanhos ou espaçamento personalizados de fonte. A solução alternativa é usar HTML inline com a <span> tag e o style atributo, que o editor Markdown do Document360 renderiza corretamente. A <span> tag envolve o texto que você deseja estilizar, e o style atributo aplica diretamente a propriedade CSS — por exemplo, color:red define a cor do texto para vermelho.
Quando usar o estilo HTML inline
Essas técnicas são úteis quando você precisa:
- Destaque texto específico — chame atenção para um aviso, um termo ou um valor-chave usando cor sem usar um bloco de chamada.
- Combine um estilo visual ou diretriz de marca — aplique uma cor ou tamanho de fonte específico para alinhar com a linguagem de design do seu produto.
- Adicione separação visual — use preenchimento e uma cor de fundo para fazer um trecho ou etiqueta se destacar do texto do corpo ao redor, semelhante a um crachá ou etiqueta.
Use esses com moderação. O uso excessivo de cores ou tamanhos personalizados torna os artigos mais difíceis de ler e inconsistentes em toda a sua base de conhecimento.
Essas técnicas só funcionam no editor Markdown. No editor WYSIWYG, use as opções da barra de ferramentas para cor e formatação.
Referência rápida
Use esses trechos diretamente. Substitua o texto provisório e os valores conforme necessário.
| Estilo | Trecho HTML |
|---|---|
| Cor do texto | <span style="color:red">Text content</span> |
| Tamanho da fonte | <span style="font-size:18px">Text content</span> |
| Enchimento e fundo | <span style="padding:10px;background-color:#f0f0f0">Text content</span> |
| Combinado | <span style="color:red;font-size:18px;padding:10px;background-color:#f0f0f0">Text content</span> |
Como aplicar estilos de texto personalizados no Markdown
O padrão é o mesmo para os três estilos — apenas a propriedade CSS dentro style="" muda.
- Abra o artigo desejado no portal da Base de Conhecimento.
- Cole o trecho apropriado da tabela acima no local onde você quer o texto com estilo.
- Substitua
Text contentpelo texto que você deseja. - Substitua os valores de estilo (nome da cor, valor do pixel ou código hexadecimal) pelos seus requisitos.
Personalização da cor do texto
<span style="color:red">
Text content
</span>
Substitua red por qualquer nome de cor CSS válido (ex. blue: , green) ou um código hexadecimal (por exemplo, #e63946).
Personalizando o tamanho do texto
<span style="font-size:18px">
This text is larger than normal.
</span>
Substitua 18px pelo tamanho de fonte desejado. O texto padrão na maioria das bases de conhecimento é renderizado em 14–16px, então valores acima disso parecerão maiores.
Personalização de preenchimento de texto e fundo
<span style="padding:10px;background-color:#f0f0f0">
Text with padding and background.
</span>
Substitua 10px pelo tamanho de acolchoamento desejado e #f0f0f0 pela cor de fundo desejada. Você pode usar qualquer nome de cor CSS válido ou código hexadecimal.
