Styling the search results in topics requires to modifications in whtopic.js. This does not affect the highlighting of the search results in the search pane. See Highlighting the search pane for how to style the search results in the search pane.

In the top of whtopic.js is the variable gsHiliteSearchSetting. This variable has three values separated by comma's. The first value controls if highlighting is possible. If the value is enable, highlighting is enabled. Any other value will disable highlighting. When highlighting is enabled, a user can still disable the highlighting by unchecking the box in the search pane.

The second value in gsHiliteSearchSetting is the background colour of the highlighted string. The third variable is the text colour of the hightlighted string.

If you want to style the string further, such as adding borders, you need to modify the function DomTextNode. In this function, find the following lines (299-300):

s_strHlStart = "<font style='color:" + gsTextColor + "; background-color:" + gsBkgndColor + "'>";
s_strHlEnd = "</font>";

To apply any highlight styling, simply add you styling after gsBkgndColor + " on line 299. Be sure to first add a semi-colon after gsBkgndColor + " to separate your styles:

s_strHlStart = "<font style='color:" + gsTextColor + "; font-weight: bold; background-color:" + gsBkgndColor + ";'>";

Alternatively, add a class to the font tag and style the highlighte using your style sheet.

Note: The colours for the text and the highlight are set in the variable gsHiliteSearchSetting, but are stored in the variables gsBkgndColor and gsTextColor. Setting these variables in the top of the file has no effect as the variables are allways filled with the values from gsHiliteSearchSetting. This is done by the function IsHighLightRequired.