UikCodeHighlightContainer

This is a wrapping component with styles and some extra logic above PrismJS. You can pass multiple different code examples, e.g. Javascript + Html (markdown), the component will render the code with tabs to select a code preview.

PropertyTypeRequiredDefault ValueDescription
classNameStringfalsenullclassName for wrapping component
maxHeightBooleanfalsefalseMaximum height of the container is 70vh
ComponentReact.ElementTypefalse"div"Renders the component with a given react element. By default, the component renders <div />. This is usefull when you want to use a same style but render a different HTML element or your custom component. Read and see more examples here.
dataObjectfalse{}

Object of <key, value>, where key is language and Value is code property for UikCodeHighlight

defaultActiveLangStringfalseOn initial render, by default the language is selected
...restanyfalseOther props are passed to the wrapping component

UikCodeHighlightContainer Examples

ComponentExample Code
javascriptmarkup
const hello = "Hello Kit"
<UikCodeHighlightContainer
  data={ {
    javascript: 'const hello = "Hello Kit",
    markup: '<div>Hello</div>',
  } }
/>