Styling

With setups

If you’re using the setups, most of the styling is handled for you. The only thing you must do is to pick a theme.

Changing the theme

To change the current theme with the setups, use the setOptions() method. Updating the theme is asynchronous, and the old theme is used until the new one loads.

editor.setOptions({
	theme: "night-owl"
})

Adding new themes

You can register new themes or override existing ones to use with the setups or web components.

	
import { registerTheme } from "prism-code-editor/themes"

registerTheme("my-theme", () => import("./my-theme.css?inline"))

Without setups

If you’re not using any of the setups, no styles will be injected into the page. Everything needs to be imported manually. This means that if you don’t like some of the default styles, you can import your own stylesheets instead.

Importing styles

prism-code-editor/layout.css: Styles for the layout of the component.
prism-code-editor/rtl-layout.css: Additional styles needed for the rtl option to work.
prism-code-editor/search.css. Styles for searchWidget().
prism-code-editor/copy-button.css: Styles for copyButton().
prism-code-editor/invisibles.css: Styles for showInvisibles().
prism-code-editor/guides.css: Styles for indentGuides().
prism-code-editor/cursor.css: Styles for customCursor().
prism-code-editor/code-folding.css: Styles for readOnlyCodeFolding().
prism-code-editor/autocomplete.css: Styles for autoComplete().
prism-code-editor/autocomplete-icons.css: Default icons for the autocompletion tooltip.

Importing themes

Themes can be imported from prism-code-editor/themes/*.css. There are currently 14 themes you can import. The playground showcases all themes.

You can also import themes into your JavaScript with loadTheme() which is used by the theme switcher in the playground.

import { loadTheme } from "prism-code-editor/themes"

const isLight = matchMedia("(prefers-color-scheme: light)").matches
const style = document.querySelector("style")

loadTheme(isLight ? "github-light" : "github-dark").then(theme => {
	style.textContent = theme
})

Scrollbar styling

You can import a stylesheet that adds a custom scrollbar to desktop Chrome and Safari from prism-code-editor/scrollbar.css.

.prism-code-editor {
	/* Values are: Hue, saturation, lightness */
	--pce-scrollbar: 210, 10%, 40%;
}

You can change the color of the scrollbar thumb using the custom property --pce-scrollbar. Different alpha values will be set based on the state of the scrollbar thumb.

CSS variables

The list below shows most of the CSS variables that can be used to customize the appearance of the editor. CSS variables that aren’t set by themes can also be used with the setups.

--padding-inline: Horizontal padding for the editor. Defaults to 0.75em.
--number-spacing: Spacing between line numbers and the code. Defaults to 0.75em.
--pce-bg: Background for the editor. Set by all themes.
--pce-cursor: Color of the editor’s cursor. Set by all themes.
--pce-selection: Background color for selected text. Set by all themes.
--pce-scroll-padding: Scroll padding to ensure the cursor isn’t too close to the edges while typing. Defaults to 2ch.
--pce-line-number: Text color for the line numbers. Set by all themes.
--pce-bg-highlight: Background for the line with the cursor.
--pce-border-highlight: Border for the line with the cursor.
--pce-selection-match: Background color of selection matches. Set by all themes.
--pce-scrollbar: See scrollbar styling. Set by all themes.
--pce-guide-indent: Indentation guide color. Set by all themes.
--pce-invisibles: Color used by the showInvisibles() extension. Defaults to #e3e4e229.
--pce-ac-match: Color of matched characters in completion options. Defaults to #52b1ff.
--pce-tabstop: Color of tab stop indicators. Defaults to #7c7c7c4d.
--pce-bg-fold: Color of the chevrons used to fold code. Defaults to #777.
--pce-widget-bg: Background for editor widgets. Set by all themes.
--pce-widget-color: Text color for editor widgets. Set by all themes.
--pce-widget-border: Border color for editor widgets. Set by all themes.
--pce-widget-bg-input: Background for input elements. Set by all themes.
--pce-widget-bg-active: Background for selected widget buttons. Set by all themes.
--pce-widget-bg-hover: Background for hovered widget buttons. Set by all themes.
--pce-widget-color-active: Text color for selected widget buttons. Set by all themes.
--pce-widget-focus: Focus ring color for widgets. Set by all themes.
--pce-widget-error: Border color for invalid input elements. Set by all themes.
--pce-widget-bg-error: Background for the error message popup. Set by all themes.
--pce-widget-color-options: Text color used by the bottom row in the search widget. Set by all themes.
--pce-search-match: Background for search matches. Set by all themes.

Advanced styling

The following document shows the DOM structure of an editor.

<div class="prism-code-editor language-[lang] [state-classes]">
	<!-- ::before pseudo element is the line number background -->
	<div class="pce-wrapper">
		<div class="pce-overlays">
			<textarea class="pce-textarea"></textarea>
			<!-- Overlays from extensions -->
		</div>
		<div class="pce-line active-line" aria-hidden="true">
			<!-- ::before pseudo element is the line number -->
			<!-- Prism tokens for the line -->
			<!-- ::after pseudo element has the background of the line -->
		</div>
		<div class="pce-line" aria-hidden="true"></div>
		<!-- More lines... -->
	</div>
</div>

State classes

There are many classes added to .prism-code-editor you can use to style the editor depending on its state:

pce-has-selection if the textarea has a selection, and pce-no-selection if not.
pce-focus if the textarea is focused.
show-line-numbers if line numbers are enabled.
pce-wrap if word wrap is enabled, and pce-nowrap if not.
pce-readonly if the editor is read-only.
pce-rtl if the rtl option is true.

Adding vertical scrolling

By default, .prism-code-editor has overflow: auto. This means the editor will scroll horizontally if needed, but since the editor doesn’t have height or max-height defined, it will grow to fit the content. To allow vertical scrolling, you need to limit the height of .prism-code-editor by e.g. defining height or max-height.

Changing the padding

Default padding is 0.75em left/right and 0.5em top/bottom. To change horizontal padding, use the custom property --padding-inline. Vertical padding can be changed by changing the margin on .pce-wrapper.

Scroll padding

The default scroll padding is intentionally small. This is because it’s also used when dragging with the mouse to select text, and large scroll padding makes it harder to select text close to the edges. If you want to increase the scroll padding, it’d be suggested to add the following event listeners to remove or decrease the scroll padding when dragging to select text.

editor.textarea.addEventListener("pointerdown", () => {
	editor.container.style.setProperty("--pce-scroll-padding", "0")
})

editor.textarea.addEventListener("pointerup", () => {
	editor.container.style.removeProperty("--pce-scroll-padding")
})

Creating a theme

It’s likely that none of the themes perfectly fit your website. A great solution is to modify one of the included themes to better suit your website. Alternatively, you can import one of the themes and override some of the styles in your own stylesheets.