Changing tags of _highlightResult from <em> to <strong>

I need to change the wrapping tags over the highlighted text from <em> to <strong> tags.
I read the docs and, i don’t understand it

index.setSettings({
  attributesToHighlight: [
    'content',
    'description'
  ],
  highlightPreTag: '<strong>',
  highlightPostTag: '</strong>'
});

My problem is I have this code and i don’t understand which object in it has a setSettings method available:

 /* users */

 const users = instantsearch({
     appId: 'XXXXXXXXXXXXX',
     apiKey: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
     indexName: 'users',
     searchFunction: function (helper) {
         if (helper.state.query !== '') {
             helper.search();
         }
     }
 });

 /* searchbox users */

 var searchusers = instantsearch.widgets.searchBox({
     container: '#search-input-users'
 });
 users.addWidget(searchusers);


 /* user hits */


 users.addWidget(
     instantsearch.widgets.hits({
         container: '#hits',
         hitsPerPage: 3,
         templates: {
             item: $('#hit-template-users').html(),
             empty: "No hay usuarios llamados <em>\"{{query}}\"</em>"
         }
     })
 );

 users.start();

 $('div#dos input').on('focus', () => {
     var st = $(window).scrollTop();
     if (st > 100) {
         $('div#hits').css('top', st + 150 + 'px');
     }
     $('div#hits').fadeIn();
 });

 var searchIsBlurred = () => $('#hits').fadeOut();
 $(document).click((e) => {
     var children = $('*').within('#hits');
     if ($(e.target).is('div#dos input') || $(e.target).is('div#hits') || $(e.target).is('div.hit') || $(e.target).is(children)) {
         return true;
     }
     searchIsBlurred();
 });

Can someone enlighten me?

Hi!

There’s three ways to change the tags used for highlighting. The one you described using settings will apply for the whole index, however, that can only be called from a backend language using the admin API Key.

You can also send these parameters at query time via the “configure” widget.

However, if you are using InstantSearch, you likely are replacing the highlight tags, this can be done specifically with the highlight helper: https://www.algolia.com/doc/api-reference/widgets/highlight/js/

Hope that helped!

Hi @haroen , thanks for your answer. Unfortunately I don’t seem to understand it. I don’t understand how can I access the highlight helper and i dont understand how and where to implement it in my code, the one i provided at the post.

The code is to be used in the hits widget:

instantsearch.widgets.hits({
  container: '#hits',
  templates: {
    item: '<h2>{{#helpers.highlight}}{ "attribute": "name", "highlightedTagName": "strong" }{{/helpers.highlight}}</h2>',
  },
});