The FluidTopicsHighlightHtmlService.highlightHtml() method allows designers to highlight a word.
For example:
HTML:
<div id="container">Lorem ipsum dolor sit amet.</div>
CSS:
.highlight-html-match {
border: 1px solid red;
}
JavaScript:
FluidTopicsHighlightHtmlService.highlightHtml(
document.querySelector('#container'),
"ipsum", {
className: 'highlight-html-match',
attributes: {
'foo': 'bar'
}
}
);
In this situation, Fluid Topics highlights the word ipsum, found in the <div> element of container ID. If the query is empty, Fluid Topics removes all markings in the container.
Fluid Topics places the className on every highlighted word. If the className property is not set, it defaults to highlight-html-match.
It is possible to give highlighted HTML elements attributes.
When designing a Custom component for the Search results page, it is possible to highlight the current search query. See Request variable.