tessl/npm-react-syntax-highlighter

React component library for syntax highlighting with highlight.js and Prism.js support.

—

Pending

Overview

Eval results

Files

Styling and Themes

Name: tessl/npm-react-syntax-highlighter
Author: tessl

Comprehensive theming and styling system with JavaScript-based styles, CSS class alternatives, and extensive customization options. React Syntax Highlighter provides 146 pre-built themes across both engines (99 for highlight.js, 47 for Prism.js).

Capabilities

JavaScript-Based Styling

Default inline styling approach using JavaScript objects, eliminating external CSS dependencies.

/**
 * Style object structure for themes
 */
interface ThemeStyle {
  [selector: string]: React.CSSProperties;
}

/**
 * Common style selectors for highlight.js themes
 */
interface HljsThemeSelectors {
  'hljs': React.CSSProperties;
  'hljs-comment': React.CSSProperties;
  'hljs-keyword': React.CSSProperties;
  'hljs-string': React.CSSProperties;
  'hljs-number': React.CSSProperties;
  'hljs-function': React.CSSProperties;
  'hljs-variable': React.CSSProperties;
  'hljs-operator': React.CSSProperties;
  'hljs-punctuation': React.CSSProperties;
  [key: string]: React.CSSProperties;
}

/**
 * Common style selectors for Prism themes
 */
interface PrismThemeSelectors {
  'code[class*="language-"]': React.CSSProperties;
  'pre[class*="language-"]': React.CSSProperties;
  'token.comment': React.CSSProperties;
  'token.keyword': React.CSSProperties;
  'token.string': React.CSSProperties;
  'token.number': React.CSSProperties;
  'token.function': React.CSSProperties;
  'token.operator': React.CSSProperties;
  [key: string]: React.CSSProperties;
}

Usage Examples:

import SyntaxHighlighter from 'react-syntax-highlighter';
import { docco, github, monokai } from 'react-syntax-highlighter/dist/esm/styles/hljs';

// Using pre-built themes
const ThemeExample = () => {
  const code = `function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}`;

  return (
    <div>
      {/* Docco theme */}
      <SyntaxHighlighter language="javascript" style={docco}>
        {code}
      </SyntaxHighlighter>
      
      {/* GitHub theme */}
      <SyntaxHighlighter language="javascript" style={github}>
        {code}
      </SyntaxHighlighter>
      
      {/* Monokai theme */}
      <SyntaxHighlighter language="javascript" style={monokai}>
        {code}
      </SyntaxHighlighter>
    </div>
  );
};

Highlight.js Themes

Extensive collection of highlight.js themes with various color schemes and styles.

// Popular highlight.js themes
import {
  // Light themes
  docco,
  github,
  googlecode,
  foundation,
  xcode,
  
  // Dark themes
  monokai,
  dracula,
  atomOneDark,
  nightOwl,
  nord,
  
  // High contrast themes
  a11yDark,
  a11yLight,
  
  // Colorful themes
  rainbow,
  sunburst,
  zenburn
} from 'react-syntax-highlighter/dist/esm/styles/hljs';

Theme Showcase:

import SyntaxHighlighter from 'react-syntax-highlighter';
import * as hljsStyles from 'react-syntax-highlighter/dist/esm/styles/hljs';

const HljsThemeShowcase = () => {
  const sampleCode = `class Calculator {
  constructor() {
    this.result = 0;
  }
  
  add(number) {
    this.result += number;
    return this;
  }
  
  multiply(number) {
    this.result *= number;
    return this;
  }
  
  getValue() {
    return this.result;
  }
}

const calc = new Calculator();
const result = calc.add(5).multiply(3).getValue(); // 15`;

  const popularThemes = [
    'docco', 'github', 'monokai', 'dracula', 
    'atomOneDark', 'solarizedLight', 'solarizedDark'
  ];

  return (
    <div>
      {popularThemes.map(themeName => (
        <div key={themeName} style={{ marginBottom: '2rem' }}>
          <h3>{themeName}</h3>
          <SyntaxHighlighter 
            language="javascript" 
            style={hljsStyles[themeName]}
          >
            {sampleCode}
          </SyntaxHighlighter>
        </div>
      ))}
    </div>
  );
};

Prism.js Themes

Collection of Prism.js themes with modern styling and enhanced visual appeal.

// Popular Prism themes
import {
  // Light themes
  prism,
  coy,
  solarizedlight,
  base16AteliersulphurpoolLight,
  
  // Dark themes
  dark,
  tomorrow,
  twilight,
  okaidia,
  atomDark,
  
  // Specialized themes
  a11yDark,
  cbTheme,
  coldarkCold,
  coldarkDark,
  funky,
  lucario,
  materialDark,
  materialLight,
  nightOwl,
  nord,
  oneDark,
  oneLight,
  shadesOfPurple,
  synthwave84,
  vscDarkPlus
} from 'react-syntax-highlighter/dist/esm/styles/prism';

Prism Theme Examples:

import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { vscDarkPlus, oneLight, synthwave84 } from 'react-syntax-highlighter/dist/esm/styles/prism';

const PrismThemeDemo = () => {
  const reactCode = `import React, { useState, useEffect } from 'react';

const UserProfile = ({ userId }) => {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchUser = async () => {
      try {
        const response = await fetch(\`/api/users/\${userId}\`);
        const userData = await response.json();
        setUser(userData);
      } catch (error) {
        console.error('Failed to fetch user:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchUser();
  }, [userId]);

  if (loading) return <div>Loading...</div>;
  if (!user) return <div>User not found</div>;

  return (
    <div className="user-profile">
      <h2>{user.name}</h2>
      <p>{user.email}</p>
      <p>Joined: {new Date(user.createdAt).toLocaleDateString()}</p>
    </div>
  );
};`;

  return (
    <div>
      <h3>VS Code Dark Plus</h3>
      <SyntaxHighlighter language="jsx" style={vscDarkPlus}>
        {reactCode}
      </SyntaxHighlighter>
      
      <h3>One Light</h3>
      <SyntaxHighlighter language="jsx" style={oneLight}>
        {reactCode}
      </SyntaxHighlighter>
      
      <h3>Synthwave '84</h3>
      <SyntaxHighlighter language="jsx" style={synthwave84}>
        {reactCode}
      </SyntaxHighlighter>
    </div>
  );
};

Custom Styling

Creating and modifying themes with custom styles and overrides.

/**
 * Custom style properties for syntax highlighter components
 */
interface CustomStyleOptions {
  /** Additional styles for the pre tag */
  customStyle?: React.CSSProperties;
  /** Props for the code tag including styles */
  codeTagProps?: {
    style?: React.CSSProperties;
    className?: string;
    [key: string]: any;
  };
  /** Use inline styles vs CSS classes */
  useInlineStyles?: boolean;
}

Custom Theme Creation:

import SyntaxHighlighter from 'react-syntax-highlighter';
import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs';

// Create custom theme by extending existing theme
const customTheme = {
  ...docco,
  'hljs': {
    ...docco.hljs,
    background: '#1e1e1e',
    color: '#d4d4d4',
    borderRadius: '8px',
    padding: '16px'
  },
  'hljs-keyword': {
    ...docco['hljs-keyword'],
    color: '#569cd6',
    fontWeight: 'bold'
  },
  'hljs-string': {
    ...docco['hljs-string'],
    color: '#ce9178'
  },
  'hljs-comment': {
    ...docco['hljs-comment'],
    color: '#6a9955',
    fontStyle: 'italic'
  }
};

const CustomThemeExample = () => {
  return (
    <SyntaxHighlighter language="javascript" style={customTheme}>
      {code}
    </SyntaxHighlighter>
  );
};

// Theme with custom styling overrides
const StyledExample = () => {
  return (
    <SyntaxHighlighter 
      language="javascript"
      style={docco}
      customStyle={{
        margin: '20px 0',
        borderRadius: '12px',
        boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
        border: '1px solid #e1e5e9',
        fontSize: '14px',
        lineHeight: '1.5'
      }}
      codeTagProps={{
        style: {
          fontFamily: 'Fira Code, Menlo, Monaco, Consolas, monospace'
        }
      }}
    >
      {code}
    </SyntaxHighlighter>
  );
};

CSS Class-Based Styling

Alternative styling approach using CSS classes instead of inline styles.

/**
 * Props for CSS class-based styling
 */
interface CSSClassStyleOptions {
  /** Disable inline styles and use CSS classes */
  useInlineStyles: false;
  /** Additional CSS class for the pre element */
  className?: string;
  /** Props for code element including className */
  codeTagProps?: {
    className?: string;
    [key: string]: any;
  };
}

CSS Class Examples:

// Using CSS classes instead of inline styles
const CSSClassExample = () => {
  return (
    <SyntaxHighlighter 
      language="javascript"
      useInlineStyles={false}
      className="custom-highlighter"
      codeTagProps={{
        className: "custom-code"
      }}
    >
      {code}
    </SyntaxHighlighter>
  );
};

/* External CSS file */
.custom-highlighter {
  background-color: #2d3748;
  border-radius: 8px;
  padding: 16px;
  margin: 16px 0;
  overflow-x: auto;
}

.custom-code {
  font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
  font-size: 14px;
  line-height: 1.5;
}

/* Highlight.js classes */
.hljs-keyword {
  color: #f7fafc;
  font-weight: bold;
}

.hljs-string {
  color: #68d391;
}

.hljs-comment {
  color: #a0aec0;
  font-style: italic;
}

.hljs-number {
  color: #f6ad55;
}

Line Number Styling

Customizing the appearance and behavior of line numbers.

/**
 * Line number styling options
 */
interface LineNumberStyleOptions {
  /** Show line numbers in left gutter */
  showLineNumbers?: boolean;
  /** Show line numbers inline with code */
  showInlineLineNumbers?: boolean;
  /** Starting line number */
  startingLineNumber?: number;
  /** Container styles for line numbers */
  lineNumberContainerStyle?: React.CSSProperties;
  /** Style for individual line numbers */
  lineNumberStyle?: React.CSSProperties | ((lineNumber: number) => React.CSSProperties);
}

Line Number Styling Examples:

const LineNumberStyling = () => {
  // Basic line numbers
  const basicExample = (
    <SyntaxHighlighter 
      language="python"
      style={docco}
      showLineNumbers={true}
      startingLineNumber={1}
    >
      {pythonCode}
    </SyntaxHighlighter>
  );

  // Custom line number styling
  const customLineNumbers = (
    <SyntaxHighlighter 
      language="python"
      style={docco}
      showLineNumbers={true}
      lineNumberContainerStyle={{
        backgroundColor: '#f8f9fa',
        borderRight: '2px solid #e9ecef',
        paddingRight: '12px',
        marginRight: '12px'
      }}
      lineNumberStyle={{
        color: '#6c757d',
        fontSize: '12px',
        fontWeight: 'bold'
      }}
    >
      {pythonCode}
    </SyntaxHighlighter>
  );

  // Dynamic line number styling
  const dynamicLineNumbers = (
    <SyntaxHighlighter 
      language="python"
      style={docco}
      showLineNumbers={true}
      lineNumberStyle={(lineNumber) => ({
        color: lineNumber % 5 === 0 ? '#dc3545' : '#6c757d',
        fontWeight: lineNumber % 5 === 0 ? 'bold' : 'normal',
        backgroundColor: lineNumber % 10 === 0 ? '#fff3cd' : 'transparent'
      })}
    >
      {pythonCode}
    </SyntaxHighlighter>
  );

  return (
    <div>
      <h3>Basic Line Numbers</h3>
      {basicExample}
      
      <h3>Custom Line Numbers</h3>
      {customLineNumbers}
      
      <h3>Dynamic Line Numbers</h3>
      {dynamicLineNumbers}
    </div>
  );
};

Responsive and Adaptive Styling

Creating responsive themes that adapt to different screen sizes and user preferences.

const ResponsiveExample = () => {
  const [theme, setTheme] = useState('light');
  const [fontSize, setFontSize] = useState(14);

  // Theme switching
  const lightTheme = github;
  const darkTheme = atomOneDark;
  const currentTheme = theme === 'light' ? lightTheme : darkTheme;

  // Responsive custom styles
  const responsiveStyles = {
    fontSize: `${fontSize}px`,
    borderRadius: '8px',
    margin: '16px 0',
    // Mobile styles
    '@media (max-width: 768px)': {
      fontSize: '12px',
      margin: '8px 0',
      borderRadius: '4px'
    }
  };

  return (
    <div>
      <div style={{ marginBottom: '16px' }}>
        <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
          Switch to {theme === 'light' ? 'Dark' : 'Light'} Theme
        </button>
        <input 
          type="range" 
          min="10" 
          max="20" 
          value={fontSize}
          onChange={(e) => setFontSize(Number(e.target.value))}
        />
        <span>Font Size: {fontSize}px</span>
      </div>
      
      <SyntaxHighlighter 
        language="javascript"
        style={currentTheme}
        customStyle={responsiveStyles}
      >
        {code}
      </SyntaxHighlighter>
    </div>
  );
};

Print Styling

Optimizing syntax highlighting for print media and PDF generation.

const PrintOptimizedExample = () => {
  const printStyles = {
    backgroundColor: 'white',
    color: 'black',
    border: '1px solid #ccc',
    fontSize: '10px',
    lineHeight: '1.2',
    // Print-specific styles
    '@media print': {
      backgroundColor: 'white !important',
      color: 'black !important',
      boxShadow: 'none',
      border: '1px solid #000'
    }
  };

  return (
    <SyntaxHighlighter 
      language="javascript"
      style={github} // Light theme works better for print
      customStyle={printStyles}
      showLineNumbers={true}
      lineNumberStyle={{
        color: '#666',
        fontSize: '9px'
      }}
    >
      {code}
    </SyntaxHighlighter>
  );
};

Advanced Styling Techniques

Theme Composition

// Composing themes from multiple sources
const composeTheme = (baseTheme, overrides) => {
  const composed = { ...baseTheme };
  
  Object.keys(overrides).forEach(selector => {
    composed[selector] = {
      ...composed[selector],
      ...overrides[selector]
    };
  });
  
  return composed;
};

const myTheme = composeTheme(docco, {
  'hljs': {
    backgroundColor: '#1a1a1a',
    color: '#f8f8f2',
    borderRadius: '12px'
  },
  'hljs-keyword': {
    color: '#ff79c6',
    fontWeight: 'bold'
  }
});

Conditional Styling

const ConditionalStyling = ({ isDark, isHighContrast }) => {
  const getTheme = () => {
    if (isHighContrast) {
      return isDark ? a11yDark : a11yLight;
    }
    return isDark ? monokai : github;
  };

  const getCustomStyles = () => ({
    fontSize: isHighContrast ? '16px' : '14px',
    lineHeight: isHighContrast ? '1.8' : '1.5',
    padding: isHighContrast ? '20px' : '16px'
  });

  return (
    <SyntaxHighlighter 
      language="javascript"
      style={getTheme()}
      customStyle={getCustomStyles()}
    >
      {code}
    </SyntaxHighlighter>
  );
};

Install with Tessl CLI

npx tessl i tessl/npm-react-syntax-highlighter

docs

standard-highlighter.md

styling-themes.md

tile.json