Dokumentasi lengkap ada disini

Transformers hanya menerapkan kelas dan tidak dilengkapi dengan gaya; Anda dapat memberikan aturan CSS Anda sendiri untuk menatanya dengan benar.

beberapa transform yang ada di shikiji:

transformerNotationDiff

transformer ini seperti yang ada di github/gitlab. kita bisa gunakan [!code ++] dan [!code —]

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

hasilnya

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

transformerNotationHighlight

Gunakan [!code highlight] untuk membuat highlighted line

console.log('Not highlighted')
console.log('Highlighted') // [!code highlight]
console.log('Not highlighted')

hasilnya

console.log('Not highlighted')
console.log('Highlighted') 
console.log('Not highlighted')

menghighlight beberapa baris sekaligus

console.log('Highlighted') // [!code highlight:2]
console.log('Highlighted')
console.log('Not highlighted')

hasilnya

console.log('Highlighted') 
console.log('Highlighted')
console.log('Not highlighted')

transformerNotationWordHighlight

// [!code word:Hello]
const message = 'Hello World'
console.log(message) // prints Hello World

hasilnya

const message = 'Hello World'
console.log(message) // prints Hello World

transformerNotationFocus

console.log('Not focused')
console.log('Focused') // [!code focus]
console.log('Not focused')

hasilnya

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

transformerNotationErrorLevel

console.log('No errors or warnings')
console.error('Error') // [!code error]
console.warn('Warning') // [!code warning]

hasilnya

console.log('No errors or warnings')
console.error('Error') 
console.warn('Warning') 

transformerRenderWhitespace

function block( ) {
  space( )
		tab( )
}

Tambahkan code css berikut ini untuk melihat hasilnya

code .tab,
code .space {
  position: relative;
}

code .tab::before {
  content: '⇥';
  position: absolute;
  opacity: 0.3;
}

code .space::before {
  content: '·';
  position: absolute;
  opacity: 0.3;
}

transformerMetaHighlight

```js {1,3-4}
console.log('1')
console.log('2')
console.log('3')
console.log('4')
```

hasilnya

console.log('1')
console.log('2')
console.log('3')
console.log('4')

transformerMetaWordHighlight

```js /Hello/
const msg = 'Hello World'
console.log(msg)
console.log(msg) // prints Hello World
```

Renders (with custom CSS rules):

const msg = 'Hello World'
console.log(msg) // prints Hello World