codeui-js

A full-featured node package providing code editor ui to be embedded in webpages/webapps.

Install

npm install codeui-js

or

yarn add codeui-js

Features

1. Line Number
2. File name
3. Toogle code editing
4. Line Highlight
5. Customizing style properties
6. Theme Selection

Usage

import React from "react";
import ReactDOM from "react-dom";

import { Codeui } from "codeui-js";

function App() {
  const data = `return (
        <>
          <h1 style={{ textAlign: "center" }}>codeui-js</h1>
          <Codeui data={data} />
        </>
      );`;

  return (
    <Codeui
      data={data}
      contentEditable={false}
      fileName="index.html"
      lineNumbering={true}
      lineToHighlight="3,4"
      wrap={false}
      borderRadius="1rem"
      lineHeight="1.6"
      fontSize="16"
      /* backgroundColor=""
      textColor=""
      highlighterColor=""
      highlighterLeftColor=""
      theme="" */
    />
  );
}

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

Output:

Attributes:

Name	Description	Required	Data type	Possible Values	Default Value	Example
data	Accepts the string representing the code/portion of text to be displayed	true	string	Any string	NULL	<>codeui-js</>
contentEditable	Allows to enable or disable the text editing on webpage	false	boolean	true, false	false	{true}
fileName	Accepts a string containing the filename to be displayed at bottom	false	string	Any string	NULL	index.html
lineNumbering	Allows to choose either to display line numbers or not	false	boolean	true, false	true	{true}
lineToHighlight	Accepts a string conatining line numbers to be highlighted by comma seprated	false	string	Any string with numbers seprated by comma	NULL	"1,2,3,6"
wrap	Allows to chose either the words should be wrapped or not	false	boolean	true, false	false	{true}
borderRadius	Accepts a string or a numberic value for representing the amount of corners to be rounded	false	string or numeric	Any string or number (int,float)	0.5rem	"1rem" or {1}
lineHeight	Accepts a string or a numberic value for representing the vertical spacing to be applied between lines	false	string or numeric	Any string or number (int,float)	1.6	"1rem" or {1.6}
fontSize	Accepts a string or a numeric value representing the size of text	false	string or numeric	Any string or number	16px	"1rem" or {16}
backgroundColor	Accepts a string representing a color value to be applied as background to the editor ui	false	string	Any string containing acceptable color value	rgb(1, 22, 39)	"black" or "#00000" or "rgb(1,22,39,0.5)" or "hsl(217,34%,29%)"
textColor	Accepts a string representing a color value to be applied as foreground text color	false	string	Any string containing acceptable color value	rgb(214, 222, 235)	"white" or "#ffffff" or "rbb(1,22,39,0.5)" or "hsl(217,34%,29%)"
highlighterColor	Accepts a string representing a color value to be applied as line highlighter color	false	string	Any string containing acceptable color value	rgb(2, 42, 75)	"blue" or "#00ff00" or "rgb(1,22,39,0.5)" or "hsl(217,34%,29%)"
highlighterLeftColor	Accepts a string representing a color value to be applied as line highlighter left border color	false	string	Any string containing acceptable color value	rgb(239, 83, 80)	"red" or "#ff0000" or "rgb(1,22,39,0.5)" or "hsl(217,34%,29%)"
theme	Accepts a string representing the theme name	false	string	light, bitLight, solarizedLight, purple, dark, solarizedDark, red, pinkGrey, whiteGrey, crimson	NULL(defalut theme)	"light"

Theme's:

1. light

2. bitLight

3. solarizedLight

4. purple

5. dark

6. solarizedDark

7. red

8. pinkGrey

9. whiteGrey

10. crimson