https://github.com/mishushakov/pre-highlighted

Custom element that extends <pre> with syntax highlighting
https://github.com/mishushakov/pre-highlighted

component custom-elements highlight syntax-highlighting webcomponents

Last synced: about 2 months ago
JSON representation

Custom element that extends <pre> with syntax highlighting

• Host: GitHub
• URL: https://github.com/mishushakov/pre-highlighted
• Owner: mishushakov
• License: mit
• Archived: true
• Created: 2021-12-08T12:35:34.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2021-12-08T12:43:24.000Z (almost 3 years ago)
• Last Synced: 2024-09-26T17:23:28.456Z (about 2 months ago)
• Topics: component, custom-elements, highlight, syntax-highlighting, webcomponents
• Language: JavaScript
• Homepage:
• Size: 4.88 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# pre-highlighted

HTML5 custom element that extends `
` element with syntax highlighting using ShikiJS


https://user-images.githubusercontent.com/10400064/145210244-e19c9299-2b8e-422f-8d2c-3e0bca9a00f0.mov

## Installation

1. Load Shiki into DOM

```html

```

2. Load the custom element

```html

```

Using npm

```sh

npm i pre-highlighted

```

## Usage

```html

  .red {

    background: red;

  }

```

Or alternatively:

```html


  .red {

    background: red;

  }



```


### Attributes

- `lang`, programming language

- `theme`, theme, consult [Shiki docs](https://github.com/shikijs/shiki/blob/main/docs/themes.md) for more