I want to create a Javascript Compiler in my React Blog [closed]

Question

Closed. This question needs to be more focused. It is not currently accepting answers.

Want to improve this question? Guide the asker to update the question so it focuses on a single, specific problem. Narrowing the question will help others answer the question concisely. You may edit the question if you feel you can improve it yourself. If edited, the question will be reviewed and might be reopened.

Closed 3 years ago.

Improve this question

I have just started my front end web developer career and I have recently created my own blog. The blog is created using react. Now, I wanted to add a functionality where users can write and execute javascript code in my blog.

For example, they should be able to run console.log and get the output. Now, I don't know how to add that functionality. For example, should I need to learn node and add server side development for that or should I add server less functions??? How can I add that functionality??.

Note: I'm well versed with HTML and CSS that's why I have started the blog.

PS: Will it be costly to implement that??? Is there a cheaper option?

Does this answer your question? How to safely run user-supplied Javascript code inside the browser? — Özgür Murat Sağdıçoğlu
– Özgür Murat Sağdıçoğlu, Commented Aug 29, 2022 at 5:52

Jonatan Kruszewski · Accepted Answer · 2022-08-29 05:56:55Z

You will want to use a code editor package from npm

I have found this one Monaco and looks like what you are asking for.

You can find a full tutorial here

A basic implementation would look like:

import React, { useState } from "react";

import Editor from "@monaco-editor/react";

const CodeEditorWindow = ({ onChange, language, code, theme }) => {
  const [value, setValue] = useState(code || "");

  const handleEditorChange = (value) => {
    setValue(value);
    onChange("code", value);
  };

  return (
    <div className="overlay rounded-md overflow-hidden w-full h-full shadow-4xl">
      <Editor
        height="85vh"
        width={`100%`}
        language={language || "javascript"}
        value={value}
        theme={theme}
        defaultValue="// some comment"
        onChange={handleEditorChange}
      />
    </div>
  );
};
export default CodeEditorWindow;

Collectives™ on Stack Overflow

I want to create a Javascript Compiler in my React Blog [closed]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related