How to use the highlight.js.highlightBlock function in highlight

componentUpdated: function componentUpdated(el, binding) {
      // after an update, re-fill the content and then highlight
      const targets = el.querySelectorAll('code');

      for (let i = 0; i < targets.length; i += 1) {
        const target = targets[i];
        if (binding.value) {
          target.textContent = binding.value;
          hljs.highlightBlock(target);
        }
      }
    }
  });

ngAfterViewInit(): void {
        let codeEl = this.elementRef.nativeElement.querySelector('code');
        hljs.highlightBlock(codeEl);
    }

], (require) => {
      let hljs: any = require('highlight.js');
      require('highlight.js/lib/languages/xml');
      require('highlight.js/styles/rainbow.css');
      hljs.highlightBlock(el);
    }, 'hljs');
  }

function highlight () {
  for (let block of ui.markdownBody.querySelectorAll('pre code')) {
    hljs.highlightBlock(block);
  }
}