https://github.com/innocenzi/shiki-processor

Add processing capabilities to Shiki's highlighter
https://github.com/innocenzi/shiki-processor

code code-highlight highlight processor shiki

Last synced: 25 days ago
JSON representation

Add processing capabilities to Shiki's highlighter

• Host: GitHub
• URL: https://github.com/innocenzi/shiki-processor
• Owner: innocenzi
• License: mit
• Created: 2022-10-25T12:09:05.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2023-11-23T23:44:06.000Z (12 months ago)
• Last Synced: 2024-05-01T16:30:59.864Z (6 months ago)
• Topics: code, code-highlight, highlight, processor, shiki
• Language: TypeScript
• Homepage:
• Size: 209 KB
• Stars: 7
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
shiki-processor




  

    

  

   

  

    

  

  


  


  


    Add processing capabilities to Shiki's highlighter

  

  
npm i shiki shiki-processor


 

## Package is no longer maintained

I 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.

- https://twitter.com/antfu7/status/1727781829082595341

- https://github.com/vuejs/vitepress/pull/3237

 

## Usage

`shiki-processor` exports a custom `getHighlighter` that provides the same API as the one exported from `shiki`, except it adds a new `processors` option.

```ts

import { getHighlighter, createFocusProcessor } from 'shiki-processor'

const snippet = /** ... */

const highlighter = await getHighlighter({

  processors: [

    createFocusProcessor(),

  ],

})

highlighter.codeToHtml(snippet, { lang: 'javascript' })

```

Alternatively, for more flexibility, it is possible to use the `process` and `postProcess` functions directly.

```ts

import { getHighlighter } from 'shiki'

import { process, postProcess } from 'shiki-processor'

const theme = 'material-theme-palenight'

const lang = 'javascript'

const snippet = /** ... */

const processors = [

  createFocusProcessor(),

]

const highlighter = await getHighlighter({ theme })

const { code, lineOptions } = process(processors, snippet, lang)

const highlighted = highlighter.codeToHtml(code, {

	lang,

	theme,

	lineOptions,

})

return postProcess(processors, highlighted, lang)

```

 

## Built-in processors

There is currently three processors: `focus`, `diff` and `highlight`. Each one of them adds the possibility of adding a `// [!code ]` annotation to a line in a code snipppet.

When 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.

```ts

// Input

function() {

	console.log('hewwo') // [!code --]

	console.log('hello') // [!code ++]

}

```

```html

 

	

		

		function(){

		  

			console.log('hewwo') 

		

		  

			console.log('hello') 

		

		}

		

	



```


Optionally, a range can be defined by adding a colon and a number of lines: `// [!code focus:3]`.



  


  


  ·

  


  


  Built with ❤︎ by Enzo Innocenzi