diff --git a/frontend/src/css/file-history.css b/frontend/src/css/file-history.css
index 2c7d58370a..4aa801c5df 100644
--- a/frontend/src/css/file-history.css
+++ b/frontend/src/css/file-history.css
@@ -29,20 +29,20 @@
 }
 
 .content-viewer {
+  flex: 1;
+  display: flex;
+  min-height: 0;
+}
+
+.content-viewer .sf-slate-viewer-scroll-container {
   background-color: #fafaf9;
-  border-radius: 10px;
-  overflow: auto;
+  padding: 20px 40px;
+  display: block;
 }
 
-.markdown-viewer-render-content {
-  background-color: #fff;
-  word-break: break-word;
-  margin: 20px 40px;
-  border: 1px solid #e6e6dd;
-}
-
-.markdown-viewer-render-content .diff-view {
-  padding: 40px 60px;
+.content-viewer .sf-slate-viewer-article-container .article {
+  width: 100%;
+  max-width: 100%;
 }
 
 .panel-header {
@@ -124,10 +124,14 @@
   .history-content .main-panel {
     max-width: 100%;
   }
-  .markdown-viewer-render-content {
-    margin: 20px;
+  .content-viewer .sf-slate-viewer-scroll-container {
+    padding: 20px;
   }
-  .markdown-viewer-render-content .diff-view {
+  .content-viewer .sf-slate-viewer-article-container {
+    margin: 0;
+    padding: 0;
+  }
+  .content-viewer .sf-slate-viewer-article-container .article {
     padding: 20px;
   }
 }
diff --git a/frontend/src/file-history.js b/frontend/src/file-history.js
index a1006dd836..dafd2a7ac7 100644
--- a/frontend/src/file-history.js
+++ b/frontend/src/file-history.js
@@ -31,27 +31,13 @@ class FileHistory extends React.Component {
 
   onHistoryItemClick = (item, preItem)=> {
     this.setState({renderingContent: true});
-    if (preItem) {
+    seafileAPI.getFileRevision(historyRepoID, item.commit_id, item.path).then((res) => {
       axios.all([
-        seafileAPI.getFileRevision(historyRepoID, item.commit_id, item.path),
-        seafileAPI.getFileRevision(historyRepoID, preItem.commit_id, preItem.path)
-      ]).then(axios.spread((res, res1) => {
-        axios.all([
-          seafileAPI.getFileContent(res.data),
-          seafileAPI.getFileContent(res1.data)
-        ]).then(axios.spread((content1, content2) => {
-          this.setDiffContent(content1.data, content2.data);
-        }));
+        seafileAPI.getFileContent(res.data),
+      ]).then(axios.spread((content1) => {
+        this.setDiffContent(content1.data, '');
       }));
-    } else {
-      seafileAPI.getFileRevision(historyRepoID, item.commit_id, item.path).then((res) => {
-        axios.all([
-          seafileAPI.getFileContent(res.data),
-        ]).then(axios.spread((content1) => {
-          this.setDiffContent(content1.data, '');
-        }));
-      });
-    }
+    });
   };
 
   onBackClick = (event) => {
diff --git a/frontend/src/pages/file-history/main-panel.js b/frontend/src/pages/file-history/main-panel.js
index bc14592aaa..b0c84da8e9 100644
--- a/frontend/src/pages/file-history/main-panel.js
+++ b/frontend/src/pages/file-history/main-panel.js
@@ -1,11 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Prism from 'prismjs';
-import { DiffViewer } from '@seafile/seafile-editor';
+import { MarkdownViewer } from '@seafile/seafile-editor';
 import Loading from '../../components/loading';
 import { mediaUrl } from '../../utils/constants';
 
-const contentClass = 'markdown-viewer-render-content';
 const propTypes = {
   renderingContent: PropTypes.bool.isRequired,
   content: PropTypes.string,
@@ -24,19 +23,18 @@ class MainPanel extends React.Component {
   };
 
   render() {
+    const { renderingContent, newMarkdownContent } = this.props;
     return (
       <div className="content-viewer flex-fill">
-        <div className={contentClass}>
-          {this.props.renderingContent ?
-            (<Loading />) :
-            (<div className="diff-view article">
-              <DiffViewer
-                scriptSource={mediaUrl + 'js/mathjax/tex-svg.js'}
-                newMarkdownContent={this.props.newMarkdownContent}
-                oldMarkdownContent={this.props.oldMarkdownContent}
-              />
-            </div>)}
-        </div>
+        {renderingContent && <Loading />}
+        {!renderingContent && (
+          <MarkdownViewer
+            isFetching={renderingContent}
+            value={newMarkdownContent}
+            isShowOutline={false}
+            mathJaxSource={mediaUrl + 'js/mathjax/tex-svg.js'}
+          />
+        )}
       </div>
     );
   }