{"id":5089,"date":"2022-05-10T02:00:00","date_gmt":"2022-05-10T00:00:00","guid":{"rendered":"https:\/\/alvarotrigo.com\/epa\/highlight-text-carrd\/"},"modified":"2025-06-09T10:37:01","modified_gmt":"2025-06-09T08:37:01","slug":"highlight-text-carrd","status":"publish","type":"post","link":"https:\/\/alvarotrigo.com\/blog\/highlight-text-carrd\/","title":{"rendered":"How to Highlight Text in Carrd Web Builder [Two ways]"},"content":{"rendered":"\n

Carrd is a great builder that puts extra emphasis on simplicity. Unlike many other website builders, Carrd won’t provide as many features as other website builders that can be way more sophisticated.<\/p>\n\n\n\n

But hidden in this simplicity, Carrd can also provide ways to perform some advanced editing.<\/p>\n\n\n\n

\"How<\/figure>\n\n\n\n

Highlighting a word or a piece of text in a sentence, for example, is one of these things that might not be so obvious for those who just started using the Carrd builder.<\/p>\n\n\n\n

Highlight Text in Carrd<\/h2>\n\n\n\n

In Carrd when we talk about highlighting text we talk about changing the color or background color of a text within a sentence or a paragraph.<\/p>\n\n\n\n

By “highlighting” we are not referring to adding some kind of backlight shadow, adding a circle around it, or any fancy kind of styling.<\/p>\n\n\n\n

\n

Related article:<\/strong> How To Use Carrd – Basic Tutorial<\/a><\/p>\n<\/blockquote>\n\n\n\n

Here’s the step by step guide on how to highlight text on Carrd builder:<\/p>\n\n\n\n

Step 1: Select the text to highlight<\/h3>\n\n\n\n

On your Carrd editor, click on the text where you want to use the highlighting.<\/p>\n\n\n\n

\"Select<\/figure>\n\n\n\n

Step 2: Add highlight mardown<\/h3>\n\n\n\n

Wrap the text you want to highlight between the ==<\/code> characters.<\/p>\n\n\n\n

So, for example, if you want to highlight the word “amazing”<\/em> inside text “Carrd is an amazing builder”<\/em>, you would have to rewrite it in this way:<\/p>\n\n\n

Carrd is an ==amazing== builder\n<\/code><\/span>Code language:<\/span> Markdown<\/span> (<\/span>markdown<\/span>)<\/span><\/small><\/pre>\n\n\n
\"Select<\/figure>\n\n\n\n
Once you add the markdown format, you’ll notice how your text becomes grey by default in some templates or how it gets some kind of darker background. This means you are on the right path.<\/p>\n\n\n\n
Step 3: Go to Appearance<\/h3>\n\n\n\n
On the left properties panel (or right, wherever you decide to show it), click on the “Appearance”<\/em> tab.<\/p>\n\n\n\n
\"Appearance<\/figure>\n\n\n\n
Step 4: Change the highlighting color<\/h3>\n\n\n\n
Notice how now an extra property named “Highlight” will appear showing two color pickers:<\/p>\n\n\n\n
\"Color<\/figure>\n\n\n\n
Now if you change the color on the first color picker you’ll see how the highlight color changes. You can now choose what color to apply to the highlighted text.<\/p>\n\n\n\n
\"Change<\/figure>\n\n\n\n
So… what’s the second color picker for?<\/p>\n\n\n\n
The second color picker will allow you to choose a background color for the highlighted text.<\/p>\n\n\n\n
For some reason, I noticed it won’t work in all templates, but if you figure out why, please let me know.<\/p>\n\n\n\n
\"Change<\/figure>\n\n\n\n
How to Highlight multiple texts in different colors<\/h2>\n\n\n\n
You probably have noticed that if highlight multiple words in a text, you will still only get 2 color pickers on the appearance tab.<\/p>\n\n\n\n
That means you can only choose a single color for all your highlighted texts.<\/p>\n\n\n\n
\"Highlighting<\/figure>\n\n\n\n
So… how do we highlight multiple texts in different colors?<\/p>\n\n\n\n
\n
Related article:<\/strong> Best Carrd fonts to use<\/a><\/p>\n<\/blockquote>\n\n\n\n
The solution is by using a different kind of markdown format, where we can define the color directly on the code.<\/p>\n\n\n\n
Instead of using the following to highlight two words:<\/p>\n\n\n
How to ==highlight== text in ==Carrd==\n<\/code><\/span>Code language:<\/span> Markdown<\/span> (<\/span>markdown<\/span>)<\/span><\/small><\/pre>\n\n\n
We would do this:<\/p>\n\n\n
How to [highlight]{yellow} text in [Carrd]{red}\n<\/code><\/span>Code language:<\/span> Markdown<\/span> (<\/span>markdown<\/span>)<\/span><\/small><\/pre>\n\n\n
That would result in the following:<\/p>\n\n\n\n
\"Highlighting<\/figure>\n\n\n\n
And sure, you can replace yellow<\/code> and red<\/code> for any hexadecimal color if you prefer:<\/p>\n\n\n
How to [highlight]{#FFFF00} text in [Carrd]{#FF0000}\n<\/code><\/span>Code language:<\/span> Markdown<\/span> (<\/span>markdown<\/span>)<\/span><\/small><\/pre>\n\n\n
\n
Wondering what font to use on your website? Check out these sites to find font inspirations<\/a>.<\/p>\n<\/blockquote>\n\n\n\n
How to use different background colors for multiple texts<\/h2>\n\n\n\n
Unfortunately, it doesn’t seem to be possible to highlight multiple texts with different background colors.<\/p>\n\n\n\n
The highlight option only provides two color pickers for all the highlighted texts and as far as I know, there’s no “markdown code” for setting background colors.<\/p>\n\n\n\n
Conclusion<\/h2>\n\n\n\n
Carrd is a powerful website builder despite its simple appearance. It has its limitations but luckily for us little details like highlighting text are still possible in this great builder.<\/p>\n\n\n\n
It’s a no-code tool that with a little bit of code allows us to go way further while keeping a simple user interface.<\/p>\n\n\n\n
You can read more bout Carrd markdown formatting<\/a> if want to know what Carrd is capable of.<\/p>\n\n\n\n
And if you need inspiration, you can’t miss our selection with the best Carrd examples and ideas<\/a>. If you need a bit of inspiration, you’ll find plenty of it by looking at great examples. You’ll get surprised by what you can achieve with Carrd!<\/p>\n\n\n\n
Related Articles<\/h2>\n\n\n\n