@catpic/console-highlighter

Highlight console log messages with style.

Usage no npm install needed!

<script type="module">
  import catpicConsoleHighlighter from 'https://cdn.skypack.dev/@catpic/console-highlighter';
</script>

README

@catpic/console-highlighter

Highlight console log messages with style.

Features

  • themeable
  • customizable
  • automatic highlighting (variables used in template strings will be highlighted)

How to

yarn add @catpic/console-highlighter

const highlighter = new Highlighter({theme: 'dracula'})

highlighter.highlight.yellow`${count} messages sent.`

The listed emojis may be used in log message like so: this message is :fire:

export const emojis = {
  poop: "💩",
  happy: "😀",
  unicorn: "🦄",
  rainbow: "🌈",
  party: "🎉",
  heart: "❤️",
  bomb: "💣",
  bang: "💥",
  dynamite: "🧨",
  fire: "🔥",
};

Demo

Themes may be customized using supported CSS properties.

const highlighter = new Highlighter({ 
  theme: 'unicorn'
  styles: { line: () => "display: block;" },
})

display: block

TODO

  • Expose combinators for building custom highlighters.