{"id":16497906,"url":"https://github.com/innocenzi/shiki-processor","last_synced_at":"2025-10-28T00:30:27.061Z","repository":{"id":62036694,"uuid":"557283508","full_name":"innocenzi/shiki-processor","owner":"innocenzi","description":"Add processing capabilities to Shiki's highlighter","archived":false,"fork":false,"pushed_at":"2023-11-23T23:44:06.000Z","size":214,"stargazers_count":7,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-05-01T16:30:59.864Z","etag":null,"topics":["code","code-highlight","highlight","processor","shiki"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/innocenzi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["innocenzi"]}},"created_at":"2022-10-25T12:09:05.000Z","updated_at":"2024-06-19T01:46:35.645Z","dependencies_parsed_at":"2024-06-19T01:46:33.042Z","dependency_job_id":"8f3fb106-8ad1-41b8-b764-ba501dd8096b","html_url":"https://github.com/innocenzi/shiki-processor","commit_stats":{"total_commits":28,"total_committers":2,"mean_commits":14.0,"dds":0.1071428571428571,"last_synced_commit":"109b4e86f6d3c98a4f98106393cbbf6b86298899"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/innocenzi%2Fshiki-processor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/innocenzi%2Fshiki-processor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/innocenzi%2Fshiki-processor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/innocenzi%2Fshiki-processor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/innocenzi","download_url":"https://codeload.github.com/innocenzi/shiki-processor/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238574663,"owners_count":19494723,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["code","code-highlight","highlight","processor","shiki"],"created_at":"2024-10-11T14:46:04.913Z","updated_at":"2025-10-28T00:30:26.695Z","avatar_url":"https://github.com/innocenzi.png","language":"TypeScript","funding_links":["https://github.com/sponsors/innocenzi"],"categories":[],"sub_categories":[],"readme":"\u003ch2 align=\"center\"\u003eshiki-processor\u003c/h2\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/innocenzi/shiki-processor/actions?query=workflow%3Aci\"\u003e\n    \u003cimg alt=\"Status\" src=\"https://github.com/innocenzi/shiki-processor/actions/workflows/ci.yml/badge.svg\"\u003e\n  \u003c/a\u003e\n  \u003cspan\u003e\u0026nbsp;\u003c/span\u003e\n  \u003ca href=\"https://www.npmjs.com/package/shiki-processor\"\u003e\n    \u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/v/shiki-processor\"\u003e\n  \u003c/a\u003e\n  \u003cbr /\u003e\n  \u003cbr /\u003e\n  \u003cp align=\"center\"\u003e\n    Add processing capabilities to Shiki's highlighter\n  \u003c/p\u003e\n  \u003cpre\u003e\u003cdiv align=\"center\"\u003enpm i shiki shiki-processor\u003c/div\u003e\u003c/pre\u003e\n\u003c/p\u003e\n\n\u0026nbsp;\n\n## Package is no longer maintained\n\nI suggest migrating to [`shikiji`](https://github.com/antfu/shikiji) and its dedicated [`shikiji-transformers`](https://github.com/antfu/shikiji/tree/main/packages/shikiji-transformers) package, that's a port of this one.\n- https://twitter.com/antfu7/status/1727781829082595341\n- https://github.com/vuejs/vitepress/pull/3237\n\n\n\u0026nbsp;\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\u0026nbsp;\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 `// [!code \u003ctag\u003e]` annotation to a line in a code snipppet.\n\nWhen this annotation is found, it is removed and a class corresponding to the processor is added to the line. The complete code block is also added a class.\n\n```ts\n// Input\nfunction() {\n\tconsole.log('hewwo') // [!code --]\n\tconsole.log('hello') // [!code ++]\n}\n```\n```html\n\u003c!-- Output (stripped of `style` attributes for clarity) --\u003e\n\u003cpre class=\"shiki has-diff\"\u003e \u003c!-- Notice `has-diff` --\u003e\n\t\u003ccode\u003e\n\t\t\u003cspan class=\"line\"\u003e\u003c/span\u003e\n\t\t\u003cspan class=\"line\"\u003e\u003cspan\u003efunction\u003c/span\u003e\u003cspan\u003e()\u003c/span\u003e\u003cspan\u003e\u003c/span\u003e\u003cspan\u003e{\u003c/span\u003e\u003c/span\u003e\n\t\t\u003cspan class=\"line diff remove\"\u003e  \u003c!-- Notice `diff` and `remove` --\u003e\n\t\t\t\u003cspan\u003e\u003c/span\u003e\u003cspan\u003econsole\u003c/span\u003e\u003cspan\u003e.\u003c/span\u003e\u003cspan\u003elog\u003c/span\u003e\u003cspan\u003e(\u003c/span\u003e\u003cspan\u003e\u0026#39;\u003c/span\u003e\u003cspan\u003ehewwo\u003c/span\u003e\u003cspan\u003e\u0026#39;\u003c/span\u003e\u003cspan\u003e) \u003c/span\u003e\n\t\t\u003c/span\u003e\n\t\t\u003cspan class=\"line diff add\"\u003e  \u003c!-- Notice `diff` and `add` --\u003e\n\t\t\t\u003cspan\u003e\u003c/span\u003e\u003cspan\u003econsole\u003c/span\u003e\u003cspan\u003e.\u003c/span\u003e\u003cspan\u003elog\u003c/span\u003e\u003cspan\u003e(\u003c/span\u003e\u003cspan\u003e\u0026#39;\u003c/span\u003e\u003cspan\u003ehello\u003c/span\u003e\u003cspan\u003e\u0026#39;\u003c/span\u003e\u003cspan\u003e) \u003c/span\u003e\n\t\t\u003c/span\u003e\n\t\t\u003cspan class=\"line\"\u003e\u003cspan\u003e\u003c/span\u003e\u003cspan\u003e}\u003c/span\u003e\u003c/span\u003e\n\t\t\u003cspan class=\"line\"\u003e\u003cspan\u003e\u003c/span\u003e\u003c/span\u003e\n\t\u003c/code\u003e\n\u003c/pre\u003e\n```\n\nOptionally, a range can be defined by adding a colon and a number of lines: `// [!code focus:3]`.\n\n\n\u003cp align=\"center\"\u003e\n  \u003cbr /\u003e\n  \u003cbr /\u003e\n  ·\n  \u003cbr /\u003e\n  \u003cbr /\u003e\n  \u003csub\u003eBuilt with ❤︎ by \u003ca href=\"https://twitter.com/enzoinnocenzi\"\u003eEnzo Innocenzi\u003c/a\u003e\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finnocenzi%2Fshiki-processor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Finnocenzi%2Fshiki-processor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finnocenzi%2Fshiki-processor/lists"}