@lobehub/ui/es/Highlighter/SyntaxHighlighter/index.js

Lobe UI is an open-source UI component library for building AIGC web apps

'use client';

import { cva } from 'class-variance-authority';
import { memo, useMemo } from 'react';
import { useHighlight } from "../../hooks/useHighlight";
import { useStyles } from "./style";
import { jsx as _jsx } from "react/jsx-runtime";
var SyntaxHighlighter = /*#__PURE__*/memo(function (_ref) {
  var ref = _ref.ref,
    children = _ref.children,
    language = _ref.language,
    className = _ref.className,
    style = _ref.style,
    enableTransformer = _ref.enableTransformer,
    variant = _ref.variant,
    theme = _ref.theme;
  var _useStyles = useStyles(),
    styles = _useStyles.styles,
    cx = _useStyles.cx;
  var isDefaultTheme = theme === 'lobe-theme' || !theme;
  var showBackground = !isDefaultTheme && variant === 'filled';
  var _useHighlight = useHighlight(children, {
      enableTransformer: enableTransformer,
      language: language,
      theme: isDefaultTheme ? undefined : theme
    }),
    data = _useHighlight.data;
  var variants = useMemo(function () {
    return cva(styles.root, {
      defaultVariants: {
        shiki: false,
        showBackground: false,
        variant: 'borderless'
      },
      /* eslint-disable sort-keys-fix/sort-keys-fix */
      variants: {
        shiki: {
          false: styles.unshiki,
          true: styles.shiki
        },
        variant: {
          filled: styles.padding,
          outlined: styles.padding,
          borderless: styles.noPadding
        },
        showBackground: {
          false: styles.noBackground,
          true: null
        }
      }
      /* eslint-enable sort-keys-fix/sort-keys-fix */
    });
  }, [styles]);
  if (!data) return /*#__PURE__*/_jsx("div", {
    className: cx(variants({
      shiki: false,
      showBackground: showBackground,
      variant: variant
    }), className),
    dir: "ltr",
    ref: ref,
    style: style,
    children: /*#__PURE__*/_jsx("pre", {
      children: /*#__PURE__*/_jsx("code", {
        children: children
      })
    })
  });
  return /*#__PURE__*/_jsx("div", {
    className: cx(variants({
      shiki: true,
      showBackground: showBackground,
      variant: variant
    }), className),
    dangerouslySetInnerHTML: {
      __html: data
    },
    dir: "ltr",
    ref: ref,
    style: style
  });
});
SyntaxHighlighter.displayName = 'SyntaxHighlighter';
export default SyntaxHighlighter;