# c5-code-editor

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

Latest version **0.0.3** (published 2022-01-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install c5-code-editor
pnpm add c5-code-editor
yarn add c5-code-editor
bun add c5-code-editor
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2022-01-20 |
| First published | 2022-01-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 1.8 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | C5m7b4 |
| Maintainers | c5m7b4 |

## Links

- npm: https://www.npmjs.com/package/c5-code-editor
- npm.io page: https://npm.io/package/c5-code-editor

## Dependencies (3)

- [prettier](https://npm.io/package/prettier.md) ^2.5.1
- [c5-pick-color](https://npm.io/package/c5-pick-color.md) ^0.0.2
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.16.7

## Recent versions

- 0.0.3 (latest) — 2022-01-20
- 0.0.2 — 2022-01-19
- 0.0.1 — 2022-01-19

## README

# c5-code-editor

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

To install:

```js
  npm install c5-code-editor
```

Sample usage:

```js
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:

```js
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:

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

---
_Source: https://npm.io/package/c5-code-editor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._