Licence
Apache-2.0
Version
1.3.0
Deps
2
Size
84 kB
Vulns
6
Weekly
0
fc-highlight
Display themed syntax highlighted code (JSON, HTML, CSS etc)
Usage
<script>
import '@forter/highlight';
</script>
<fc-highlight>
{
"b": 1,
"c": null,
"d": "a",
"e": true
}
</fc-highlight>Examples
<!-- 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) |