# highlight-html-syntax

> Simple Syntax Highlighter for HTML code

Latest version **1.1.0** (published 2020-04-24) · ISC license · 0 weekly downloads

## Install

```sh
npm install highlight-html-syntax
pnpm add highlight-html-syntax
yarn add highlight-html-syntax
bun add highlight-html-syntax
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2020-04-24 |
| First published | 2020-04-24 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 30.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | ajnauleau |
| Maintainers | ajnauleau |
| Keywords | syntax, highlighter, html, code |

## Links

- npm: https://www.npmjs.com/package/highlight-html-syntax
- Repository: https://github.com/ajnauleau/highlight-syntax
- Homepage: https://github.com/ajnauleau/highlight-syntax#readme
- Issues: https://github.com/ajnauleau/highlight-syntax/issues
- npm.io page: https://npm.io/package/highlight-html-syntax

## 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.1.0 (latest) — 2020-04-24
- 1.0.3 — 2020-04-24
- 1.0.2 — 2020-04-24
- 1.0.1 — 2020-04-24
- 1.0.0 — 2020-04-24

## README

# highlight-html-syntax

Install the package from NPM:
```node
$ npm install --save highlight-html-syntax
```


Import the CSS for highlighting:

```css
@import 'node_modules/highlight-html-syntax/syntax.css'
```


Require the Highlight package in your project:

```javascript
var Highlight = require('highlight-html-syntax')
```

Then use it in your code!

```javascript
var html = '<p>hello world!</p>';
var result = Highlight(html);

console.log(result);

/* <span class="method">&lt;p</span>
<span class="method">&gt;</span>
hello world!
<span class="method">&lt;/p</span>
<span class="method">&gt;</span> */
```

<h1> EXAMPLE </h1>

In your frontend:

```javascript
var code = document.getElementById('code').value;
var syntax = Highlight(code);
var result = document.getElementById('result');
result.innerText = syntax;
```

This HTML code

```html
<form>
        <input type="text" placeholder="John Doe"/>
</form>
```

Turns into ->

```code
<span class="method">&lt;form<span class="method">&gt;</span></span> <span class="global">
        <span class="method">&lt;input</span> type=<span class="string">"text"</span> placeholder</span>=<span class="string">"John Doe"</span><span class="method">/&gt;</span>
<span class="method">&lt;/form<span class="method">&gt;</span></span>
```

Which looks like  this

![image](./example.png)

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