@ngx-docs-markdown-kit/parser-md-code-block-themes

Decenas de paletas de color reales para @ngx-docs-markdown-kit/parser-md-code-block -- generadas a partir de los temas OFICIALES de highlight.js (BSD-3-Clause), no aproximaciones a mano. Opcional: sin este paquete, CodeThemeService sigue funcionando, solo que "Mod" no tiene ningun tema real para elegir (el catalogo queda vacio).

De donde salen los temas

highlight.js (ya es dependencia de parser-md-code-block) trae ~80 temas oficiales en node_modules/highlight.js/styles/*.css, mantenidos por su comunidad -- Nord, Monokai, Atom One Dark, GitHub Dark, Solarized, etc. scripts/generate-code-themes.mjs (del propio paquete fuente, no viaja publicado) los toma, filtra solo propiedades de color reales (lista blanca color/font-style/font-weight/text-decoration -- descarta background/layout, que ya define code-block.scss) de las reglas .hljs*, y las envuelve con el selector que CodeBlockComponent pone en el DOM:

.code-block[data-theme='<id-del-tema>'][data-lang='<lenguaje>'] <selector-original>

El id del tema forma parte del selector (no solo el lenguaje) porque CodeThemeService no descarga el <link> del tema anterior al elegir uno nuevo -- pueden quedar 2+ temas cargados en paralelo, y sin el id compitirían por el mismo bloque. El propio [attr.data-theme] en el componente asegura que solo un tema esté activo a la vez por bloque, así que el selector ya es mutuamente excluyente por construcción.

Un archivo por TEMA (no por lenguaje) -- si el mismo tema esta activo en 2 lenguajes a la vez, se carga un solo <link>. Correr npm run generate:code-themes (o npm run build:parser-md-code-block-themes, que ya lo incluye) regenera assets/*.css + theme-catalog.generated.ts desde cero.

Las 4 paletas hechas a mano que existian antes de esto (csharp-mod.css.bak, etc.) se conservan como *.bak en assets/ -- si algun tema generado no convence, ahi esta el respaldo para volver atras.

Instalacion

1. npm install @ngx-docs-markdown-kit/parser-md-code-block-themes
2. Copia los CSS a donde tu app sirva /code-themes (por default) -- en angular.json, architect.build.options.assets:

{
  "glob": "*.css",
  "input": "node_modules/@ngx-docs-markdown-kit/parser-md-code-block-themes/assets",
  "output": "code-themes"
}

3. Conecta el catalogo en tus providers:

import { provideCodeThemeCatalog } from '@ngx-docs-markdown-kit/parser-md-code-block';
import { THEME_CATALOG } from '@ngx-docs-markdown-kit/parser-md-code-block-themes';

// en tu ApplicationConfig
providers: [provideCodeThemeCatalog(THEME_CATALOG)];

4. Usa SearchableSelectComponent (de @ngx-docs-markdown-kit/ui, no de parser-md-code-block) para dejar que el lector elija, por lenguaje, cualquier tema del catalogo:

<ndmk-searchable-select [items]="themeCatalog" [value]="codeTheme.themeFor('csharp')" (valueChange)="codeTheme.setTheme('csharp', $event)" />

Configuracion (frugocorp_modules/parser-md-code-block-themes/config/code-block-themes-config.service.ts)

visibleLanguages vive como una constante TypeScript en frugocorp_modules/parser-md-code-block-themes/config/code-block-themes-config.service.ts (en la raiz de cualquier sitio generado, export const CODE_BLOCK_THEMES_CONFIG), NO en un JSON de public/ pedido por HTTP en runtime -- mismo criterio que el resto del config del sitio (ver parser-md-seo): todo lo que el SSR necesita debe estar resuelto de forma sincrona desde el primer render. Cambiar el valor requiere editar el archivo y recompilar el sitio.

Claves soportadas:

| Clave | Tipo | Default | Efecto | | --- | --- | --- | --- | | visibleLanguages | string[] \| null | null | null = todos los lenguajes del catalogo son elegibles; un arreglo limita el selector "Mod" a esos lenguajes. |

Si el paquete NO esta instalado, CODE_BLOCK_THEMES_CONFIG/CodeBlockThemesConfigService siguen existiendo en el sitio (son parte de la plantilla, no de este paquete) pero nada los consume -- los bloques NDMK:OPTIONAL[code-block-themes] que los usan quedan fuera del build.

Agregar/personalizar un tema propio

No hace falta tocar el generador para agregar UN tema propio -- basta con:

1. Escribir un CSS con la misma convencion (.code-block[data-theme='tu-id'][data-lang='TU_LENGUAJE'] .hljs-keyword { color: ... }, etc. -- las clases semanticas reales que usa highlight.js/code-block.scss: keyword, type/built_in, string, comment, number, function/title, attr/property, meta).
2. Guardarlo donde sirvas CODE_THEME_BASE_PATH con el nombre <tu-id>.css.
3. Agregar { id: 'tu-id', label: 'Tu Tema' } al catalogo que le pasas a provideCodeThemeCatalog() (puedes combinar THEME_CATALOG con tus propias entradas: provideCodeThemeCatalog([...THEME_CATALOG, { id: 'tu-id', label: 'Tu Tema' }])).

Si quieres partir de un tema REAL existente en vez de escribir uno desde cero, cualquier tema de highlight.js/styles/ (los ~80 que ya trae, o cualquier tema de terceros para highlight.js que encuentres) sirve como base -- solo hay que envolver cada selector con el prefijo .code-block[data-theme='tu-id'][data-lang='...']. El mismo scripts/generate-code-themes.mjs de este paquete es reusable para esto: apuntalo a otra carpeta de temas fuente si quieres regenerar con un set distinto.

parser-md-code-block-themes

Dependencias:

• @angular/animations: ^22.1.0
• @angular/cdk: ^22.1.0
• @angular/common: ^22.1.0
• @angular/compiler: ^22.1.0
• @angular/core: ^22.1.0
• @angular/forms: ^22.1.0
• @angular/material: ^22.1.0
• @angular/platform-browser: ^22.1.0
• @angular/platform-server: ^22.1.0
• @angular/router: ^22.1.0
• @angular/ssr: ^22.1.3
• @ngx-docs-markdown-kit/parser-md: file:./vendor/parser-md/ngx-docs-markdown-kit-parser-md-0.1.0.tgz
• @ngx-docs-markdown-kit/parser-md-seo: file:./vendor/parser-md-seo/ngx-docs-markdown-kit-parser-md-seo-0.1.0.tgz
• @ngx-docs-markdown-kit/parser-md-code-block: file:./vendor/parser-md-code-block/ngx-docs-markdown-kit-parser-md-code-block-0.1.0.tgz
• @ngx-docs-markdown-kit/parser-md-code-block-themes: file:./vendor/parser-md-code-block-themes/ngx-docs-markdown-kit-parser-md-code-block-themes-0.1.0.tgz
• @ngx-docs-markdown-kit/parser-md-image: file:./vendor/parser-md-image/ngx-docs-markdown-kit-parser-md-image-0.1.0.tgz
• @ngx-docs-markdown-kit/parser-md-card: file:./vendor/parser-md-card/ngx-docs-markdown-kit-parser-md-card-0.1.0.tgz
• @ngx-docs-markdown-kit/parser-md-converter: file:./vendor/parser-md-converter/ngx-docs-markdown-kit-parser-md-converter-0.1.0.tgz
• @ngx-docs-markdown-kit/ui: file:./vendor/ui/ngx-docs-markdown-kit-ui-0.1.0.tgz
• rxjs: ~7.8.0
• tslib: ^2.3.0

Apartados de parser-md-code-block-themes

• Docs -- Documentación de @ngx-docs-markdown-kit/parser-md-code-block-themes -- paletas de color reales para bloques de código.
• Parser MD Code Block Themes -- ~80 paletas de color reales para parser-md-code-block, generadas desde highlight.js.

Docs de parser-md-code-block-themes

REGRESAR A APARTADOS DE parser-md-code-block-themes

Índice Docs de parser-md-code-block-themes

• Primeros pasos -- Instalación paso a paso -- assets, catálogo, selector.
  • Instalación -- Copiar los CSS a assets, conectar el catálogo, dejar elegir al lector.
• Uso -- De dónde salen los 80 temas, el config de lenguajes visibles, y cómo agregar uno propio.
  • El catálogo de temas -- CODE_BLOCK_THEMES_CONFIG.visibleLanguages -- limitar el selector "Mod" a ciertos lenguajes.
  • Temas propios -- Agregar o personalizar un tema sin tocar el generador.
  • De dónde salen los temas -- El pipeline que genera los 80 temas reales desde highlight.js, paso a paso, y por qué está diseñado así.
• Ecosistema -- Relación de @ngx-docs-markdown-kit/parser-md-code-block-themes con el resto del kit -- de qué depende y quién más lo usa.
  • Relación con el ecosistema -- Peer dependency real de parser-md-code-block, no al revés -- y quién más consume este catálogo.

Primeros pasos de parser-md-code-block-themes

< Índice Docs de parser-md-code-block-themes

Instalación de parser-md-code-block-themes

< Primeros pasos de parser-md-code-block-themes

npm install @ngx-docs-markdown-kit/parser-md-code-block-themes

1. Copiar los CSS a un asset público

En angular.json, architect.build.options.assets:

{
  "glob": "*.css",
  "input": "node_modules/@ngx-docs-markdown-kit/parser-md-code-block-themes/assets",
  "output": "code-themes"
}

code-themes es el path por default que espera CODE_THEME_BASE_PATH (de parser-md-code-block).

2. Conectar el catálogo

import { provideCodeThemeCatalog } from '@ngx-docs-markdown-kit/parser-md-code-block';
import { THEME_CATALOG } from '@ngx-docs-markdown-kit/parser-md-code-block-themes';

// en tu ApplicationConfig
providers: [provideCodeThemeCatalog(THEME_CATALOG)];

3. Dejar elegir al lector

Con SearchableSelectComponent (de @ngx-docs-markdown-kit/ui):

<ndmk-searchable-select
  [items]="themeCatalog"
  [value]="codeTheme.themeFor('csharp')"
  (valueChange)="codeTheme.setTheme('csharp', $event)"
/>

Ver El catálogo de temas para el config de qué lenguajes son elegibles, y Temas propios para agregar/personalizar uno sin tocar el generador.

Uso de parser-md-code-block-themes

< Índice Docs de parser-md-code-block-themes

El catálogo de temas de parser-md-code-block-themes

< Uso de parser-md-code-block-themes

"Mod" es el selector de tema por lenguaje que parser-md-code-block ya trae (engrane del sitio + resumen "Temas de código" en la barra 3) -- lo que este paquete aporta es el CATÁLOGO real de temas que ese selector ofrece (ver De dónde salen los temas).

visibleLanguages vive como una constante TypeScript en frugocorp_modules/parser-md-code-block-themes/config/code-block-themes-config.service.ts (en la raíz de cualquier sitio generado, export const CODE_BLOCK_THEMES_CONFIG), NO en un JSON de public/ pedido por HTTP en runtime -- mismo criterio que el resto del config del sitio (ver parser-md-seo): todo lo que el SSR necesita debe estar resuelto de forma síncrona desde el primer render. Cambiar el valor requiere editar el archivo y recompilar el sitio.

| Clave | Tipo | Default | Efecto | | --- | --- | --- | --- | | visibleLanguages | string[] \| null | null | null = todos los lenguajes del catálogo son elegibles; un arreglo limita el selector "Mod" a esos lenguajes. |

Si el paquete NO está instalado, CODE_BLOCK_THEMES_CONFIG/CodeBlockThemesConfigService siguen existiendo en el sitio (son parte de la plantilla de create-ngx-docs-site, no de este paquete) pero nada los consume -- los bloques NDMK:OPTIONAL[code-block-themes] que los usan quedan fuera del build.

Ver De dónde salen los temas para el pipeline completo que genera los 80 temas del catálogo, y Temas propios para agregar uno sin tocar el generador.

Temas propios de parser-md-code-block-themes

< Uso de parser-md-code-block-themes

No hace falta tocar el generador (scripts/generate-code-themes.mjs) para agregar UN tema propio -- basta con:

1. Escribir un CSS con la misma convención que usan los 80 temas generados: .code-block[data-theme='tu-id'][data-lang='TU_LENGUAJE'] .hljs-keyword { color: ... }, etc. -- las clases semánticas reales de highlight.js que usa code-block.scss: keyword, type/built_in, string, comment, number, function/title, attr/property, meta. El id del tema (data-theme) va SIEMPRE en el selector, no solo el lenguaje -- ver De dónde salen los temas para por qué.
2. Guardarlo donde sirvas CODE_THEME_BASE_PATH con el nombre <tu-id>.css.
3. Agregar { id: 'tu-id', label: 'Tu Tema' } al catálogo que le pasás a provideCodeThemeCatalog() -- podés combinar THEME_CATALOG con tus propias entradas:

provideCodeThemeCatalog([...THEME_CATALOG, { id: 'tu-id', label: 'Tu Tema' }]);

Si querés partir de un tema REAL existente en vez de escribir uno desde cero, cualquier tema de highlight.js/styles/ (los ~80 que ya trae, o cualquier tema de terceros para highlight.js que encuentres) sirve como base -- solo hay que envolver cada selector con el prefijo .code-block[data-theme='tu-id'][data-lang='...']. El mismo scripts/generate-code-themes.mjs del monorepo es reusable para esto: apuntalo a otra carpeta de temas fuente si querés regenerar con un set distinto de temas.

De dónde salen los temas de parser-md-code-block-themes

< Uso de parser-md-code-block-themes

Este paquete es 100% DATOS: no define ningún componente ni servicio propio, public-api.ts exporta una sola cosa (THEME_CATALOG). Todo lo demás -- los 80 archivos assets/*.css y theme-catalog.generated.ts -- lo produce scripts/generate-code-themes.mjs, un script del propio paquete fuente (no viaja en el paquete publicado).

Es completamente opcional: sin este paquete instalado, CodeThemeService (de @ngx-docs-markdown-kit/parser-md-code-block) sigue funcionando igual, solo que el selector "Mod" no tiene ningún tema real para elegir -- el catálogo queda vacío.

El selector CSS real

Cada regla generada usa este selector -- el id del tema forma parte del selector, no solo el lenguaje:

.code-block[data-theme='<id-del-tema>'][data-lang='<lenguaje>'] <selector-original>

Por qué el id del tema tiene que estar ahí: CodeThemeService no descarga el <link> del tema anterior al elegir uno nuevo, así que pueden quedar 2 o más hojas de estilo de temas cargadas en paralelo en la misma página. Sin el data-theme en el selector, esos temas competirían por el mismo bloque de código. El propio [attr.data-theme] que CodeBlockComponent pone en el DOM asegura que un <section> dado solo tenga un tema activo a la vez, así que el selector ya es mutuamente excluyente por construcción -- no hace falta ningún otro mecanismo de prioridad CSS.

El pipeline de generación (projects/parser-md-code-block-themes/scripts/generate-code-themes.mjs)

highlight.js ya es una dependencia real de parser-md-code-block -- este script reutiliza los ~80 temas oficiales que trae en node_modules/highlight.js/styles/*.css (Nord, Monokai, Atom One Dark, GitHub Dark, Solarized, y el resto), mantenidos por la comunidad de highlight.js, en vez de aproximaciones de color hechas a mano.

1. Lenguajes desde la fuente real: importa DEFAULT_CODE_BLOCK_LANGUAGES directo desde projects/parser-md-code-block/src/lib/code-block-languages.ts -- un .ts de otro paquete, sin pasar por ningún build previo (Node 24+ soporta type-stripping nativo). Así, si alguien agrega un lenguaje ahí y se olvida de este generador, el lenguaje nuevo no queda con el tema "Mod" silenciosamente vacío -- la lista sale de la misma fuente. Hoy son 8: csharp, bash, powershell, json, typescript, javascript, css, scss.
2. Lee cada CSS de highlight.js/styles/ y le quita comentarios y bloques @media/@supports completos (algunos temas traen fallbacks de alto contraste que no aplican acá).
3. Parsea reglas planas (el CSS de highlight.js no anida selectores) y se queda SOLO con las que empiezan en .hljs -- descarta las secciones "per-language" propias del propio mecanismo de detección de lenguaje de highlight.js (.language-x .hljs-y), que no es compatible con nuestro data-lang.
4. Filtra también por propiedad: de cada regla .hljs* sobreviviente, solo conserva declaraciones de una lista blanca (color, font-style, font-weight, text-decoration) -- descarta explícitamente background, padding, display, overflow, margin. Este segundo filtro es necesario porque filtrar solo por selector no alcanza: la regla base .hljs { ... } de casi todo tema mezcla color real con layout/fondo, y code-block.scss ya define los suyos propios. Una regla que después de este filtro se queda sin ninguna declaración se descarta por completo.
5. Envuelve cada regla sobreviviente para CADA uno de los 8 lenguajes, con el selector .code-block[data-theme='<id>'][data-lang='<lang>'] <selector-original>. El resultado es un archivo por TEMA, no por lenguaje -- si el mismo tema está activo en 2 lenguajes a la vez en la misma página, se carga un solo <link> (CodeThemeService deduplica por nombre de tema).
6. Escribe assets/<id>.css (80 archivos) y regenera theme-catalog.generated.ts completo -- un array {id, label}[] ordenado alfabéticamente por label. theme-catalog.ts solo reexporta ese array generado como THEME_CATALOG, el único símbolo público del paquete.

Las 4 paletas hechas a mano que existían antes de este generador (bash-mod.css.bak, csharp-mod.css.bak, json-mod.css.bak, powershell-mod.css.bak) se conservan en assets/ como respaldo, sin extensión .css activa -- si algún tema generado no convence, ahí está la versión anterior para volver atrás.

Para regenerar: npm run generate:code-themes (o npm run build:parser-md-code-block-themes, que ya lo corre antes de compilar el paquete y de validar que assets/ tenga contenido real).

Ver también El catálogo de temas para el config de qué lenguajes son elegibles en el sitio, y Temas propios para agregar uno sin tocar este generador.

Ecosistema de parser-md-code-block-themes

< Índice Docs de parser-md-code-block-themes

Relación con el ecosistema de parser-md-code-block-themes

< Ecosistema de parser-md-code-block-themes

@ngx-docs-markdown-kit/parser-md-code-block-themes es un paquete de DATOS: un catálogo de 80 temas de color generados, sin ningún componente ni servicio propio (public-api.ts exporta una sola cosa, THEME_CATALOG). No hace nada por sí solo -- necesita otro paquete que lo consuma.

De quién depende

Es peer dependency real de @ngx-docs-markdown-kit/parser-md-code-block (^0.0.1, declarado en package.json) -- depende de ESA librería, no al revés. parser-md-code-block define CodeThemeService, CodeBlockComponent (que pone el [attr.data-theme]/[attr.data-lang] en el DOM) y provideCodeThemeCatalog(); este paquete solo le da contenido real a ese catálogo. Instalar parser-md-code-block-themes sin parser-md-code-block no tiene efecto: no hay ningún servicio que lea THEME_CATALOG.

También depende, indirectamente, del selector de lenguajes de parser-md-code-block (DEFAULT_CODE_BLOCK_LANGUAGES en code-block-languages.ts) -- el generador (scripts/generate-code-themes.mjs, en la raíz del monorepo fuente, no en el paquete publicado) lo importa directo para saber para cuáles lenguajes envolver cada tema. Ver De dónde salen los temas para el detalle completo del pipeline.

Quién lo usa hoy

• create-ngx-docs-site (el CLI) lo trae en la plantilla de cualquier sitio nuevo que active el bloque opcional NDMK:OPTIONAL[code-block-themes]: copia los 80 assets/*.css como asset público, conecta THEME_CATALOG con provideCodeThemeCatalog(), y arma el selector visual de "Mod" por lenguaje.
• Cualquier consumidor directo de parser-md-code-block que quiera dejar elegir tema al lector, fuera del ecosistema de sitios generados por el CLI.

El selector visual no vive acá

Para que el lector elija un tema, create-ngx-docs-site usa SearchableSelectComponent -- pero esa pieza vive en @ngx-docs-markdown-kit/ui, una librería de componentes de Angular genéricos, separada tanto de parser-md-code-block-themes como de parser-md-code-block. Es un error común asumir que viene con parser-md-code-block (donde vivió antes) o con este paquete -- no es así: ui no aparece en las peerDependencies de parser-md-code-block-themes, es una dependencia aparte que instala el sitio consumidor. El motivo del traslado: instalar parser-md-code-block-themes para tener el catálogo de temas no debería arrastrar ningún componente de selector, y viceversa, usar SearchableSelectComponent para cualquier otro catálogo (no de temas) no debería arrastrar highlight.js ni el resto de la infraestructura de resaltado de sintaxis. Ver SearchableSelectComponent para el componente en sí.

Resumen de dependencias

| Paquete | Relación | | --- | --- | | parser-md-code-block | Peer dependency real -- este paquete le da contenido a su catálogo de temas. | | ui | NO es dependencia de este paquete -- la instala el sitio consumidor para el selector visual (SearchableSelectComponent). | | create-ngx-docs-site | Consumidor final -- conecta este catálogo con parser-md-code-block y ui en la plantilla del sitio. |

Parser MD Code Block Themes de parser-md-code-block-themes

REGRESAR A APARTADOS DE parser-md-code-block-themes

GitHub | Sitio | FrugoCorp

parser-md-code-block-themes agrega decenas de paletas de color reales (Nord, Monokai, Atom One Dark, GitHub Dark, y ~80 mas) a parser-md-code-block. Es 100% opcional -- solo se activa si esta instalado, el bloque de codigo funciona igual de bien sin el.

Por que colores reales y no aproximados

Las paletas se generan desde los temas OFICIALES de highlight.js (scripts/generate-code-themes.mjs dentro de este mismo paquete), no de aproximaciones a mano -- misma fuente que usan miles de sitios reales, mantenida por la comunidad de highlight.js en vez de por este repo.

Que trae de base

Un tema por archivo CSS (no por lenguaje), con el id del tema codificado en el selector para que 2 temas cargados en paralelo nunca compitan por el mismo bloque. CodeThemeService elige el tema en runtime sin recargar la pagina.