Chitter

Preview a working example at https://asm-chitter.vercel.app/

Example repository: https://github.com/najmiter/chitter-example

Getting started

npm i chitter

Then do your imports

import init, { chittify } from 'chitter';

[!IMPORTANT]
If you're using react, you can do the init() in a useEffect like:

useEffect(() => {
  init();
}, []);

The chittify should return styled html that you can assign to the innerHTML.

const div = document.querySelector('#code-container');
const code = 'mov rax, 10';
const highlightedHtml = chittify(code);
if (div) {
  // null check
  div.innerHTML = highlightedHtml;
}

Or if case of react, you can do something like this:

//.......
//....

// this should be some state that's attached to the `Textarea` (see example project on github)
const code = 'mov rax, 10';
const highlight = useCallback(
  (source: string) => (source ? chittify(source) : 'Output will appear here'),
  []
);

//.......
//....
<div dangerouslySetInnerHTML={{ __html: highlightedHtml }} />;
//....
//.......