@forter/code-block

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>

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