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: 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.

const javaString =
`public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}`

return (
  <CodePreview>
    <CodeEntry language={Langs.Java}>
      {javaString}
    </CodeEntry>
  </CodePreview>
);

Note

As i'm not that experienced with chunking, code splitting etc. i'll be experimenting with moving the code to a create-react-app setup, as it seems to reduce the file size and currently all the huge dependencies are made external.

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