@forter/highlight

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)