---
title: "Code Highlight"
date: 2024-02-18
author: "nK"
---

# Code Highlight

> This is a part of the **Ghost Kit Pro** plugin.  
> Purchase the Pro plugin to access this and other [advanced features](https://www.ghostkit.io/free-vs-pro/).
> 
> [Purchase Now](https://www.ghostkit.io/pricing/)

The Code Highlight block adds syntax highlighting to the standard `code` block, which makes a sample easier to read and easier to trust. Highlighting is done with Shiki, which uses the same grammars and color themes as a desktop editor, so the colors are the ones the reader already knows. The block also carries a filename title, line numbers and a copy to clipboard button.

```
// Add event listener to copy code to clipboard.
events.on(document, 'click', '.ghostkit-code-clipboard-button', (e) => {
  const $code = e.delegateTarget.closest('.ghostkit-code');

  if ($code) {
    const code = $code.querySelector('code').innerText;
    navigator.clipboard.writeText(code);
  }
});
```



## Block options

- Language
- Display Title
- Display Clipboard Button
- Display Line Numbers
- Wrap Lines

## Themes

There are 14 built-in themes available, light and dark. To choose it, select the block and open the Styles tab in the block settings:

![](https://www.ghostkit.io/wp-content/uploads/2024/02/Shot-2024-02-18-at-13.24.16-1024x876.png)    ## Languages

The list of supported languages is huge and provided by the beautiful library named Shiki. Find the complete list of supported languages here – <https://shiki.style/languages>.

## Quick Transformation

For a quicker insert block with a needed language selected, there are transformations that support all available languages and aliases, presented here – <https://shiki.style/languages>. To use it, follow these steps:

1. On the new line, type this: ````js`
2. Press Enter
3. The new Code Highlight block will be created with selected JavaScript language

## Examples

### With Title

blocks/code/frontend.esm.js



```
// Add event listener to copy code to clipboard.
events.on(document, 'click', '.ghostkit-code-clipboard-button', (e) => {
  const $code = e.delegateTarget.closest('.ghostkit-code');

  if ($code) {
    const code = $code.querySelector('code').innerText;
    navigator.clipboard.writeText(code);
  }
});
```



## With Line Numbers

```
// Add event listener to copy code to clipboard.
events.on(document, 'click', '.ghostkit-code-clipboard-button', (e) => {
  const $code = e.delegateTarget.closest('.ghostkit-code');

  if ($code) {
    const code = $code.querySelector('code').innerText;
    navigator.clipboard.writeText(code);
  }
});
```



## Different Themes

This is a small set of available themes, just for example:

```
// Add event listener to copy code to clipboard.
events.on(document, 'click', '.ghostkit-code-clipboard-button', (e) => {
  const $code = e.delegateTarget.closest('.ghostkit-code');

  if ($code) {
    const code = $code.querySelector('code').innerText;
    navigator.clipboard.writeText(code);
  }
});
```



```
// Add event listener to copy code to clipboard.
events.on(document, 'click', '.ghostkit-code-clipboard-button', (e) => {
  const $code = e.delegateTarget.closest('.ghostkit-code');

  if ($code) {
    const code = $code.querySelector('code').innerText;
    navigator.clipboard.writeText(code);
  }
});
```



```
// Add event listener to copy code to clipboard.
events.on(document, 'click', '.ghostkit-code-clipboard-button', (e) => {
  const $code = e.delegateTarget.closest('.ghostkit-code');

  if ($code) {
    const code = $code.querySelector('code').innerText;
    navigator.clipboard.writeText(code);
  }
});
```



```
// Add event listener to copy code to clipboard.
events.on(document, 'click', '.ghostkit-code-clipboard-button', (e) => {
  const $code = e.delegateTarget.closest('.ghostkit-code');

  if ($code) {
    const code = $code.querySelector('code').innerText;
    navigator.clipboard.writeText(code);
  }
});
```