If you are a front-end developer and have an idea to develop a code editor using react js then you can use Codemirror. It is an open-source JavaScript component that is used by developers to enable code editor in javascript-based applications. CodeMirror allows to implementation of a smooth code editor by using CodeMirror API.
Why CodeMirror?
CodeMirror has rich community support and provides frequent new release versions for developers. It is used to build a magnificent code editor with ReactJs and provides massive features like syntax highlighting, line numbers, autocompletion modularity, etc.
Here are some tips on how to use CodeMirror with ReactJs library -
Installation Guide
Install the CodeMirror package dependency with npm package manager or yarn inside your created ReactJs application folder
$ npm install @uiw/react-codemirror -- save
Now go to the react Js component and create a component file. In this file, you need to import the CodeMirror packages -
import CodeMirror from '@uiw/react-codemirror';
If you want to use any kind of editor theme like sublime-text and code editors theme like dracula So just import -
import 'codemirror/keymap/sublime';
Here is what the full code looks like -
import 'codemirror/keymap/sublime';
import 'codemirror/theme/monokai.css';
const code = 'const a = 0;';
<CodeMirror
value={code}
options={{
theme: 'monokai',
keyMap: 'sublime',
mode: 'jsx',
}}
/>
You can use your choice of programming modes and themes. Hope this installation guide helps.
No comments
If you have any doubts about any tutorial or if you want a new post related to open-source news, coding, Linux tips, and ticks then please free feel to ask here.