c5-code-editor

This is a small utility that allows displaying source code nicely in a react app.

To install:

  npm install c5-code-editor

Sample usage:

import React, { useState } from 'react';
import Editor, { findColor } from 'c5-code-editor';

const App = () => {
  const [code, setCode] = useState(`import React from 'react'
  const App = (a) => {
    return (
      <div className="main-div">
        <h2>Hello world</h2>
      </div>
    )
  }`);

  return <Editor code={code} />;
};

Props: | Prop Name | optional | type | description | | :---------- | :-------- | :-------- | :---------- | | code | [required] | string | the code you want displayed | | showLineNumbers | [✔] | boolean | show line numbers or not. Defaults to true. | | codeElem | [✔] | string | color for the code elements | | enableCodeElem | [✔] | boolean | color code elements or not. Defaults to true. | | codeStr | [✔] | string | color of strings inside double quotes | | enableCodeStr | [✔] | boolean | color code string or not. Defaults to true. | | codeQuote | [✔] | string | color of quotation marks | | enableCodeQuote | [✔] | boolean | color quotation marks or not. Defaults to true. | | reserved | [✔] | string | color of reserved words | | enableReserved | [✔] | boolean | color reserved words or not. Defaults to true. | | appColor | [✔] | string | color of app like words | | enableAppColor | [✔] | boolean | color app like words or not. Defaults to true. | | defaultColor | [✔] | string | color of default like words | | enableDefaultColor | [✔] | boolean | color default like words or not | | codeSingle | [✔] | string | color of single quotes | | enableCodeSingle | [✔] | boolean | color single quotes or not. Defaults to true. | | betweenSingleQuotes | [✔] | string | color of contents between single quotes | | enableBetweenSingleQuotes | [✔] | boolean | color contents between single quotes or not. Defaults to true. | | parens | [✔] | string | color of parenthesis | | enableParens | [✔] | boolean | color parenthesis or not. Defaults to true. | | insideParens | [✔] | string | color of contents inside of parenthesis | | enableInsideParens | [✔] | boolean | color contents inside of parenthesis or not. Defaults to true. | | alternates | [✔] | string | color of alternate words | | enableAlternates | [✔] | boolean | color alternate words or not. Defaults to true. | | customReserveWords | [✔] | array of strings | an array of words that you would like to include in the coloring of reserve words. defaults to empty array | | customAppWords | [✔] | array of strings | an array of words that you would like to include in the coloring of app words. defaults to empty array | | customDefaults | [✔] | array of strings | an array of words that you would like to include in the coloring of default words. defaults to empty array | | customAlternatives | [✔] | array of strings | an array of words that you would like to include in the coloring of alternative words. defaults to empty array | | parserType | [✔] | string | type of parser to use with Prettier to format the code string. Defaults to 'babel' | | format | [✔] | boolean | format code or not. defaults to true

words list:

export const reservedWords: string[] = [
  'id',
  'className',
  'class',
  'if',
  'then',
  'json',
  'application',
  'method',
  'async',
  'await',
  'for',
];

export const defaultWords: string[] = [
  'return',
  'import',
  'console',
  'log',
  'from',
];

export const appWords: string[] = [
  'React',
  'Axios',
  'const',
  'function',
  'let',
  'var',
  'avion',
];

export const alternateWords: string[] = ['url', 'params', 'data', 'cors'];

Parser Types:

export type Parsers =
  | 'babel'
  | 'css'
  | 'json'
  | 'flow'
  | 'babel-flow'
  | 'babel-ts'
  | 'typescript'
  | 'json'
  | 'markdown'
  | 'html';