Seaching

The prism-code-editor/search entry point exports extensions for searching editors and highlighting and replacing the matches. On this page, you can view the different extensions for searching.

Search extensions

showInvisibles

showInvisibles() highlights all selected spaces and tabs in the editor. To highlight all spaces and tabs instead, use tokenizeInvisibles().

Styles from prism-code-editor/invisibles.css are required by the extension. The default color of these highlights works well for most dark themes, but light themes should use the CSS variable --pce-invisibles to override the color.

import { showInvisibles } from "prism-code-editor/search"

import "prism-code-editor/invisibles.css"

editor.addExtensions(showInvisibles())

highlightSelectionMatches

highlightSelectionMatches() is an extension that highlights other instances of the current selection. This extension is also present on all editors on this website. The CSS variable --pce-selection-match can be used to set the background of the matches. All included themes assign this variable.

import { highlightSelectionMatches } from "prism-code-editor/search"

editor.addExtensions(highlightSelectionMatches())

highlightCurrentWord

highlightCurrentWord() highlights instances of the word the cursor is currently on. You can define a filter function to control what gets highlighted. I.e. in JavaScript, you may want to exclude any words that start inside a string, comment, keyword, or regex token. The CSS selector .word-matches span can be used to style the matches. All included themes add a background to this selector.

import { highlightCurrentWord } from "prism-code-editor/search"

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

const selector = ".string, .comment, .keyword, .regex"

editor.addExtensions(

highlightCurrentWord(start => !getClosestToken(editor, selector, 0, 0, start))

)

The editor above has this extension added with the filter function shown.

Search widget

This is easily the most complex extension on this page. searchWidget() adds a widget to the editor allowing users to search the editor with strings or regular expressions and replace the matches.

The default styles for the widget can be imported from prism-code-editor/search.css. If you’re dissatisfied with these styles, you can import your own instead.

The widget can be opened with Ctrl+F (Cmd+F on Mac). Alternatively, you can use the button below to try it on mobile.

Open widget

import { searchWidget } from "prism-code-editor/search"

import "prism-code-editor/search.css"

editor.addExtensions(searchWidget())

APIs

If you want to create your own extensions that do searching, use createSearchAPI() or createReplaceAPI() exported from prism-code-editor/search/api.