Thursday 29 June 2023

On the web how do you make the code be highlighted as the user is typing it? I only managed to make it that the code is highlighted on button click

In my PicoBlaze Simulator in JavaScript, I managed to program that, when the user presses the button "Highlight Assembly", the assembly code is highlighted. But the cursor is then moved to the beginning of the assembly program. How could I make it so that the assembly code is highlighted as the user is typing it?

I have tried it this way:
In the footerscript.js I added the following (and I commented it out when I realized it isn't working):

// For now, attempting to highlight code as the user is typing is worse
// than useless, because it moves the cursor to the beginning.
/*
document.getElementById("assemblyCode").
       oninput=syntaxHighlighter;
*/

In the footerScript.js file, I added the following code at the beginning of the syntaxHighlighter function:

function syntaxHighlighter(/*edit*/) {
  //"edit" should contain the
  // cursor position, but that
  // seems not to work.
  if (areWeHighlighting)
    return;
  areWeHighlighting = true;
  const assemblyCodeDiv = document.getElementById("assemblyCode");
  const assemblyCode = assemblyCodeDiv.innerText.replace(/&/g, "&")
                           .replace(/</g, "&lt;")
                           .replace(/>/g, "&gt;");
  // const start=edit.selectionStart,
  //  end=edit.selectionEnd; //Cursor position.

And, at the end of the syntaxHighlighter function, in that same file, I added the following:

  assemblyCodeDiv.innerHTML = highlightedText;
  // The following code is supposed to move the cursor to the correct
  // position, but it doesn't work.
  /*
  const range=document.createRange();
  range.setStart(assemblyCodeDiv,start);
  range.setEnd(assemblyCodeDiv,end);
  const selection=window.getSelection();
  selection.removeAllRanges();
  selection.addRange(range);
  */

However, that's not working, so I commented it out. Why doesn't it work? How do I make it work?

It is important to me that my PicoBlaze Simulator continues working in Firefox 52 (the last version of Firefox to work on Windows XP), as many computers at my university run Windows XP and use Firefox 52 as the browser.



from On the web, how do you make the code be highlighted as the user is typing it? I only managed to make it that the code is highlighted on button click

No comments:

Post a Comment