Code-preview-component NPM

code-preview-component

React component for displaying code with examples in multiple languages.

Demo of the WIP-State can be seen here: External Test - Gitlab Pages, Internal Demo - Gitlab Pages.

To Dos

v1.0

Switch Language
Highlight Code
- Props: Enable/Disable Line Numbers
- Props: Change Style
Compile UML to graphic

Ideas

Side-by-side viewing code. As example:
- HTML, JS and CSS to get the whole picture
- Compare alike snippets
Show Result of code - Dartpad, Codepen integration

Example

Currently it's possible to add a Language and a Code Snippet.

import CodePreview from "code-preview-component";

const langMap = new Map<Langs, string>();
// Init the Langauges
langMap.set(Langs.JavaScript, `console.log("Hello world!")`);

return (
  <CodePreview languageEntries={this.state.languageEntries} />
);

Note

The react-syntax-highlighter is lazy loaded through React.lazy for faster feedback. For this the async implementation of the highlighter is used. This also splits the highlighter-dependency into chunks while building, which are dynamically loaded, depending on language currently displayed. There are also custom type-definitions provided for react-syntax-highlighter, as the ones on @types/react-syntax-highlighter don't yet include the async lazy loading version.

@material-ui/core and @material-ui/icons is just used as webpack.external, so the using module can handle code splitting.