Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

codemirror

Package Overview
Dependencies
Maintainers
1
Versions
151
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

codemirror

Basic configuration for the CodeMirror code editor

  • 6.0.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
2.3M
increased by5.93%
Maintainers
1
Weekly downloads
 
Created

What is codemirror?

CodeMirror is a versatile text editor implemented in JavaScript for the browser. It is specialized for editing code and comes with a number of language modes and addons that implement more advanced editing functionality. A rich programming API and a CSS theming system are available for customizing CodeMirror to fit the needs of the project.

What are codemirror's main functionalities?

Syntax highlighting

This feature allows for syntax highlighting of code written in various programming languages. The example code initializes a CodeMirror instance with JavaScript syntax highlighting.

var editor = CodeMirror.fromTextArea(document.getElementById('code'), {mode: 'javascript'});

Code editing

CodeMirror provides a rich text editor for code, with features like auto-indentation, line numbers, and bracket matching. The example code creates an editor instance with some JavaScript code pre-filled.

var editor = CodeMirror(document.body, {value: 'function myScript(){return 100;}', mode: 'javascript'});

Autocompletion

Autocompletion can be enabled to suggest completions for the current token. The example code sets up an event listener to trigger autocompletion on certain inputs.

editor.on('inputRead', function onChange(editor, input) { if (input.text[0] === ';' || input.text[0] === ' ') { return; } CodeMirror.commands.autocomplete(editor); });

Themes

CodeMirror supports various themes to customize the appearance of the editor. The example code initializes a CodeMirror instance with the Monokai theme.

var editor = CodeMirror.fromTextArea(document.getElementById('code'), {mode: 'javascript', theme: 'monokai'});

Addons

CodeMirror has a variety of addons that can extend its functionality, such as displaying line numbers or matching brackets. The example code enables line numbers and bracket matching for the editor.

var editor = CodeMirror.fromTextArea(document.getElementById('code'), {mode: 'javascript', lineNumbers: true, matchBrackets: true});

Other packages similar to codemirror

Keywords

FAQs

Package last updated on 30 Jun 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc