@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']}">
    <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

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
fold	fold	boolean	false	boolean value for displaying folded code content
language	language	"html" | "bash" | "javascript" | "json" | "css" | "yaml"		language of code block language
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)