# @forter/highlight

> highlight from Forter Components

Latest version **1.3.0** (published 2022-10-03) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @forter/highlight
pnpm add @forter/highlight
yarn add @forter/highlight
bun add @forter/highlight
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.0 |
| Published | 2022-10-03 |
| First published | 2019-12-04 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 84 KB |
| Known vulnerabilities | 0 (+6 in 1 direct dependencies) |
| Install scripts | no |
| Author | Forter Developers |
| Maintainers | forter-npm, lirown, oweingart |
| Keywords | web-components, custom-elements, lit-element, lit-element-2.x |

## Links

- npm: https://www.npmjs.com/package/@forter/highlight
- Repository: https://github.com/forter/web-components
- Homepage: https://github.com/forter/web-components#readme
- Issues: https://github.com/forter/web-components/issues
- npm.io page: https://npm.io/package/@forter/highlight

## Dependencies (2)

- [prismjs](https://npm.io/package/prismjs.md) 1.17.1
- [@forter/core](https://npm.io/package/@forter/core.md) ^2.0.5

## Recent versions

- 1.3.0 (latest) — 2022-10-03
- 1.2.0 — 2021-12-14
- 1.1.0 — 2020-04-28
- 1.0.13 — 2020-04-06
- 1.0.12 — 2020-04-06
- 1.0.11 — 2020-03-09
- 1.0.10 — 2020-02-05
- 1.0.9 — 2020-02-04
- 1.0.8 — 2020-01-10
- 1.0.7 — 2020-01-07
- 1.0.6 — 2019-12-31
- 1.0.5 — 2019-12-12
- 1.0.4 — 2019-12-11
- 1.0.3 — 2019-12-10
- 1.0.2 — 2019-12-04
- … 1 more at https://npm.io/package/@forter/highlight/versions

## README

# fc-highlight

Display themed syntax highlighted code (JSON, HTML, CSS etc)
<!-- Author: Liron Goldenberg <lgoldenberg@forter.com> -->

## Usage

```html
<script>
   import '@forter/highlight';
</script>

<fc-highlight>
   {
     "b": 1,
     "c": null,
     "d": "a",
     "e": true
   }
</fc-highlight>
```

## Examples

```html
<!-- json -->
<fc-highlight>
   {"a": {"b": 1, "c": null, "d": "a", "e": false, "f": true, "h": 0 }}
</fc-highlight>

<!-- html -->
<fc-highlight>
   <div class="hero">
     <div class="hero"></div>
     <div class="hero"></div>
    </div>
</fc-highlight>

<!-- css -->
<fc-highlight>
   .super-class {
     font-size: 15px;
    }
</fc-highlight>

<!-- javascript -->
<fc-highlight>
   import html from 'lit-html
</fc-highlight>

<!-- yaml -->
<fc-highlight>
   includes:
    - goldi
    - ori
</fc-highlight>

<!-- bash -->
<fc-highlight>
   export TEST="123"
</fc-highlight>
```

## Properties

| Property        | Attribute  | Type                                             | Description                            |
|-----------------|------------|--------------------------------------------------|----------------------------------------|
| `codeInnerNode` |            | `any`                                            | inner code element                     |
| `codeNode`      |            | `any`                                            | code element                           |
| `content`       | `content`  | `string`                                         | code language to highlight             |
| `language`      | `language` | `"html" \| "bash" \| "javascript" \| "json" \| "css" \| "yaml"` | language of code language to highlight |

## Slots

| Name | Description                                      |
|------|--------------------------------------------------|
|      | content to highlight. like `{"a": {"b": 1, "c": null, "d": "a", "e": false, "f": true, "h": 0 }}` |

## CSS Custom Properties

| Property                     | Description                                      |
|------------------------------|--------------------------------------------------|
| `--fc-highlight-attr-color`  | attr color. example: `var(--fc-yellow-900)`, default: `var(--fc-orange-900)` |
| `--fc-highlight-null-color`  | null color. example: `var(--fc-yellow-900)`, default: `var(--fc-red-600)` |
| `--fc-highlight-tag-color`   | tag color. example: `var(--fc-yellow-900)`, default: `var(--fc-green-900)` |
| `--fc-highlight-value-color` | value color. example: `var(--fc-yellow-900)`, default: `var(--cyan-9)` |

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