Embed code editor in the websites

Let’s keep this short and talk on point. Let’s make our own code editor in React with just 5 lines of code.

Let’ start by creating our react application

npx create-react-app react-editor
cd react-editor
npm start

If you see the react logo on the webpage, you are good to go! Let’s now install our key package and make our code work!

npm i react-ace-editor

Now let’s add this to our App.js and get the editor on the screen!

import './App.css';
import AceEditor from "react-ace-editor";
function App() {
return (
<div className="App">
<AceEditor />
</div>
);}
export default App;

Okay! So this was simple, right? Syntax highlighting is one strategy to improve the readability and context of the text.

So now let's add language recognition and themes to our code editor.

import './App.css';
import AceEditor from "react-ace-editor";
import 'brace/mode/c_cpp';
import 'brace/theme/terminal';
function App() {
return (
<div className="App">
<AceEditor className="editor" mode="c_cpp" theme="terminal" />
</div>
);}
export default App;

Ace can be expanded to have a lot more functionality other than changing themes and modes. Feel free to check out the documentation to get to know how to add value to your code.

Ace - The High-Performance Code Editor for the Web

To get the full source code of this code editor you can check out my GitHub repository:

Aniket762/code-editor

Undoubtedly, Code editor will make your web application more appealing and attractive to your users. But how about making your own compiler as well? Do let me know in the comments if I should write a blog on it as well!