Custom Cursor

By default, the editor uses the textarea’s native cursor. This is often sufficient, but the cursorPosition() extension and selectionChange events make it trivial to use a custom element to replace the cursor. This is what the customCursor() extension does.

All editors on this page have customCursor() added, so try it below:

import {
	cursorPosition,
	customCursor,
	type CursorConfig
} from "prism-code-editor/cursor"
// Required by the customCursor extension
import "prism-code-editor/cursor.css"

editor.addExtensions(cursorPosition(), customCursor())

Customizing the cursor

To customize the appearance of the cursor, use the --pce-cursor CSS variable to change the cursor’s color and the .pce-cursor selector to apply styles directly. Below are some examples of what can be changed using CSS.

/* Higher specificity to override default styles */
.pce-cursor.pce-cursor {
	/* Changing the cursor's width */
	width: 2px;
	/* Animating the position */
	transition: top 0.1s ease-out, left 0.1s ease-out;
	/* Changing the blinking animation duration */
	animation-duration: 1.06s;
	/* Making the blinking animation smooth */
	animation-timing-function: linear;
}

/* Hiding the cursor when text is selected */
.pce-has-selection .pce-cursor {
	display: none;
}

Below you can toggle some of the styles shown above for all editors on this page:

Animate position Smooth blinking animation Hide when selecting text

Displaying document position

Other useful functionality in an editor is displaying the cursor’s line and column in the document. To make this easier, this library exports a getDocumentPosition() utility. The resulting document position is displayed below the following editor.

import { getDocumentPosition } from "prism-code-editor/utils"

const positionText = document.querySelector(".document-pos")
const selectedText = document.querySelector(".selected-chars")

editor.on("selectionChange", () => {
	const [line, column, selected] = getDocumentPosition(editor)

	positionText.textContent = `Ln ${line}, Col ${column}`
	selectedText.textContent = `${selected} selected`
})

Ln 1, Col 10 selected