update npm

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "homepage": "https://smartcontractprogrammer.com",
   "dependencies": {
-    "highlight.js": "^9.18.1",
+    "highlight.js": "^10.0.3",
     "highlightjs-solidity": "^1.0.15",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
@@ -47,7 +47,7 @@
     "marked": "^1.1.0",
     "mustache": "^4.0.1",
     "react-snap": "^1.23.0",
-    "serve": "^11.3.0",
+    "serve": "^11.3.1",
     "yaml": "^1.10.0"
   },
   "jest": {

src/components/Html.js

@@ -1,17 +1,15 @@
-import React, { useEffect } from "react"
+import React from "react"
 import PropTypes from "prop-types"
 import hljs from "highlight.js"
 import "highlight.js/styles/atom-one-dark.css"
 import hljsDefineSolidity from "highlightjs-solidity"
 
+hljsDefineSolidity(hljs)
+hljs.initHighlightingOnLoad()
+
 function Html(props) {
   const { html } = props
 
-  useEffect(() => {
-    hljsDefineSolidity(hljs)
-    hljs.initHighlightingOnLoad()
-  }, [])
-
   return <div dangerouslySetInnerHTML={{ __html: html }}></div>
 }
 

src/components/SideNav.js

@@ -1,7 +1,7 @@
-import React from "react"
 import PropTypes from "prop-types"
+import React from "react"
 import { withRouter } from "react-router-dom"
-import { List, Divider, Icon } from "semantic-ui-react"
+import { Divider, Icon, List } from "semantic-ui-react"
 import styles from "./SideNav.module.css"
 
 export function SideNav(props) {
@@ -14,6 +14,8 @@ export function SideNav(props) {
   // NOTE: using Link does not load highlight.js so he use anchor to navigate
   // TODO FIX - use react router, load syntax highlight, reset scroll by document.getElementById("root").scrollTo(0, 0)
 
+  // TODO - fix position side nav header
+
   return (
     <div className={styles.component}>
       <div className={styles.sideNav}>