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 = <Langs, >;// Init the LangaugeslangMap; return <CodePreview = />;
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