使用AceEditor：如何解析Acute( ` ) 字符并获取代码结构？

Question

我现在正在使用 React 开发一个网站，它包含 solidity 代码视图面板。编辑器看起来像下面 link 中的那个。 https://ftmscan.com/address/0xce761d788df608bd21bdd59d6f4b54b2e27f25bb#contracts

我已经使用 AceEditor 实现了类似的，可以通过安装 react-ace、ace-builds 模块获得。

代码是这样的


import "./styles.css";
import React from "react";
import { render } from "react-dom";
import AceEditor from "react-ace";

import "ace-builds/src-noconflict/mode-java";
import "ace-builds/src-noconflict/theme-github";
import "ace-builds/src-noconflict/ext-language_tools";
import { code } from "./code";

function onChange(newValue) {
  console.log("change", newValue);
}

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <AceEditor
        theme="github"
        onChange={onChange}
        name="UNIQUE_ID_OF_DIV"
        editorProps={{ $blockScrolling: true }}
        setOptions={{
          enableBasicAutocompletion: true,
          enableLiveAutocompletion: true,
          enableSnippets: true
        }}
        value={code}
        readOnly="true"
      />
    </div>
  );
}

我从 code.tsx 文件导入代码，当该代码包含锐音符时出现错误。

我的示例代码在 codesandbox 上，这里是 link。 https://codesandbox.io/s/dazzling-sun-0zj25?file=/src/index.js

我有 2 个问题。

如何解析里面有锐音符（`）的代码？正如您从我的示例代码中看到的那样，解析代码被分配给 value props 并且应该被尖角字符包裹，我无法解决包裹内部包含尖角字符的代码。
如你所见ftmstan site 我在上面提到过，你可以在代码视图面板的右上角看到轮廓按钮，它显示了 solidity 代码的结构。而且我无法理解如何获得像该站点那样的代码结构。

我们将不胜感激并提前致谢。

Answer 1

ace 网站有关于创建或导入新模式的说明https://ace.c9.io/#nav=higlighter. You can use that with the syntax from vscode extension https://github.com/juanfranblanco/vscode-solidity/blob/master/syntaxes/solidity.json

使用AceEditor：如何解析Acute( ` ) 字符并获取代码结构？

Using AceEditor: How to parse Acute( ` ) character and get code structure?

ace-editor

solidity