line-number and styling not being applied for json

[Vijay P]

Using a standalone component with following config

  selector: 'app-dummy',
  templateUrl: './dummy.component.html',
  styleUrls: ['./dummy.component.css'],
  standalone:true,
  providers:[MatSnackBar,
             {
              provide : HIGHLIGHT_OPTIONS,
              useValue : <HighlightOptions>{
                      lineNumbers: true,
                      fullLibraryLoader: () => import('highlight.js'),
                      coreLibraryLoader:() => import('highlight.js/lib/core'),
                      lineNumbersLoader: () => import('highlightjs-line-numbers.js'),
                      themePath: 'node_modules/highlight.js/styles/androidstudio.css',
                      languages: {
                        json: () => import('highlight.js/lib/languages/json'),
                        typescript: () => import('highlight.js/lib/languages/typescript'),
                        css: () => import('highlight.js/lib/languages/css'),
                        xml: () => import('highlight.js/lib/languages/xml'),
                },                        }
             }],
  imports: [CheckboxModule, PrettyJsonPipe, HighlightModule]},
  )

dummy.component.html

                        <pre style="white-space: pre-wrap">
                            <code [highlight]="data | json" [lineNumbers]="true" [languages]='["json"]'></code>
                        </pre>

app.module.ts doesn't have any providers included in it.

packages used:

ngx-highlightjs@6.1.3 (using this because latest version seems to be in conflict with angular 14)
highlight.js@11.7.0
highlightjs-line-numbers.js@2.8.0

OS and Version

Windows 10

Versions

npm--version 8.16.0

The log given by the failure

[HLJS] Highlight.js library was not imported!

Desired functionality

Display styled json with keys & values in different colors.

How to highlight JSON using ngx-highlightjs ?? why line-numbers are showing up

sample:

[Murhaf Sousli]

Please provide a stackblitz reproduction

[Vijay P]

Repo with above mentioned error - https://stackblitz.com/edit/angular-pjv2oh?file=src/main.ts

[Murhaf Sousli]

The console shows you that hljs library was not imported, it seems that in stackblitz environment you used, importing is not supported for some reason.

Here is a fixed stackblitz https://stackblitz.com/edit/angular-y9ekjq?file=src%2Fmain.ts,src%2Fglobal_styles.css

Here is the official stackblitz https://stackblitz.com/edit/ngx-highlightjs