Ace.js는 웹 페이지에 쉽게 삽입할 수 있는 텍스트 편집기입니다.이것은 각종 프로그래밍 언어에 대한 설명을 지원하는 기능을 제공합니다. 예를 들어 문법이 밝고 자동으로 축소되어 웹 페이지에서 프로그래밍 편집기를 만드는 데 매우 적합합니다.

이 문장의 목적

Ace.js는 이미 다양한 언어를 지원하는 기능을 제공했다.그러나 물론 모든 언어가 준비되지 않았고 지원에 포함되지 않은 언어도 있었다.특히 연구 목적으로 만들어진 프로그래밍 언어와 같은 부차적인 언어는 지원되지 않는다.하지만 에이스는 언어 지원 기능을 자제할 수 있는 구조를 준비했다.이 문서에서는 프로그래밍 언어 R-WHILE의 구문 강조 기능을 작성합니다.

설치편

환경 구축편는 R-WHILE의 구문 강조 기능 구현에 필요한 환경을 제공합니다mode-rwhile.js.구현 편에서 rwhile_highlight_rules.js 에서 구문 강조 규칙을 설명하여ace 텍스트 편집기에서 실제 R-WHILE 프로그램을 음영처리합니다.

구문 강조표시 기능 구현

R-WHILE 구문 규칙

R-WHILE 구문 규칙은 다음과 같습니다.

Variables   ∋ X, Y ::= X0 | X1 | ...
Expressions ∋ E, F ::= X | d | cons E F | hd E | tl E | =? E F
Patterns    ∋ Q, R ::= X | d | cons Q R
Commands    ∋ C, D ::= X ^= E | Q <= R | C; D
                      | if E then C else D fi F | from E do C loop D until F
Macro       ∋ M    ::= macro X ( X, ..., X ) C
Programs    ∋ P    ::= M* read X; C; write Y

Ace는 문법 규칙을 엄격히 제정함으로써 오류 표시 등 여러 가지 장점을 얻을 수 있지만 이 문장에서는 착색만 한다(힘들어지기 때문이다).여기서 착색할 것은 키워드macro와cons 등이며, 위의 규칙에는 기재되지 않았으며, 'name에 정의된 변수입니다.

구문 강조표시 규칙 정의

어떻게 착색하는지를 결정하기 때문에 실제로는 rwhile_highlight_rules.js에서 문법의 하이라이트 규칙을 묘사한다.rwhile_highlight_rules.js 아래와 같다.
rwhile_highlight_rules.js

...

var RwhileHighlightRules = function() {
  // キーワード
  var keyword = ("cons|hd|tl|if|fi|from|until|show|then|else|do|loop|read|write|macro");

  // 組み込み定数
  var builtinConstants = ("nil");

  var keywordMapper = this.createKeywordMapper({
    "keyword": keyword,
    "constant.language": builtinConstants,
  }, "identifier");

  // regexp must not have capturing parentheses. Use (?:) instead.
  // regexps are ordered -> the first match is used
  this.$rules = {
    "start": [
      {
        token: "comment", // multi line comment
        regex: "\\(\\*",
        next: "comment"
      }, {
        token: keywordMapper, // String, Array, or Function: the CSS token to apply
        regex: "[a-zA-Z_$][a-zA-Z0-9_$]*\\b", // String or RegExp: the regexp to match
      }, {
        token: "keyword.operator",
        regex: "\\^=|<=|=\\?"
      }, {
        token: "variable",
        regex: /'(?!\s|\.|;|,|\))/,
        next: "variable"
      }
    ],
    "variable": [
      {
        token: "variable",
        regex: /[a-zA-Z0-9](?=\s|\.|;|,|\))/,
        next: "start"
      }, {
        token: "variable",
        regex: /^\s*/,
        next: "start"
      }, {
        defaultToken: "variable"
      }
    ],
    "comment": [
      {
        token: "comment", // closing comment
        regex: "\\*\\)",
        next: "start"
      }, {
        defaultToken: "comment"
      }
    ]
  };
}

해설

의 초기 상태는 start이고 조건(regex)에 따라 넥스트variable, comment의 로봇으로 이동합니다.

token CSS와 관련됩니다.예를 들어, HTML은 다음과 같습니다.

<span class="ace_support ace_comment"> 文字列 </span>

token:"comment" 클래스에 해당하는 색상은 가져온 주제의 CSS에서 정의됩니다.또한 모든 테마에서 텍스트 편집기의 명칭에 따라 textmate를 지정하면 해당하는 색을 정의합니다.따라서 Visual Studio Code 및 Atom 구문 하이라이트 확장 기능 작성의 보도를 참고하여 각 상태의 반을 결정했다.

결과

환경 구축편 방법으로 ace_comment 를 만들고 mode-rwhile.js 를 사용하여 가져오면 올바르게 음영처리된 것을 볼 수 있습니다.

지원

R-WHILE 구문 강조 기능의 소스 코드는 여기 에서 볼 수 있습니다.

웹 페이지 정보

Ace 공식 문서

Ace 저장소

Visual Studio Code 및 Atom 구문 하이라이트 확장 기능 작성