fc-code-block

Display themed syntax highlighted code in code block (JSON, HTML, CSS etc) Extension of highlight component by Liron Goldenberg

Usage

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

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

Examples

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

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