thekit

Syntax

import { useEffect, useState } from 'react'

function createElement({ node, style, useInlineStyles, key }) {

  const { properties, type, tagName, value } = node;

  if (type === "text") {
    return value;

  } else if (tagName) {
    const TagName = tagName;
    const childrenCreator = createChildren(style, useInlineStyles);
    const props = (
      useInlineStyles
      ? { style: createStyleObject(properties.className, style) }
      : { className: createClassNameString(properties.className) }
    );

    const children = childrenCreator(node.children);

    return <TagName key={key} {...props}>{children}</TagName>;
  }
}

Syntax

Download

npx github-download-directory carllosnc/cn-react-thekit src/components/Syntax

Import

import { Syntax } from '@/components'

Dependencies

react-syntax-highlighter

npm install react-syntax-highlighter

Syntax

import { Syntax } from '@/components'

const CODE_EXAMPLE = `
function add(a: number, b: number){
  return (a + b)
}
`

function App() {
  return <Syntax lang="typescript">{CODE_EXAMPLE}</Syntax>
}

Modal Props

name	type	default	description
`lang`	string	`typescript`	programing language, all syntax are provided by hljs
`children`	string	`undefined`	code example