add ace editor

package.json

@@ -56,6 +56,7 @@
     "qrcode": "^1.3.3",
     "qs": "^6.7.0",
     "react": "^16.8.6",
+    "react-ace": "^8.0.0",
     "react-app-polyfill": "^0.2.2",
     "react-copy-to-clipboard": "^5.0.1",
     "react-dev-utils": "^8.0.0",

src/components/python/index.js

 import React, { Component } from 'react';
 import {CopyToClipboard} from 'react-copy-to-clipboard';
+import AceEditor from 'react-ace';
 import { Toast } from "antd-mobile"
 import {HeaderBar} from '@/common';
 import { browser, http, getParam } from '@/utils';
 import './index.scss';
+import 'ace-builds/src-noconflict/mode-python';
+import 'ace-builds/src-noconflict/theme-dracula';
 
 class PythonClass extends Component {
 
@@ -115,6 +118,22 @@ class PythonClass extends Component {
   }
 }
 
+function SelfAceEditor(props) {
+  return (
+    <AceEditor 
+      mode="python"
+      theme="dracula"
+      readOnly={true}
+      showPrintMargin={false}
+      value={props.code}
+      style={{
+        width: '100%',
+        height: '100%'
+      }}
+    />
+  )
+}
+
 function PythonContent(props) {
   const { 
     isWechat, 
@@ -214,17 +233,17 @@ function PythonContent(props) {
           {entryMode !== 0 && isShare? `这是Ta的第${code_lines}行代码` : '运行结果'}
         </h4>
         <div className="python-code__content">
-          {entryMode !== 0 && isShare? code : result}
+          <SelfAceEditor code={entryMode !== 0 && isShare? code : result} />
         </div>
         <h4 className="python-code__title">{entryMode === 0? '代码' : '运行结果'}</h4>
         <div className="python-code__content">
           {
             entryMode === 0 && 
-            <p>{code}</p>
+            <SelfAceEditor code={code} />
           }
           {
             entryMode !== 0 && 
-            <p>{isExecute? result : ''}</p>
+            <SelfAceEditor code={isExecute? result : ''} />
           }
           {
             (entryMode !== 0 && isShare && !isExecute) &&

src/components/python/index.scss

@@ -163,4 +163,8 @@
   height: 100%;
   background-color: rgba(0, 0, 0, .3);
   z-index: 99;
+}
+
+.ace_mobile-menu {
+  display: none;
 }
\ No newline at end of file

yarn.lock

@@ -1434,6 +1434,11 @@ accepts@~1.3.4, accepts@~1.3.5:
     mime-types "~2.1.18"
     negotiator "0.6.1"
 
+ace-builds@^1.4.6:
+  version "1.4.6"
+  resolved "https://registry.npm.taobao.org/ace-builds/download/ace-builds-1.4.6.tgz#ff6abd5f31472f33c1958ab99e0de6b63db3c964"
+  integrity sha1-/2q9XzFHLzPBlYq5ng3mtj2zyWQ=
+
 acorn-dynamic-import@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/acorn-dynamic-import/-/acorn-dynamic-import-3.0.0.tgz#901ceee4c7faaef7e07ad2a47e890675da50a278"
@@ -3681,6 +3686,11 @@ detect-port-alt@1.1.6:
     address "^1.0.1"
     debug "^2.6.0"
 
+diff-match-patch@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.npm.taobao.org/diff-match-patch/download/diff-match-patch-1.0.4.tgz#6ac4b55237463761c4daf0dc603eb869124744b1"
+  integrity sha1-asS1UjdGN2HE2vDcYD64aRJHRLE=
+
 diff@^3.2.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12"
@@ -6827,6 +6837,11 @@ lodash.debounce@^4.0.0:
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
   integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
 
+lodash.get@^4.4.2:
+  version "4.4.2"
+  resolved "https://registry.npm.taobao.org/lodash.get/download/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
+  integrity sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=
+
 lodash.isarguments@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz#2f573d85c6a24289ff00663b491c1d338ff3458a"
@@ -6837,6 +6852,11 @@ lodash.isarray@^3.0.0:
   resolved "https://registry.yarnpkg.com/lodash.isarray/-/lodash.isarray-3.0.4.tgz#79e4eb88c36a8122af86f844aa9bcd851b5fbb55"
   integrity sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U=
 
+lodash.isequal@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.npm.taobao.org/lodash.isequal/download/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
+  integrity sha1-QVxEePK8wwEgwizhDtMib30+GOA=
+
 lodash.keys@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/lodash.keys/-/lodash.keys-3.1.2.tgz#4dbc0472b156be50a0b286855d1bd0b0c656098a"
@@ -9249,6 +9269,17 @@ rc@^1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-ace@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.npm.taobao.org/react-ace/download/react-ace-8.0.0.tgz#e6fc155ec3cf240e92bdf2e156a50458a78ed0a4"
+  integrity sha1-5vwVXsPPJA6SvfLhVqUEWKeO0KQ=
+  dependencies:
+    ace-builds "^1.4.6"
+    diff-match-patch "^1.0.4"
+    lodash.get "^4.4.2"
+    lodash.isequal "^4.5.0"
+    prop-types "^15.7.2"
+
 react-app-polyfill@^0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/react-app-polyfill/-/react-app-polyfill-0.2.2.tgz#a903b61a8bfd9c5e5f16fc63bebe44d6922a44fb"