A CodeMirror (v6) extension for adding relative line numbers to your code editor

Last update: Feb 7, 2022

Overview

Relative Line Numbers for CM6

Installation

yarn add codemirror-line-numbers-relative

Usage

import { EditorView } from "@codemirror/view";
import { EditorState } from "@codemirror/state";
import { lineNumbersRelative } from "codemirror-line-numbers-relative";

new EditorView({
  state: EditorState.create({
    doc: `hello world!
who doesn't love relative line numbers?`,
    extensions: [lineNumbersRelative()],
  }),
  parent: document.querySelector("#editor"),
});

Credit

This wouldn't be possible these resources:

Statistics plugin for RemNote that will give you some helpful numbers, charts and heatmap for your knowledge base.

RemNote statistics plugin Features This plugin will give you the following statistics: Retention rate Number of cards due in future Type of buttons yo

Sep 9, 2022

Replaces the default Strapi WYSIWYG editor with a customized build of CKEditor 5 html editor packed with useful plugins.

CKEditor 5 for Strapi Replaces the default Strapi WYSIWYG editor with a customized build of CKEditor 5 packed with useful plugins. 👋 Get Started Feat

Jan 2, 2023

Powerful rich text editor using Vue.js and Quill. About @quilljs editor component for @vuejs

quill-vuejs Quill editor component for Vue. 基于 Quill、适用于 Vue 的富文本编辑器，支持服务端渲染和单页应用。 Preview Example CDN example page Component example page Install NPM

Aug 10, 2022

Triumph Tech’s Magnus Editor is a full-featured remote editor for Rock RMS.

Magnus Visual Studio Code Editor for Rock RMS Triumph Tech’s Magnus Editor is a full-featured remote editor for Rock RMS. Rock RMS is an open source R

Nov 23, 2022

VS Code extension that adds a red error squiggle to every word in your code.

Dumbisense Dumbisense is a VS Code extension that adds a red error squiggle to every word in your code, with an interesting error message and dino ima

Sep 3, 2022

no-comma is a javascript library for dealing with inputted numbers that include commas

no-comma no-comma is a javascript library for dealing with inputted numbers that include commas. Nocomma will allow you to check if the number contain

Jan 27, 2022

Kyrgyz / Kazakh numbers-to-words converter

Mar 12, 2022

🌐 Text Input Component for validating and formatting international phone numbers.

React Native Intl Phone Field Try the Expo Snack 👏 🕹️ Demo It's a javascript-only (no native code) component that can run in iOS, Android, Expo & Re

Jul 8, 2022

This package will generate n numbers of thumbnails at different positions in a given video file.

The smallest library to generate video thumbnails on client side. About Generate n numbers of Image thumbnails of a video file. !Live Demo code sandbo

Dec 20, 2022

Comments

Current line always displays 0 instead of absolute line number

Usual relative line number behavior shows the absolute line number for the line the cursor is on; however, this plugin displays 0. It would be great to see this changed to the normal behavior.

Thanks!
enhancement

opened by jdluque 5
Inconsistencies when using package

I'm not sure what's going on but in this CodeSandbox, it's showing the line number on in the relative line numbers gutter (when it should show an empty space).

In this CodeSandbox, the gutters are out of order.

I don't know if this is a bug or something else.

opened by jsjoeio 2
Support two gutters
It would be great to support two gutters and show the absolute line number in the left gutter and relative line numbers in the right.

Some progress here: https://codesandbox.io/s/cm6-relative-line-numbers-ts-without-package-jgoyk

Resources:

https://github.com/codemirror/website/blob/master/site/examples/gutter/gutters.ts

https://codemirror.net/6/examples/gutter/

https://github.com/codemirror/codemirror.next/issues/677

https://github.com/codemirror/gutter/blob/main/src/index.ts#L453

https://codemirror.net/6/docs/ref/#gutter
opened by jsjoeio 2

Owner

Joe Previte

Co-maintainer @coder/code-server

GitHub

A VS Code extension to practice and improve your typing speed right inside your code editor. Practice with simple words or code snippets.

Warm Up ?? ??‍?? A VS Code extension to practice and improve your typing speed right inside your code editor. Practice with simple words or code snipp

34 Dec 12, 2022

Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

3 May 18, 2022

Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

4 May 3, 2022

Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

14 Jan 3, 2023

🦚 Beautiful themes for CodeMirror

ThemeMirror Beautiful themes for CodeMirror Install npm install thememirror

119 Dec 27, 2022

An Obsidian plugin that allows adding iframes with custom styling as editor tabs. Also comes with presets for Google Keep and more.

Obsidian Custom Frames An Obsidian plugin that turns web apps into panes using iframes with custom styling. Also comes with presets for Google Keep an

208 Jan 8, 2023