@forter/code-block v1.5.6

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']}">
    <div slot="title">pathsflag 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>

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

Slots

CSS Custom Properties