![\"Status\"](\"https://github.com/innocenzi/shiki-processor/actions/workflows/ci.yml/badge.svg\"){kind=icon}
\n \n \n \n ![\"npm\"](\"https://img.shields.io/npm/v/shiki-processor\")
\n \n \n
\n
\n Add processing capabilities to Shiki's highlighter\n
\n\n\n\n \n\n## Usage\n\n`shiki-processor` exports a custom `getHighlighter` that provides the same API as the one exported from `shiki`, except it adds a new `processors` option.\n\n```ts\nimport { getHighlighter, createFocusProcessor } from 'shiki-processor'\n\nconst snippet = /** ... */\nconst highlighter = await getHighlighter({\n processors: [\n createFocusProcessor(),\n ],\n})\n\nhighlighter.codeToHtml(snippet, { lang: 'javascript' })\n```\n\nAlternatively, for more flexibility, it is possible to use the `process` and `postProcess` functions directly.\n\n```ts\nimport { getHighlighter } from 'shiki'\nimport { process, postProcess } from 'shiki-processor'\n\nconst theme = 'material-theme-palenight'\nconst lang = 'javascript'\nconst snippet = /** ... */\nconst processors = [\n createFocusProcessor(),\n]\n\nconst highlighter = await getHighlighter({ theme })\n\nconst { code, lineOptions } = process(processors, snippet, lang)\nconst highlighted = highlighter.codeToHtml(code, {\n\tlang,\n\ttheme,\n\tlineOptions,\n})\n\nreturn postProcess(processors, highlighted, lang)\n```\n\n \n\n## Built-in processors\n\nThere is currently three processors: `focus`, `diff` and `highlight`. Each one of them adds the possibility of adding a `// [!codenpm i shiki shiki-processor
\n\t\n\t\t\n\t\tfunction(){\n\t\t \n\t\t\tconsole.log('hewwo') \n\t\t\n\t\t \n\t\t\tconsole.log('hello') \n\t\t\n\t\t}\n\t\t\n\t\n\n```\n\nOptionally, a range can be defined by adding a colon and a number of lines: `// [!code focus:3]`.\n\n\n\n
\n
\n ·\n
\n
\n Built with ❤︎ by Enzo Innocenzi\n