Shiki Code Block

Oct 24, 2025 ・ guide

Using Shiki Transformers to enhance code blocks with diff, highlight, and indent features, with custom CSS rules due to transformers only applies classes and does not come with styles.

See Shiki Transformers for more details.

And there is a custom transformer transformerWrapper to wrap code blocks with provides copy button and language label.

diff

ts
console.log('hewwo')
console.log('hello')
console.log('goodbye')

highlight

ts
console.log('Not highlighted')
console.log('Highlighted')
console.log('Not highlighted')
ts
console.log('Highlighted')
console.log('Highlighted')
console.log('Not highlighted')
ts
console.log('Not highlighted')
console.log('Highlighted')
console.log('Not highlighted')
ts
const message = 'Hello World'
console.log(message) // prints Hello World
ts
console.log('No errors or warnings')
console.error('Error')
console.warn('Warning')
js
console.log('1')
console.log('2')
console.log('3')
console.log('4')
js
const msg = 'Hello World'
console.log(msg)
console.log(msg) // prints Hello World

focus

ts
console.log('Not focused');
console.log('Focused')
console.log('Not focused');

indent

js
function func() {
  console.log(1);

  for (const i of []) {
    console.log(2);
  }
}