@forter/highlight NPM

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