npm package: @forter/code-block
Description: code-block from Forter Components
Author: Forter Developers
Latest version: 1.6.0

# fc-code-block

Display themed syntax highlighted code in code block (JSON, HTML, CSS etc)
Extension of highlight component by Liron Goldenberg
<!-- Author: Marissa Traina <marissa.traina@forter.com> -->\

## Usage

```html
<script>
   import '@forter/code-block';
</script>

<fc-code-block>
    { "message": "hello world" }
</fc-code-block>
```

## Examples

```html
<!-- title -->
<fc-code-block>
    <div slot="title">
      <div style="display: flex;justify-content: space-between;align-items: center;">
        <h3 style="font-weight: 600; margin: 0;">code title</h3>
        <span style="color: #31e031">some text</span>
      </div>
    </div>
   {"a": "some code"}
</fc-code-block>

<!-- json -->
<fc-code-block title="JSON Example">
   {"string": "value", "null": null, "boolean": true, "number": 1, "array": [], "object": {} }
</fc-code-block>


<!-- javascript -->
<fc-code-block title="ftr:tokenReady">
   document.addEventListener('ftr:tokenReady', function(evt) {
     var token = evt.detail;
     // Retrieve the token sent to your back-end
     export default function handler(req, res) {
         res.status(200).json({ name: 'John Doe' })
     }
   });
</fc-code-block>


<!-- bash -->
<fc-code-block title="BASH Example">
   #!/bin/bash

   echo "Enter your lucky number"
   read n
   case $n in
   101)
   echo echo "You got 1st prize" ;;
   510)
   echo "You got 2nd prize" ;;
   999)
   echo "You got 3rd prize" ;;
   *)
   echo "Sorry, try for the next time" ;;
   esac
</fc-code-block>

<!-- yaml -->
<fc-code-block title="YAML Example">
   items:
     - things:
         thing1: huey
         things2: dewey
         thing3: louie
     - other things:
         key: value
</fc-code-block>

<!-- css -->
<fc-code-block title="CSS Example">
   code, pre {
     color: var(--fc-code-block-text-color, white);
     font-family: "Fira Mono", monospace;
     font-size: 14px;
     overflow: auto;
   }
</fc-code-block>

<!-- line error -->
<fc-code-block title="Errors example" linenumbers .errors=${[2,4]}>
   {"string": "value", "null": null, "boolean": true, "number": 1, "array": [], "object": {} }
</fc-code-block>

<!-- html -->
<fc-code-block title="HTML Example">
    <div id="example">
      <a href="https://fonts.google.com/specimen/Fira+Mono">Fira Mono</a>
      <span class="hello">
        <p>Hello World</p>
      </span>
    </div>
</fc-code-block>

<!-- foldable -->
<fc-code-block language="json" linenumbers .errors="${[7,10,14]}">
    <div slot="title">fold example</div>
      {
        "name": "Daniel",
        "address": {
          "city": "TLV",
          "street": "Begin"
        },
        "age": 12,
        "profile": {
          "image": {
            "url": "https:url.uk",
            "alt": "profile image"
          }
        },
        "test": false
      }
</fc-code-block>

<!-- pathsflag -->
<fc-code-block language="json" linenumbers .pathsflag="${['name', 'address.street', 'list.id', 'list.PropertyC.PropertyD']}">
    <div slot="title">pathsflag example</div>
      {
        "name": "Daniel",
        "address": {
          "city": "TLV",
          "street": "Begin"
        },
        "age": 12,
        "profile": {
          "image": {
            "url": "https:url.uk",
            "alt": "profile image"
          }
        },
        "list": [
          {
            "id": 1,
            "name": "Test Item 1",
            "description": "Test",
            "type": "type1",
            "PropertyA": [
             {  "PropertyB": "B" }
            ]
          },
          {
            "id": 2,
            "name": "Test Item 2",
            "description": "Test",
            "type": "type2",
            "PropertyC": [
              {
                "PropertyD": "D"
              }
            ]
          }
        ],
        "test": false
      }
</fc-code-block>

<!-- theme -->
<fc-code-block language="json" theme="light" linenumbers .pathsflag="${['name', 'address.street']}">
    <div slot="title">light theme example</div>
      {
        "name": "Daniel",
        "address": {
          "city": "TLV",
          "street": "Begin"
        },
        "age": 12,
        "profile": {
          "image": {
            "url": "https:url.uk",
            "alt": "profile image"
          }
        },
        "test": false
      }
</fc-code-block>

<!-- overridecopy -->
<fc-code-block language="bash" overridecopy="export secret_key=12345678">
    <div slot="title">override copy example</div>
      export secret_key=*********
</fc-code-block>

```

## Properties

| Property                   | Attribute      | Type                                             | Default | Description                                      |
|----------------------------|----------------|--------------------------------------------------|---------|--------------------------------------------------|
| `codeNode`                 |                | `any`                                            |         | code element                                     |
| `content`                  | `content`      | `string`                                         |         | code language to highlight                       |
| `errors`                   | `errors`       | `any[]`                                          |         | Array of numbers in ascending order, representing lines with errors |
| `errorsContainerNode`      |                | `any`                                            |         | errors container element                         |
| `fold`                     | `fold`         | `boolean`                                        | false   | boolean value for displaying folded code content |
| `language`                 | `language`     | `"html" \| "bash" \| "javascript" \| "json" \| "css" \| "yaml"` |         | language of code block language                  |
| `lineNumbersContainerNode` |                | `any`                                            |         | line numbers container element                   |
| `linenumbers`              | `linenumbers`  | `boolean`                                        | false   | boolean value for displaying line numbers        |
| `overridecopy`             | `overridecopy` | `any`                                            |         | String to override the copy text                 |
| `pathsflag`                | `pathsflag`    | `any[]`                                          |         | Array of json paths to be flagged in case of json lang |
| `theme`                    | `theme`        | `"dark" \| "light"`                              | "dark"  | theme of code block style                        |
| `title`                    | `title`        | `"example"`                                      |         | title of code block                              |
| `titleSlotElm`             |                | `any`                                            |         | title slot element                               |

## Slots

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

## CSS Custom Properties

| Property                                  | Description                                      |
|-------------------------------------------|--------------------------------------------------|
| `--fc-code-block-background-color`        | value color. example: `var(--fc-blue-gray-800)`, default: `rgba(54, 67, 95)` |
| `--fc-code-block-function-color`          | value color. example: `var(--fc-red-300)`, default: `var(--fc-red-300)` |
| `--fc-code-block-null-color`              | null color. example: `var(--fc-orange-300)`, default: `var(--fc-orange-300)` |
| `--fc-code-block-primary-color`           | attr color. example: `var(--fc-marine-300)`, default: `var(--fc-marine-300)` |
| `--fc-code-block-secondary-color`         | tag color. example: `var(--fc-green-300)`, default: `var(--fc-green-300)` |
| `--fc-code-block-text-color`              | value color. example: `white`, default: `white`  |
| `--fc-code-block-topbar-background-color` | value color. example: `var(--fc-blue-gray-900)`, default: `var(--fc-blue-gray-900)` |
| `--fc-code-block-topbar-color`            | value color. example: `var(--fc-gray-500)`, default: `var(--fc-gray-500)` |
| `--fc-code-block-variable-color`          | value color. example: `var(--fc-gold-300)`, default: `var(--fc-gold-300)` |