Restructure repository (#426)

organized repository 

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
Co-authored-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
Co-authored-by: Philip Molares <git@molar.es>

src/components/markdown-renderer/replace-components/highlighted-fence/highlighted-code/highlighted-code.scss

@@ -0,0 +1,42 @@
+.markdown-body {
+  @import '../../../../../../node_modules/highlight.js/styles/github-gist.css';
+}
+
+.markdown-body pre code.hljs {
+
+  padding: 16px;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+
+  &.showGutter {
+    .linenumber {
+      position: relative;
+      cursor: default;
+      z-index: 4;
+      padding: 0 8px 0 0;
+      min-width: 20px;
+      box-sizing: content-box;
+      color: #afafaf;
+      border-right: 3px solid #6ce26c;
+      flex-direction: column;
+      overflow: hidden;
+      user-select: none;
+
+      display: flex;
+      align-items: flex-end;
+
+      &:before {
+        content: attr(data-line-number);
+      }
+    }
+  }
+
+  &.showGutter .codeline {
+    margin: 0 0 0 16px;
+  }
+
+  &.wrapLines .codeline {
+    white-space: pre-wrap;
+  }
+
+}

src/components/markdown-renderer/replace-components/highlighted-fence/highlighted-code/highlighted-code.tsx

@@ -0,0 +1,59 @@
+import hljs from 'highlight.js'
+import React, { Fragment, useMemo } from 'react'
+import ReactHtmlParser from 'react-html-parser'
+import './highlighted-code.scss'
+
+export interface HighlightedCodeProps {
+  code: string,
+  language?: string,
+  startLineNumber?: number
+  wrapLines: boolean
+}
+
+export const escapeHtml = (unsafe: string): string => {
+  return unsafe
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;')
+}
+
+const checkIfLanguageIsSupported = (language: string): boolean => {
+  return hljs.listLanguages().indexOf(language) > -1
+}
+
+const correctLanguage = (language: string | undefined): string | undefined => {
+  switch (language) {
+    case 'html':
+      return 'xml'
+    default:
+      return language
+  }
+}
+
+export const HighlightedCode: React.FC<HighlightedCodeProps> = ({ code, language, startLineNumber, wrapLines }) => {
+  const highlightedCode = useMemo(() => {
+    const replacedLanguage = correctLanguage(language)
+    return ((!!replacedLanguage && checkIfLanguageIsSupported(replacedLanguage)) ? hljs.highlight(replacedLanguage, code).value : escapeHtml(code))
+      .split('\n')
+      .filter(line => !!line)
+      .map(line => ReactHtmlParser(line))
+  }, [code, language])
+
+  return (
+    <code className={`hljs ${startLineNumber !== undefined ? 'showGutter' : ''} ${wrapLines ? 'wrapLines' : ''}`}>
+      {
+        highlightedCode
+          .map((line, index) => {
+            return <Fragment key={index}>
+              <span className={'linenumber'} data-line-number={(startLineNumber || 1) + index}/>
+              <div className={'codeline'}>
+                {line}
+              </div>
+            </Fragment>
+          })
+      }
+
+    </code>)
+}

src/components/markdown-renderer/replace-components/highlighted-fence/highlighted-fence-replacer.tsx

@@ -0,0 +1,29 @@
+import { DomElement } from 'domhandler'
+import React from 'react'
+import { HighlightedCode } from './highlighted-code/highlighted-code'
+import { ComponentReplacer } from '../ComponentReplacer'
+
+export class HighlightedCodeReplacer implements ComponentReplacer {
+  private lastLineNumber = 0;
+
+  getReplacement (codeNode: DomElement, index: number): React.ReactElement | undefined {
+    if (codeNode.name !== 'code' || !codeNode.attribs || !codeNode.attribs['data-highlight-language'] || !codeNode.children || !codeNode.children[0]) {
+      return
+    }
+
+    const language = codeNode.attribs['data-highlight-language']
+    const showLineNumbers = codeNode.attribs['data-show-line-numbers'] !== undefined
+    const startLineNumberAttribute = codeNode.attribs['data-start-line-number']
+
+    const startLineNumber = startLineNumberAttribute === '+' ? this.lastLineNumber : (parseInt(startLineNumberAttribute) || 1)
+    const wrapLines = codeNode.attribs['data-wrap-lines'] !== undefined
+    const code = codeNode.children[0].data as string
+
+    if (showLineNumbers) {
+      this.lastLineNumber = startLineNumber + code.split('\n')
+        .filter(line => !!line).length
+    }
+
+    return <HighlightedCode key={index} language={language} startLineNumber={showLineNumbers ? startLineNumber : undefined} wrapLines={wrapLines} code={code}/>
+  }
+}