TypeScript support

[loicsay]

Hey 🙋‍♂️

Thanks for this easy-to-use and lightweight library! I'm using it in a TS codebase, I thought it'd maybe help someone else if I submit the code here:

export type ColorsOptions = {
  keyColor?: string;
  numberColor?: string;
  stringColor?: string;
  trueColor?: string;
  falseColor?: string;
  nullColor?: string;
};

const DEFAULT_COLORS: ColorsOptions = {
  keyColor: "dimgray",
  numberColor: "lightskyblue",
  stringColor: "lightcoral",
  trueColor: "lightseagreen",
  falseColor: "#f66578",
  nullColor: "cornflowerblue",
};

const ENTITY_MAP = {
  "&": "&",
  "<": "&lt;",
  ">": "&gt;",
  '"': "&quot;",
  "'": "&#39;",
  "`": "&#x60;",
  "=": "&#x3D;",
};

const escapeHtml = (html: string) =>
  String(html).replace(
    /[&<>"'`=]/g,
    (entityKey: string) => ENTITY_MAP[entityKey as keyof typeof ENTITY_MAP]
  );

const formatHighlight: (
  object: string | object,
  colorOptions: ColorsOptions
) => string = (object, colorOptions = {}) => {
  if (typeof object !== "string") {
    object = JSON.stringify(object, null, 2) || typeof object;
  }

  let colors = Object.assign({}, DEFAULT_COLORS, colorOptions);
  object = object.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");
  return object.replace(
    /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+]?\d+)?)/g,
    (match) => {
      let color = colors.numberColor;
      let style = "";

      if (/^"/.test(match)) {
        if (/:$/.test(match)) {
          color = colors.keyColor;
        } else {
          color = colors.stringColor;
          match = '"' + escapeHtml(match.substring(1, match.length - 2)) + '"';
          style = "word-wrap:break-word;white-space:pre-wrap;";
        }
      } else if (/true/.test(match)) {
        color = colors.trueColor;
      } else if (/false/.test(match)) {
        color = colors.falseColor;
      } else if (/null/.test(match)) {
        color = colors.nullColor;
      }

      return `<span style="${style}color:${color}">${match}</span>`;
    }
  );
};

export default formatHighlight;

[ingipingi]

Hi, thanks for the typescript implementation. But there is an error in your code.
The line: match = '"' + escapeHtml(match.substring(1, match.length - 2)) + '"';
Should be: match = '"' + escapeHtml(match.substring(1, match.length - 1)) + '"';

Because you're using .substring(), instead of .substr() which i used originally. Second parameter of .substring() is 'end', while second parameter of .substr() is 'length'.

[luyilin]

Thank you both for the TypeScript implementation. Please feel free to raise a pull request to add support, I would like to incorporate it.