En este proyecto vamos a instalar la libreria Ngx-highlightjs en Angular Universal tal y como avanzamos en el video https://www.youtube.com/watch?v=uwiHVmB3qw8
Cómo se ha visto en el video, la instalación básica se puede llevar a cabo con el siguiente cómando:
npm i ngx-highlightjs
Una vez realizada está modificación, si queremos ejecutar una versión no adaptada al SEO de Angular únicamente deveremos aplicar las siguientes modificaciones al fichero app.module.ts:
import { HighlightModule, HIGHLIGHT_OPTIONS } from 'ngx-highlightjs';
@NgModule({
imports: [
HighlightModule
],
providers: [
{
provide: HIGHLIGHT_OPTIONS,
useValue: {
fullLibraryLoader: () => import('highlight.js'),
lineNumbersLoader: () => import('highlightjs-line-numbers.js'), // Optional, only if you want the line numbers
}
}
],
})
export class AppModule { }
Y también modificaremos el fichero angular.json:
"styles": [
"styles.css",
"../node_modules/highlight.js/styles/github.css",
]
En el caso de Angualar Universal la modificación es un poco diferente. La importación la realizaremos mediante una función, en este caso, la he llamado getHighlightLanguages():
import { HighlightModule, HIGHLIGHT_OPTIONS } from 'ngx-highlightjs';
export function getHighlightLanguages() {
return {
useValue: {
coreLibraryLoader: () => import('highlight.js/lib/core'),
lineNumbersLoader: () => import('highlightjs-line-numbers.js'), // Optional, only if you want the line numbers
languages: {
typescript: () => import('highlight.js/lib/languages/typescript'),
css: () => import('highlight.js/lib/languages/css'),
xml: () => import('highlight.js/lib/languages/xml'),
python: () => import('highlight.js/lib/languages/python'),
bash: () => import('highlight.js/lib/languages/bash'),
}
}
};
}
@NgModule({
imports: [
HighlightModule
],
providers: [
{
provide: HIGHLIGHT_OPTIONS,
useValue: getHighlightLanguages()
}
],
})
export class AppModule { }