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) |