diff options
Diffstat (limited to 'frontend/src/components/renderers/Code.js')
| -rw-r--r-- | frontend/src/components/renderers/Code.js | 56 |
1 files changed, 56 insertions, 0 deletions
diff --git a/frontend/src/components/renderers/Code.js b/frontend/src/components/renderers/Code.js new file mode 100644 index 0000000..12efc67 --- /dev/null +++ b/frontend/src/components/renderers/Code.js @@ -0,0 +1,56 @@ +import React from 'react'; +import styled from 'styled-components' +import { Light as SyntaxHighlighter } from 'react-syntax-highlighter'; +import { atomOneLight, ascetic, atomOneDark, dracula, ocean } from 'react-syntax-highlighter/dist/esm/styles/hljs'; + +export const THEMES = Object.freeze({ + 'atom': atomOneLight, + 'atom dark': atomOneDark, + 'plain': ascetic, + 'dracula': dracula, + 'ocean': ocean, +}) + +export const LANGS = Object.freeze({ + 'go': 'go', + 'python': 'python', + 'javascript': 'javascript', + 'html': 'html', + 'css': 'css', + 'c': 'c', + 'c++': 'cpp', + 'c#': 'cs', + 'ruby': 'ruby', + 'docker': 'dockerfile', + 'bash': 'bash', + 'raw': 'text', + 'java': 'java', + 'lisp': 'lisp', + 'haskell': 'haskell', + 'scala': 'scala', + 'markdown': 'markdown', + 'makefile': 'makefile', + 'php': 'php', + 'latex': 'latex', + 'yaml': 'yaml' +}) + +const RelPositioning = styled.div` + position: relative; +` + +const CodeRenderer = (props) => { + return ( + <RelPositioning> + <SyntaxHighlighter + className="codeBlock lt-shadow" + language={props.lang} + style={THEMES[props.theme]} + showLineNumbers > + {props.content} + </SyntaxHighlighter> + </RelPositioning> + ); +}; + +export default CodeRenderer
\ No newline at end of file |