# monaco-jsx-syntax-highlight-v2

> Highlight the jsx or tsx syntax for monaco editor

Latest version **1.2.2** (published 2022-11-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install monaco-jsx-syntax-highlight-v2
pnpm add monaco-jsx-syntax-highlight-v2
yarn add monaco-jsx-syntax-highlight-v2
bun add monaco-jsx-syntax-highlight-v2
```

## Health

**Score 40/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.2.2 |
| Published | 2022-11-05 |
| First published | 2022-11-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 98.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 13 |
| Author | x-glorious |
| Maintainers | akshaymdeo |
| Keywords | monaco, jsx, highlight, tsx, monaco-editor, syntax |

## Links

- npm: https://www.npmjs.com/package/monaco-jsx-syntax-highlight-v2
- Repository: https://github.com/x-glorious/monaco-jsx-syntax-highlight
- Homepage: https://github.com/x-glorious/monaco-jsx-syntax-highlight#readme
- Issues: https://github.com/x-glorious/monaco-jsx-syntax-highlight/issues
- npm.io page: https://npm.io/package/monaco-jsx-syntax-highlight-v2

## Alternatives

- [@oh-my-pi/pi-natives](https://npm.io/package/@oh-my-pi/pi-natives.md) — 51.8K weekly downloads
- [@capgo/capacitor-light-sensor](https://npm.io/package/@capgo/capacitor-light-sensor.md) — 3.0K weekly downloads
- [@heyhuynhgiabuu/pi-diff](https://npm.io/package/@heyhuynhgiabuu/pi-diff.md) — 492 weekly downloads
- [@lotsa/verdant-lang-asm](https://npm.io/package/@lotsa/verdant-lang-asm.md) — 38 weekly downloads
- [new-era-syntax](https://npm.io/package/new-era-syntax.md) — 20 weekly downloads

## Recent versions

- 1.2.2 (latest) — 2022-11-05
- 1.2.1 — 2022-11-05
- 1.2.0 — 2022-11-05

## README

# monaco-jsx-syntax-highlight

[![npm version](https://img.shields.io/npm/v/monaco-jsx-syntax-highlight.svg)](https://www.npmjs.com/package/monaco-jsx-highlighter)
[![npm downloads](https://img.shields.io/npm/dm/monaco-jsx-syntax-highlight.svg)](https://www.npmjs.com/package/monaco-jsx-highlighter)

Support monaco **jsx/tsx** syntax highlight

Monaco only support the jsx **syntax checker**

[Live demo](https://codesandbox.io/s/momaco-jsx-tsx-highlight-mp1sby)

## Installing

```shell
$ npm install monaco-jsx-syntax-highlight
```

## Use

The main part of this package is a worker for **analysing jsx syntax**
So we have to way to init the **Controller class**

### Use blob create worker

```tsx
import { MonacoJsxSyntaxHighlight, getWorker } from 'monaco-jsx-syntax-highlight'

const controller = new MonacoJsxSyntaxHighlight(getWorker(), monaco)
```

When using `getWorker` return value as Worker, we can **custom the typescript compile source file url**（for the purpose of **speeding up** load time）

If do not set, the default source is https://cdnjs.cloudflare.com/ajax/libs/typescript/4.6.4/typescript.min.js

```tsx
const controller = new MonacoJsxSyntaxHighlight(getWorker(), monaco, {
    customTypescriptUrl: 'https://xxx/typescript.min.js'
})
```

### Use js worker file

If your browser do not support to use blob worker, you can download the [worker file](https://github.com/x-glorious/monaco-jsx-syntax-highlight/releases) and save it in your project

- web worker has same-origin policy

```tsx
import { MonacoJsxSyntaxHighlight } from 'monaco-jsx-syntax-highlight'

const controller = new MonacoJsxSyntaxHighlight('https://xxxx', monaco)
```

---

### Controller

Remember, when this editor is disposed(`editor.dispose`), we should **invoke the `dispose`** function returned by the highlighterBuilder too

- `highlighter`: send latest content to worker for analysing
- `dispose`: remove event listener of the worker

```tsx
// editor is the result of monaco.editor.create
const { highlighter, dispose } = monacoJsxSyntaxHighlight.highlighterBuilder({
    editor: editor,
})
// init hightlight
highlighter()

editor.onDidChangeModelContent(() => {
  // content change, highlight
  highlighter()
})
```

### Highlight class

Use css class to highlight the jsx syntax

- `'jsx-tag-angle-bracket'`: `<`、`>`、`/>`
- `'jsx-tag-attribute-key'`: the attribute key
- `'jsx-expression-braces'`: the braces of attribute value
- `'jsx-text'`: the text in jsx tag content
- `'jsx-tag-name'`: the tag name of jsx tag
- `'jsx-tag-order-xxx'`: the tag order class

## FAQ

### monaco do not **check** the jsx syntax

You can try below config code

PS: the **file name must end with** `jsx` or `tsx`

```tsx
monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
    jsx: monaco.languages.typescript.JsxEmit.Preserve,
    target: monaco.languages.typescript.ScriptTarget.ES2020,
    esModuleInterop: true
})

const model = monaco.editor.createModel(
  'const test: number = 666',
  'typescript',
  monaco.Uri.parse('index.tsx')
)

editor.current = monaco.editor.create(editorElement.current)
editor.current.setModel(model)
```

---
_Source: https://npm.io/package/monaco-jsx-syntax-highlight-v2 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._