Release 2.0.0
New features
Re-exporting Prism's grammars
Prism's grammars are now re-exported. These grammars automatically import required dependencies. Optional dependencies are handled at runtime, so import order usually won't matter.
import "prism-code-editor/grammars/markup"
import "prism-code-editor/grammars/css-extras"
import "prism-code-editor/grammars/js-extras"
This means prismjs
is now longer a necessary dependency in your projects.
Bracket matching in markup
Bracket matching has been added to markup languages like HTML by modifying their grammars. All themes style these brackets with color: inherit
to disable rainbow brackets. If you want to style them, use the CSS selector .token.markup-bracket.punctuation
.
Extra folding features
You can now import a provider that allows folding of titles and code blocks in markdown. Folding of block comments is now optional. To enable them, pass them to the readOnlyCodeFolding
extension when creating it.
import {
markdownFolding, blockCommentFolding, readOnlyCodeFolding
} from "prism-code-editor/code-folding"
import "prism-code-editor/languages/html"
const editor = createEditor(
"#editor",
{ language: "markdown" },
readOnlyCodeFolding(markdownFolding, blockCommentFolding)
)
New tag highlighting feature
Added an extension that highlights <
and >
punctuation in XML tags.
import { highlightTagPunctuation } from "prism-code-editor/match-tags"
Breaking changes
- It's no longer possible to use your own Prism instance.
- You can now longer import languages from
prismjs
without definingwindow.Prism
. Import languages fromprism-code-editor/grammars/*
instead. prism-code-editor/prism-core
has been removed. If you want access to the Prism instance, import it fromprism-code-editor
instead.prism-code-editor/prism-markdown
has been removed too. Importprism-code-editor/grammars/markdown
instead.- The
Prism
parameter has been removed from all functions in the library which simplifies many APIs. - The
languages
import from the core has now been renamed tolanguageMap
. - The utilities
regexEscape
,getLineBefore
,getLines
,getClosestToken
,getLanguage
,insertText
andgetModifierCode
are now exported fromprism-code-editor/utils
instead of the core.
Changed class names
Most class names have been prefixed to make style conflicts much less likely. If you've overridden some of the styles, chances are you'll need to change some selectors. Here's a list of all classes that have been changed:
prism-editor
toprism-code-editor
prism-editor-wrapper
topce-wrapper
editor-overlays
topce-overlays
code-line
topce-line
word-wrap
topce-wrap
no-word-wrap
topce-nowrap
readonly
topce-readonly
no-selection
topce-no-selection
rtl-editor
topce-rtl
search-input
topce-input
use-regexp
topce-regex
whole-word
topce-whole
find-in-selection
topce-in-selection
match-count
topce-match-count
search-options
topce-options
find
topce-find
replace
topce-replace
has-error
topce-error
search-matches
topce-matches
editor-copy
topce-copy
fold-placeholder
topce-unfold
fold-line-btn
topce-fold
Improvements/fixes
- The
matchTags
extensions would add a new selection change handler every timeeditor.setOptions
was called. This has been fixed. - The multiline flag is now enabled when doing RegExp search in the search widget. This means that
^
and$
now match the beginning/end on lines instead of the whole code. - The
$
character is now escaped when executing replace all in the search widget since it has special functionality. - Tag matching now works with all languages instead of just a handful.
- Changed the default margin on
.pce-wrapper
from0.75em 0
to0.5em 0
. - Fixed a Safari bug where the search highlight wouldn't be removed when switching focus back to the editor.
- Small improvements to most of the themes.