Custom Highlight Theme not being applied on preview mode

[KingDarBoja]

Do you want to request a feature or report a bug?

Bug Report

Setting a custom theme (atom-one-dark) from @highlightjs doesn't get applied to the code tag element, which disables the custom theme style for the background (I think only the background is affected).

Steps to reproduce

1. Clone my sample-repo
2. npm install
3. npm start
4. Copy and paste some code inside triple backstick (code block) like screenshot below.
5. The background on preview mode is not dark.

Inspect using Chrome dev tools shows the code tag not having the hljs class style on the before screenshot

Before

After

What is the expected behavior?

The code tag should have the hljs class applied by default.

What is the motivation / use case for changing the behavior?

Properly render any custom theme from highlightjs package and not having to rely on workarounds.

Which version of Angular and Material, and which browser and OS does this issue affect?

Using Chrome on Windows 10. This is my first time trying the component.

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 9.1.0
Node: 12.14.0
OS: win32 x64

Angular: 9.1.0
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.0
@angular-devkit/build-angular     0.901.0
@angular-devkit/build-optimizer   0.901.0
@angular-devkit/build-webpack     0.901.0
@angular-devkit/core              9.1.0
@angular-devkit/schematics        9.1.0
@ngtools/webpack                  9.1.0
@schematics/angular               9.1.0
@schematics/update                0.901.0
rxjs                              6.5.4
typescript                        3.8.3
webpack                           4.42.0

Other information

The only workaround is to add this code on the Angular DoCheck hook:

  ngDoCheck() {
    document.querySelectorAll('code').forEach((block) => {
      // will work once when the next line is uncommented
      hljs.highlightBlock(block);
    });
  }

On the sample repo, should be uncommenting the line on app.component.ts

[KingDarBoja]

The workaround is very resource intensive as any complex app will slow down while scrolling due to DoCheck being called several times 😢