lexour v0.0.1

THIS PACKAGE IS A WORK IN PROGRESS - NOT ALL LINKS ON THE README WORK AND THE PACKAGE IS NOT YET PROPERLY BUILT FOR NPM

lexour

A React component for your code snippets!

Features

lexour is a component for React that tokenizes and renders your code snippets. Provide a language and some code, and watch it come to life with proper syntax highlighting. lexour provides an intuitive and highly customizable component: no config, no insane child prop - just simple, customizable syntax highlighting.

It includes a number of features out of the box, including:

• Accessible, mobile-friendly, cross-browser support.
• Built-in type support! Lexour is built entirely in TypeScript, but you can stick with plain ol' JSX if you prefer.
• Annotations! Likely the most useful and powerful part of lexour, annotations provide added functionality that would otherwise be impossible.
• Custom theme support! Don't like the provided themes? Make your own and pass it to the theme prop to see it in action.
• Toy language support! If you build a tokenizer with Moo, you can pass it directly to the lang prop and see it in action straight away - no extra setup or config necessary.
• Only one dependency (Moo!). Even better, Moo itself is tiny and currently has zero dependencies.

Installation

To get started with lexour using npm:

npm install lexour

Or, if you prefer yarn:

yarn add lexour

lexour has a peer dependency requirement of react>=16.8 and react-dom>=16.8 (the introduction of hooks).

Quick Start

To use lexour, you'll need to import the exposed component. The component only requires two props be passed - a language (lang), and the code to be tokenized.

import CodeBlock from 'lexour';

const myCode = `
const myMessage = "Hello, world!";
console.log(myMessage);
`;

function myComponent() {
    return <CodeBlock lang="javascript" code={code} />;
}

If you'd like it to render line numbers:

return <CodeBlock lang="js" code={code} showLineNumbers />;

Or maybe you need it to start at line 43?

return <CodeBlock lang="ts" code={code} showLineNumbers firstLine={43} />;

And those are just the very basics. For full documentation, please check out the docs site. It includes all the information you'll need, including info about annotations (ooo), themes (aaah), toy languages (whaaat), and more (wowee)! It also provides some information about how lexour works under the hood, which is probably where you want to look if it seems like a token is of the wrong type.

It should be noted here that lexour is only a lexer. It does not parse the input code or generate an AST, and it certainly does not run it. As such, lexour has no way of knowing if your input represents a valid chunk of code (and you probably don't want it to, either). Valid code will always be more-or-less displayed as expected (read why it's more-or-less), but invalid code will either appear as valid or be marked as invalid, depending on the language and the input code.

Contributing

If you'd like to contribute, thanks! First read the code of conduct in its entirety to understand what sort of actions are and are not acceptable. Once you've done that, read the guide on contributing. And again - thank you!