buggy code highlighting

frontend/package-lock.json

@@ -1257,6 +1257,12 @@
         "@types/range-parser": "*"
       }
     },
+    "@types/highlight.js": {
+      "version": "9.12.3",
+      "resolved": "https://registry.npmjs.org/@types/highlight.js/-/highlight.js-9.12.3.tgz",
+      "integrity": "sha512-pGF/zvYOACZ/gLGWdQH8zSwteQS1epp68yRcVLJMgUck/MjEn/FBYmPub9pXT8C1e4a8YZfHo1CKyV8q1vKUnQ==",
+      "dev": true
+    },
     "@types/history": {
       "version": "4.7.2",
       "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.2.tgz",
@@ -5054,6 +5060,11 @@
       "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==",
       "dev": true
     },
+    "highlight.js": {
+      "version": "9.15.6",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.15.6.tgz",
+      "integrity": "sha512-zozTAWM1D6sozHo8kqhfYgsac+B+q0PmsjXeyDrYIHHcBN0zTVT66+s2GW1GZv7DbyaROdLXKdabwS/WqPyIdQ=="
+    },
     "history": {
       "version": "4.9.0",
       "resolved": "https://registry.npmjs.org/history/-/history-4.9.0.tgz",

frontend/package.json

@@ -9,6 +9,7 @@
     "@types/autoprefixer": "^9.4.0",
     "@types/enzyme": "^3.9.1",
     "@types/enzyme-adapter-react-16": "^1.0.5",
+    "@types/highlight.js": "^9.12.3",
     "@types/jest": "^24.0.11",
     "@types/node-sass": "^4.11.0",
     "@types/parcel-bundler": "^1.12.0",
@@ -30,6 +31,7 @@
   "dependencies": {
     "@blueprintjs/core": "^3.15.1",
     "@blueprintjs/icons": "^3.8.0",
+    "highlight.js": "^9.15.6",
     "http2": "^3.3.7",
     "rea": "0.0.1",
     "react": "^16.8.6",

frontend/src/Documents/CodeBlock.tsx

@@ -0,0 +1,63 @@
+/* tslint:disable: blueprint-html-components */
+
+import hljs from "highlight.js";
+import * as React from "react";
+
+import * as darkStyle from "highlight.js/styles/a11y-dark.css";
+import * as lightStyle from "highlight.js/styles/a11y-light.css";
+
+export interface ICodeBlockProps {
+    value: string;
+    language?: string;
+
+    darkMode: boolean;
+}
+
+interface ICodeBlockState {
+    ref: HTMLElement | null;
+}
+
+export class CodeBlock extends React.PureComponent<
+    ICodeBlockProps,
+    ICodeBlockState
+> {
+    constructor(props: ICodeBlockProps) {
+        super(props);
+
+        this.setRef = this.setRef.bind(this);
+        this.state = { ref: null };
+    }
+
+    public render() {
+        console.log(darkStyle);
+        return (
+            <pre>
+                <code
+                    ref={this.setRef}
+                    className={"lang-" + this.props.language}
+                    style={this.props.darkMode ? darkStyle : lightStyle}
+                >
+                    {this.props.value}
+                </code>
+            </pre>
+        );
+    }
+
+    public componentDidMount() {
+        this.highlightCode();
+    }
+
+    public componentDidUpdate() {
+        this.highlightCode();
+    }
+
+    private highlightCode() {
+        if (this.state.ref) {
+            hljs.highlightBlock(this.state.ref);
+        }
+    }
+
+    private setRef(ref: HTMLElement) {
+        this.setState({ ref });
+    }
+}

frontend/src/Documents/DocumentView.tsx

@@ -10,12 +10,16 @@ import { IDocumentJSON } from "~../../src/entity/Document";
 import { LoadingStub } from "~LoadingStub";
 import { fetchDocsStart } from "~redux/docs/actions";
 import { IAppState } from "~redux/reducers";
+import { CodeBlock } from "./CodeBlock";
 
 export interface IDocumentViewComponentProps extends RouteComponentProps {
     allDocs: { [key: number]: IDocumentJSON };
 
     fetching: boolean;
     spinner: boolean;
+
+    darkMode: boolean;
+
     fetchDocs: () => void;
 }
 
@@ -25,6 +29,7 @@ export class DocumentViewComponent extends React.PureComponent<
 > {
     public render() {
         const { id } = this.props.match.params as any;
+        const { darkMode } = this.props;
         if (this.props.allDocs && this.props.allDocs[id]) {
             const doc = this.props.allDocs[id];
             return (
@@ -42,7 +47,19 @@ export class DocumentViewComponent extends React.PureComponent<
                         </div>
                     </div>
                     <div className="documentContents">
-                        <Markdown source={doc.content} />
+                        <Markdown
+                            source={doc.content}
+                            renderers={{
+                                code: props => {
+                                    return (
+                                        <CodeBlock
+                                            {...props}
+                                            darkMode={darkMode}
+                                        />
+                                    );
+                                },
+                            }}
+                        />
                     </div>
                 </div>
             );
@@ -69,6 +86,8 @@ function mapStateToProps(state: IAppState) {
         allDocs: state.docs.all,
         fetching: state.docs.fetching,
         spinner: state.docs.spinner,
+
+        darkMode: state.localSettings.darkMode,
     };
 }