How to format source in code playground to show proper line numbers?

Question

I'm working on Code playground and I have loops protection inspired by CodePen.

When I have code like this:

function draw() {
    for (let i = 0; i < 1; ++i) {
        console.log(x());
    }
}

it's transformed into:

function draw() {
    for (let i = 0; i < 1; ++i) {
        if (__koduj__.should_break_loop(1)) {
            break;
        }
        console.log(x());
    }
    __koduj__.exit_loop(1);
}

if you run this code it will throw (that x is not defined) at line 6 which is user line 3.

I'm doing code transformation using esprima, estraverse, and escodegen:

const loop_types = ['ForStatement', 'ForOfStatement', 'ForInStatement', 'DoWhileStatement', 'WhileStatement'];

return function guard_loops(input) {
    loop_count = 0;
    const ast = esprima.parseScript(input);

    estraverse.traverse(ast, {
        enter: function (node, parent) {
            if (node.type === 'Program') {
                node.body = patch_body(node.body);
            } else if (node?.body?.type === 'BlockStatement') {
                node.body.body = patch_body(node.body.body);
            }
        }
    });

    return escodegen.generate(ast);
}

The patch_body function is handling the addition of code that breaks the loops.

Do you have any advice on how to handle this problem? I can think of only two approaches:

1. Use String replace and put the code after opening the curly brace (I don't want to do that).
2. Pretty print the code and format the lines so the additional lines appear on the same line as for loops
3. Calculate diff between the user code and my code and display the proper line number.

I have no idea how to handle any of the above. How should I handle this problem?

here is example page with for loop. If you run the code and Service Worker will be installed you can open the file ./_p5.js.