Auto hidding content that is longer than 600 characters long.

src/core/components/highlight-code.jsx

@@ -10,6 +10,7 @@ export default class HighlightCode extends Component {
 
   componentDidMount() {
     highlight(this.el)
+    this.setState({ contentsHidden: this.props.value.length > 600 })
   }
 
   componentDidUpdate() {
@@ -20,10 +21,28 @@ export default class HighlightCode extends Component {
     this.el = c
   }
 
+  onToggleSeeFullContents = () => {
+    this.setState({ contentsHidden: !this.state.contentsHidden })
+  }
+
   render () {
     let { value, className } = this.props
+    let contentsHidden = this.state && this.state.contentsHidden
     className = className || ""
 
-    return <pre ref={this.initializeComponent} className={className + " microlight"}>{ value }</pre>
+    return (
+      <div>
+        <pre
+          ref={this.initializeComponent}
+          className={className + " microlight" + (contentsHidden ? ' flat-bottom' : '')}>
+          { contentsHidden ? value.substring(0, 600) : value }
+        </pre>
+        { value.length > 600 &&
+          <div className='see-full-contents' onClick={this.onToggleSeeFullContents}>
+            { contentsHidden ? 'See full contents' : 'Collapse contents'}
+          </div>
+        }
+      </div>
+    )
   }
 }

src/style/_layout.scss

@@ -624,6 +624,34 @@
     {
         display: block;
     }
+
+    &.flat-bottom {
+      border-bottom-left-radius: 0px;
+      border-bottom-right-radius: 0px;
+    }
+}
+
+.see-full-contents {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  background: #7d8293;
+  padding: 5px 10px 5px;
+  border: 10px solid #41444e;
+  border-bottom-left-radius: 6px;
+  border-bottom-right-radius: 6px;
+  font-family: 'Titillium Web', sans-serif;
+  font-weight: 600;
+  color: white;
+  font-size: 14px;
+  bottom: 0px;
+  position: sticky;
+}
+
+.see-full-contents::after {
+  width: 100%;
+  height: 20px;
 }
 
 .scheme-container