https://github.com/crashmax-dev/json-highlight-api
JSON syntax highlight
https://github.com/crashmax-dev/json-highlight-api
Last synced: 3 months ago
JSON representation
JSON syntax highlight
- Host: GitHub
- URL: https://github.com/crashmax-dev/json-highlight-api
- Owner: crashmax-dev
- Created: 2024-03-18T12:54:54.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-03-29T13:13:03.000Z (about 1 year ago)
- Last Synced: 2025-02-12T14:13:08.343Z (5 months ago)
- Language: TypeScript
- Homepage: https://crashmax-dev.github.io/json-highlight-api/
- Size: 52.7 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# json-highlight-api
> [!WARNING]
> This package use [CSS Custom Highlight API](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API)
## Install
```bash
pnpm add json-highlight-api
```
## Usage
```ts
import { highlightJson, injectHighlight } from 'json-highlight-api'
const { style, destroy } = injectHighlight(/** override colors */)
document.head.append(style)
// remove the style element and css highlights from `CSS.highlights`
// destroy()
const pre = document.createElement('pre')
pre.style.padding = '1rem'
pre.style.overflow = 'auto'
pre.style.color = '#d4d4d4'
pre.style.background = '#1e1e1e'
pre.style.whiteSpace = 'pre-wrap'
pre.textContent = JSON.stringify({ hello: 'world', age: 18 }, null, 2)
const code = document.createElement('code')
code.append(pre)
document.body.append(code)
// highlight pre tag
highlightJson(pre)
```