Отступ для редактора нестандартного кода на основе JavaScript - PullRequest
Новая
       0

Отступ для редактора нестандартного кода на основе JavaScript

0 голосов
/ 15 февраля 2019

Я делаю собственный редактор кода для собственного созданного языка.До сих пор я добился выделения синтаксиса с помощью класса span javascriprt.Теперь я хочу добавить правильный интервал или пространство табуляции перед вложенным циклом IF ELSE.Я не очень хорошо разбираюсь в javascript.

Ниже приведен код, который я написал до сих пор.

<!DOCTYPE html>
<html>
    <body>

        <style>
            .code-str { color: #008000; }
            .code-elem{ color: #ff0000;}
            .code-comment { color: #0000FF; }
        </style>



<textarea rows="20" cols="100" type="text" id="text2">Code to test

###IFLISTING:7786###

    replaces

###ENDIFLISTING:7786###


Paste this code in the text area below and see the magic </textarea>

        <textarea rows="20" cols="100" type="text" id="text1"></textarea>

        <button onclick="myFunction()">MAGIC</button>

        <script>
            function myFunction() {



                var str = document.getElementById("text1").value;

                str = str.replace(/###IF(.*?)###/g, '<span class="code-elem"></br> </br>###IF$1### </br></span>'); 
                str = str.replace(/###ENDIF(.*?)###/g, '<span class="code-elem"></br> ###ENDIF$1### </br></span>');
                str = str.replace(/###IFLISTING(.*?)###/g, '<span class="code-str">  ###IFLISTING$1### </span>');
                str = str.replace(/###ENDIFLISTING(.*?)###/g, '<span class="code-str">###ENDIFLISTING$1### </span>');
                str = str.replace(/###VAR(.*?)###/g, '<span class="code-comment"> ###VAR$1### </span>');
                 str = str.replace(/###LISTING(.*?)###/g, '<span class="code-comment">  ###LISTING$1### </span>');

                document.getElementById("demo").innerHTML = str;
            }
        </script>


        <p id="demo"></p>
    </body>
</html>

Это вывод кода

Теперь я хочу, чтобы вложенный цикл IF ELSE был четко виден справильный отступ.У меня есть грубое представление в моей голове.Я думаю, что я должен использовать цикл FOR, а затем использовать счетчик для увеличения числа IF и ELSE.Но я не знаю точно, как это сделать.Кто-нибудь может дать мне идею?

Я был бы очень благодарен за самую маленькую помощь или предложение.

1 Ответ

0 голосов
/ 15 февраля 2019

Вам нужно будет выполнить итерацию всех строк, а не только строк с соответствующими ключевыми словами, и затем сохранить текущий отступ , который вы увеличиваете для некоторых ключевых слов и уменьшаете для других.Я хотел бы сохранить такое влияние на отступы как свойство для каждого ключевого слова рядом со свойством стиля для них: 

const keywords = {
    IF: { style: "code-elem", indent: 4 },
    ENDIF: { style: "code-elem", indent: -4 },
    IFLISTING: { style: "code-str", indent: 4 },
    ENDIFLISTING: { style: "code-str", indent: -4 },
    VAR: { style: "code-comment", indent: 0 },
    LISTING: { style: "code-comment", indent: 0 } 
};

function myFunction() {
    let indent = 0;
    document.getElementById("demo").innerHTML = document.getElementById("text1").value.split(/[\r\n]+/).map(line => {
        const oldIndent = indent;
        line = line.trim().replace(/###([A-Z]+)(.*?)###/g, (m, keyword, arg) => {
            const param = keywords[keyword];
            if (!param) return m;
            indent += param.indent;
            return `<span class="${param.style}">${m}</span>`;
        });
        return "&nbsp;".repeat(Math.min(indent, oldIndent)) + line;
    }).join("<br>");
}
.code-str     { color: #080; }
.code-elem    { color: #f00;}
.code-comment { color: #00f; }
<textarea rows="15" cols="80" type="text" id="text1">###VAR:837:Single###
###IF:69154!=1###
###IF:69154!=1###
 ###VAR:69154:Single###x
###ENDIF:69154###
    ###VAR:69154:Single###x
###ENDIF:69154###
###VAR:990:Single### battery ###VAR:S301:Single###mAh (###VAR:S302:Single###V) 
###IFLISTING:7785###
       replaces
   ###ENDIFLISTING:7785###
###IFLISTING:7786###
    replaces
###ENDIFLISTING:7786###
</textarea><br>
<button onclick="myFunction()">MAGIC</button>
<p id="demo"></p>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...