[Support request] How do I highlight text on a page post?

[Michael]

How do I highlight several words in a paragraph?

I would like to highlight them yellow.

Thanks

[Leo]

Hi Michael,

So you can do this for the HTML content part:
<span class="highlight">some highlighted text</span>

Then add this CSS:

span.highlight {
    background color: #f7f30c; /* Change color accordingly */
}

Using one of these methods:
https://docs.generatepress.com/article/adding-css/

[David]

Hi there,

sorry the orginal CSS in the email had a typo ie. hyphen missing:

span.highlight {
    background-color: #f7f30c; /* Change color accordingly */
}

[Michael]

Still no luck after trying everything you listed.

[David]

Where are you adding the CSS?
I just added it to the head of the page in browser tools and it works.

EDIT: Just noticed you added it to an inline style on the following P tag. Remove it from there and add it to Customizer > Additional CSS

[Michael]

Ok so I wasn’t adding the CSS to the head of the page. How do I do that?

[David]

Just put the CSS;

span.highlight {
    background-color: #f7f30c; /* Change color accordingly */
}

In the Customizer > Additional CSS.

[Michael]

I included his short video showing you what I’m doing. Am I missing something?

https://www.useloom.com/share/2c14ddb26fad4ab38fc8aceb694a5fbe

[David]

OK, remove the blocks that you have created. And:

1. Just add the following markup to your paragraph block:

<span class="highlight">some highlighted text</span>

2. Go to Dashboard > Appearance > Customizer > Additional CSS and paste in:

span.highlight {
    background-color: #f7f30c; /* Change color accordingly */
}

Then whenever you want to highlight some text you just need to wrap the content in the span as per point 1.

[Author]

Posts