Blanks in middle of the code line

[krishnagogada]

We want to achieve blanks in the middle of the code with syntax highlighting. Like below image

We explored but we didn't get any approaches.

To achieve this we used multiple code editors. For example, from the above image, we used a code editor from 1 to 11 lines, an HTML element in the 12th line, and another code editor from the 13th line.

As we won't be getting syntax highlighting for the 12th line, we have separately rendered a code editor having the 12th line contents as code. This code editor won't be visible to the user, and is solely rendered for getting syntax highlighting.

sum = id1 + id2

Now, we are copying the elements (with classnames) that got rendered inside the code editor, and replacing the id1 and id2 in the above expression with our Blanks (Input tags basically).

Is this method safe? Is there any other short way or the best way to achieve this kind of use case?

[nightwing]

The right method to implement this depends on the way you want the rest of the editor to behave, what other parts should be editable, should user be able to select all the code, etc. Could you tell more about your usecase?

[krishnagogada]

@nightwing Thank you for your reply

Usecase

1. Other parts of the code should be readonly
2. User can't select or copy the code
3. User can edit at custom blanks only.
4. No need of hidden cursors.

We faced few issues while working on our method.

We are getting syntax highlighting class names from this line of code editor.renderer.content.getElementsByClassName('ace_line')[0].children

From the children of ace_line element, we didn't get spaces and indentation. So we did some effort and calculate how many spaces between every word and then rendered.

Is there any way that we can get syntax highlighted HTML elements?

Like in Monaco Editor there is a method that we can get syntax highlighted HTML elements
check here

[nightwing]

See https://github.com/ajaxorg/ace/blob/master/demo/static-highlighter.html for an example of static highlighting.

[krishnagogada]

Thank you @nightwing

That helps us a lot.

[nokhalal-mahato]

We want to apply syntax highlighting in blanks which we have created in the middle of codes using input tag.

So in the above image we have kept input tags between static highlightings, from 0th character to '> ' symbol we have one static highlighting then we have an input tag(with my own styles) then another static highlighting (did in the same manner as the above developer @krishnagogada) .

So we want to apply syntax highlighting in that input tag.

Is there any way of creating blank in between codes with syntax highlighting?