Skip to content

Commit 8998fe1

Browse files
jonpytjonpyt
committed
Improve styling guide
1 parent 5419418 commit 8998fe1

File tree

1 file changed

+75
-24
lines changed

1 file changed

+75
-24
lines changed

‎docs/src/content/docs/guides/styling.mdx‎

Lines changed: 75 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,23 @@ registerTheme("my-theme", () => import("./my-theme.css?inline"))
3737
The example might look different if you're not using Vite as your bundler
3838
</Aside>
3939

40-
## Importing themes
40+
## Without setups
41+
42+
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.
43+
44+
### Importing styles
45+
46+
- `prism-code-editor/layout.css`: Styles for the layout of the component.
47+
- `prism-code-editor/rtl-layout.css`: Additional styles needed for the `rtl` option to work.
48+
- `prism-code-editor/search.css`. Styles for [`searchWidget(){:js}`](/api-reference/search/f-searchwidget).
49+
- `prism-code-editor/copy-button.css`: Styles for [`copyButton(){:js}`](/api-reference/copy-button/f-copybutton).
50+
- `prism-code-editor/invisibles.css`: Styles for [`showInvisibles(){:js}`](/api-reference/search/f-showinvisibles).
51+
- `prism-code-editor/guides.css`: Styles for [`indentGuides(){:js}`](/api-reference/guides/f-indentguides).
52+
- `prism-code-editor/code-folding.css`: Styles for [`readOnlyCodeFolding(){:js}`](/api-reference/code-folding/f-readonlycodefolding).
53+
- `prism-code-editor/autocomplete.css`: Styles for [`autoComplete(){:js}`](/api-reference/autocomplete/f-autocomplete).
54+
- `prism-code-editor/autocomplete-icons.css`: Default icons for the autocompletion tooltip.
55+
56+
### Importing themes
4157

4258
Themes can be imported from `prism-code-editor/themes/*.css`. There are currently 14 themes you can import. The [`playground`](/playground) showcases all themes.
4359

@@ -54,21 +70,6 @@ loadTheme(isLight ? "github-light" : "github-dark").then(theme => {
5470
})
5571
```
5672

57-
## Importing styles
58-
59-
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.
60-
61-
Here are some stylesheets you can import:
62-
63-
- `prism-code-editor/layout.css`: Styles for the layout of the component.
64-
- `prism-code-editor/rtl-layout.css`: Additional styles needed for the `rtl` option to work.
65-
- `prism-code-editor/search.css`. Styles for [`searchWidget(){:js}`](/api-reference/search/f-searchwidget).
66-
- `prism-code-editor/copy-button.css`: Styles for [`copyButton(){:js}`](/api-reference/copy-button/f-copybutton).
67-
- `prism-code-editor/invisivles.css`: Styles for [`showInvisibles(){:js}`](/api-reference/search/f-showinvisibles).
68-
- `prism-code-editor/guides.css`: Styles for [`indentGuides(){:js}`](/api-reference/guides/f-indentguides).
69-
- `prism-code-editor/code-folding.css`: Styles for [`readOnlyCodeFolding(){:js}`](/api-reference/code-folding/f-readonlycodefolding).
70-
- `prism-code-editor/autocomplete.css`: Styles for [`autoComplete(){:js}`](/api-reference/autocomplete/f-autocomplete).
71-
- `prism-code-editor/autocomplete-icons.css`: Default icons for the autocompletion tooltip.
7273

7374
### Scrollbar styling
7475

@@ -83,6 +84,42 @@ You can import a stylesheet that adds a custom scrollbar to desktop Chrome and S
8384

8485
You can change the color of the scrollbar thumb using the custom property `--editor__bg-scrollbar{:css}`. Different alpha values will be set based on the state of the scrollbar thumb.
8586

87+
## CSS variables
88+
89+
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.
90+
91+
- `--padding-inline{:css}`: Horizontal padding for the editor. Defaults to `0.75em{:css}`.
92+
- `--number-spacing{:css}`: Spacing between line numbers and the code. Defaults to `0.75em{:css}`.
93+
- `--editor__bg{:css}`: Background for the editor. Set by all themes.
94+
- `--pce-selection{:css}`: Background color for selected text. Set by all themes.
95+
- `--pce-scroll-padding{:css}`: Scroll padding to ensure the cursor isn't too close to the edges while typing. Defaults to `2ch{:css}`.
96+
- `--editor__line-number{:css}`: Text color for the line numbers. Set by all themes.
97+
- `--editor__bg-highlight{:css}`: Background for the line with the cursor.
98+
- `--editor__border-highlight{:css}`: Border for the line with the cursor.
99+
- `--editor__bg-selection-match{:css}`: Background color of selection matches. Set by all themes.
100+
- `--editor__bg-scrollbar{:css}`: See [scrollbar styling](#scrollbar-styling). Set by all themes.
101+
- `--bg-guide-indent{:css}`: Indentation guide color. Set by all themes.
102+
- `--pce-invisibles{:css}`: Color used by the [`showInvisibles(){:js}`](/api-reference/search/f-showinvisibles) extension. Defaults to `#e3e4e229{:css}`.
103+
- `--pce-ac-match{:css}`: Color of matched characters in completion options. Defaults to `#52b1ff{:css}`.
104+
- `--pce-tabstop{:css}`: Color of tab stop indicators. Defaults to `#7c7c7c4d{:css}`.
105+
- `--editor__bg-fold{:css}`: Color of the chevrons used to fold code. Defaults to `#777{:css}`.
106+
- `--widget__bg{:css}`: Background for editor widgets. Set by all themes.
107+
- `--widget__color{:css}`: Text color for editor widgets. Set by all themes.
108+
- `--widget__border{:css}`: Border color for editor widgets. Set by all themes.
109+
- `--widget__bg-input{:css}`: Background for input elements. Set by all themes.
110+
- `--widget__bg-active{:css}`: Background for selected widget buttons. Set by all themes.
111+
- `--widget__bg-hover{:css}`: Background for hovered widget buttons. Set by all themes.
112+
- `--widget__color-active{:css}`: Text color for selected widget buttons. Set by all themes.
113+
- `--widget__focus-ring{:css}`: Focus ring color for widgets. Set by all themes.
114+
- `--widget__error-ring{:css}`: Border color for invalid input elements. Set by all themes.
115+
- `--widget__bg-error{:css}`: Background for the error message popup. Set by all themes.
116+
- `--widget__color-options{:css}`: Text color used by the bottom row in the search widget. Set by all themes.
117+
- `--search__bg-find{:css}`: Background for search matches. Set by all themes.
118+
119+
<Aside type="note">
120+
Most of the variable names will likely change in the next major release to ensure they're all prefixed with `pce`.
121+
</Aside>
122+
86123
## Advanced styling
87124

88125
The following document shows the DOM structure of an editor.
@@ -106,14 +143,6 @@ The following document shows the DOM structure of an editor.
106143
</div>
107144
```
108145

109-
### Adding vertical scrolling
110-
111-
By default, `.prism-code-editor{:selector}` has `overflow: auto{:css}`. 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{:selector}`, by adding a `height` or `max-height`.
112-
113-
### Changing the padding
114-
115-
Default padding is `0.75em{:css}` left/right and `0.5em{:css}` top/bottom. If you want to change it, you can use the custom property `--padding-inline{:css}` for left/right. Padding top and bottom can changed by changing the margin on `.pce-wrapper{:selector}`.
116-
117146
### State classes
118147

119148
There are many classes added to `.prism-code-editor{:selector}` you can use to style the editor depending on its state:
@@ -125,6 +154,28 @@ There are many classes added to `.prism-code-editor{:selector}` you can use to s
125154
- `pce-readonly` if the editor is read-only.
126155
- `pce-rtl` if the `rtl` option is `true`.
127156

157+
### Adding vertical scrolling
158+
159+
By default, `.prism-code-editor{:selector}` has `overflow: auto{:css}`. 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{:selector}` by e.g. defining `height` or `max-height`.
160+
161+
### Changing the padding
162+
163+
Default padding is `0.75em{:css}` left/right and `0.5em{:css}` top/bottom. To change horizontal padding, use the custom property `--padding-inline{:css}`. Vertical padding can be changed by changing the margin on `.pce-wrapper{:selector}`.
164+
165+
### Scroll padding
166+
167+
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.
168+
169+
```js editor
170+
editor.textarea.addEventListener("pointerdown", () => {
171+
editor.container.style.setProperty("--pce-scroll-padding", "0")
172+
})
173+
174+
editor.textarea.addEventListener("pointerup", () => {
175+
editor.container.style.removeProperty("--pce-scroll-padding")
176+
})
177+
```
178+
128179
### Creating a theme
129180

130181
It's likely that none of the themes perfectly fit your website. A great solution is to modify one of the [included themes](https://github.com/FIameCaster/prism-code-editor/tree/main/package/src/themes) to better suit your website. Alternatively, you can import one of the themes and override some of the styles in your own stylesheets.

0 commit comments

Comments
 (0)