[shared file view] markdown: display the 'table of content'

frontend/src/css/shared-file-view.css

@@ -47,6 +47,7 @@
   overflow: auto;
 }
 
+/*
 .shared-file-view-body .md-view {
   min-height: 400px;
   padding: 70px 75px;
@@ -57,6 +58,21 @@
   background: #fff;
   overflow: auto;
 }
+*/
+.shared-file-view-body .article {
+    min-height: calc(100% - 40px);
+    background: #fff;
+    padding: 40px 60px;
+    margin: 20px 40px;
+    border: 1px solid #e6e6dd;
+}
+
+.shared-file-view-body .seafile-markdown-outline {
+  position: static;
+  width: 300px;
+  border-left: 1px solid #e6e6dd;
+  flex-shrink: 0;
+}
 
 @media (max-width: 991.98px) {
   .shared-file-view-head {

frontend/src/shared-file-view-markdown.js

@@ -76,11 +76,11 @@ class FileContent extends React.Component {
 
     return (
       <div className="shared-file-view-body">
-        <div className="md-view">
+        <div className="md-view d-flex">
           <MarkdownViewer
             scriptSource={mediaUrl + 'js/mathjax/tex-svg.js'}
             markdownContent={this.state.markdownContent}
-            showTOC={false}
+            showTOC={true}
             serviceURL={serviceURL}
             sharedToken={sharedToken}
             repoID={repoID}