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

@uiw/codemirror-extensions-basic-setup

Package Overview
Dependencies
Maintainers
2
Versions
84
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@uiw/codemirror-extensions-basic-setup

Basic configuration for the CodeMirror6 code editor.

  • 4.23.2
  • Source
  • npm
  • Socket score

Version published
Maintainers
2
Created

What is @uiw/codemirror-extensions-basic-setup?

@uiw/codemirror-extensions-basic-setup is an npm package that provides a set of basic extensions for CodeMirror 6, a versatile text editor implemented in JavaScript for the browser. This package includes a collection of commonly used extensions to set up a basic CodeMirror editor with essential functionalities such as syntax highlighting, line numbers, and more.

What are @uiw/codemirror-extensions-basic-setup's main functionalities?

Basic Setup

This code demonstrates how to set up a basic CodeMirror editor with the `basicSetup` extension. It initializes the editor state with a document and applies the basic setup extensions, then creates an editor view and attaches it to the DOM.

import { basicSetup } from '@uiw/codemirror-extensions-basic-setup';
import { EditorState } from '@codemirror/state';
import { EditorView } from '@codemirror/view';

const state = EditorState.create({
  doc: 'Hello, CodeMirror!',
  extensions: [basicSetup]
});

const view = new EditorView({
  state,
  parent: document.body
});

Syntax Highlighting

This code sample shows how to add JavaScript syntax highlighting to the CodeMirror editor using the `basicSetup` extension along with the `@codemirror/lang-javascript` package.

import { basicSetup } from '@uiw/codemirror-extensions-basic-setup';
import { EditorState } from '@codemirror/state';
import { EditorView } from '@codemirror/view';
import { javascript } from '@codemirror/lang-javascript';

const state = EditorState.create({
  doc: 'const x = 10;',
  extensions: [basicSetup, javascript()]
});

const view = new EditorView({
  state,
  parent: document.body
});

Line Numbers

This example demonstrates how to enable line numbers in the CodeMirror editor using the `basicSetup` extension along with the `lineNumbers` extension from `@codemirror/view`.

import { basicSetup } from '@uiw/codemirror-extensions-basic-setup';
import { EditorState } from '@codemirror/state';
import { EditorView } from '@codemirror/view';
import { lineNumbers } from '@codemirror/view';

const state = EditorState.create({
  doc: 'Line 1\nLine 2\nLine 3',
  extensions: [basicSetup, lineNumbers()]
});

const view = new EditorView({
  state,
  parent: document.body
});

Other packages similar to @uiw/codemirror-extensions-basic-setup

Keywords

FAQs

Package last updated on 10 Sep 2024

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