Saltar al contenido

Primeros pasos

Instalación

Shell
composer require shikiphp/shikiphp

shikiphp requiere PHP 8.2 o posterior con ext-json y ext-mbstring, habilitados en casi todas las compilaciones de PHP. No requiere nada más: ni Node, ni enlace nativo de Oniguruma, ni extensiones adicionales.

Tu primer bloque

La fachada estática Shikiphp es la forma más rápida de empezar. Pasa tu código, el id de un idioma y el id de un tema:

PHP
use Shikiphp\Shikiphp;

$html = Shikiphp::codeToHtml(<<<'PHP'
<?php
function greet(string $name): string {
    return "Hello, {$name}!";
}
PHP, [
    'lang'  => 'php',
    'theme' => 'github-dark',
]);

echo $html;

codeToHtml devuelve un bloque <pre class="shiki …"> completo con estilos propios. Los colores de primer plano y de fondo se escriben en línea en <pre>, así que se muestra correctamente sin hojas de estilo adicionales.

Temas dobles (claro y oscuro)

En lugar de un solo theme, pase un mapa themes. shikiphp genera variables CSS (como Shiki) para que un único bloque renderizado se adapte a los modos claro y oscuro:

PHP
use Shikiphp\Shikiphp;

$code = 'const answer: number = 42';

echo Shikiphp::codeToHtml($code, [
    'lang'   => 'ts',
    'themes' => ['light' => 'github-light', 'dark' => 'github-dark'],
]);

De forma predeterminada, los colores del tema light son los valores en línea y el tema dark se expone mediante variables --shiki-dark. Activa el tema oscuro con un poco de CSS; es el mismo fragmento que documenta Shiki:

CSS
html.dark .shiki,
html.dark .shiki span {
  color: var(--shiki-dark) !important;
  background-color: var(--shiki-dark-bg) !important;
  /* and font styles */
  font-style: var(--shiki-dark-font-style) !important;
  font-weight: var(--shiki-dark-font-weight) !important;
  text-decoration: var(--shiki-dark-text-decoration) !important;
}

Puedes elegir qué tema usar como valor predeterminado en línea con la opción defaultColor, o configurar defaultColor: false para que genere solo variables.

Ids y alias de idiomas

Los idiomas se identifican por su id o alias Shiki: php, ts, js, rust, python, html, etc. Consulta Idiomas para ver cómo listar todo lo incluido y Temas para consultar los ids de temas.

Reutilizar el resaltador

La fachada crea de forma diferida y almacena en caché un Highlighter incluido, así que las llamadas repetidas a Shikiphp::codeToHtml reutilizan las mismas cachés de gramáticas y temas. Si necesitas el API más completo (salida HAST, gramáticas personalizadas, cuadrículas de tokens), obtén directamente la instancia:

PHP
use Shikiphp\Shikiphp;

$code = 'fn main() {}';

$highlighter = Shikiphp::highlighter();
$hast = $highlighter->codeToHast($code, ['lang' => 'rust', 'theme' => 'nord']);

Consulte API para conocer toda la API disponible.