Package Exports

code-preview-component

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (code-preview-component) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.

Icon - Sources

In General icons are taken from DevIcon.

Rustlang Logo: Rustlang Icon Logo
For this logo the size and viewbox has been adjustet, as the original contains large borders: Bash Logo