How can I show the code in formatted form to user in react js-CodePudding

I am receiving the code from the backend in plain text format. Like below...

def countNegatives(matrix): count = 0 for row in matrix: for num in row: if num < 0: count  = 1 return count

It's in simple text form, but I want to display this to the user, and it should be well formatted. Like one below...

def countNegatives(matrix): 
    count = 0 
    for row in matrix: 
        for num in row: 
            if num < 0: 
                count  = 1 
    return count

Can someone provide me a way for doing this. Please help if possible...

CodePudding user response：

You can use prettier. There is probably some other code formatting libs out there. Using react, you wanna build yourself a custom hook for that.

CodePudding user response：

Thanks Raukaute, prettier is a good formatting lib. Playground of prettier is built by React prettier webworker. You can find the source code on Github, it is a good example. In a nutshell, the index.js create a WebWorker from static UMD js file (prettier/standalone.js) and call format API in App->Playground->PrettierFormat component.

CodePudding user response：

You should use the js-beautify to do this.
It's not perfect but works stable

NPM