For this styleguide we use prism.js as a syntax highlighter and it's already included in the Volta package along with our theme.
However, here's a reference table in case you need to use a different plug-in and style your own theme.
Light theme
| Element |
Style |
|
|
| Font |
monospace 15px |
|
|
| Buttons (e.g. copy) |
Small tertiary buttons |
See component |
|
| Background |
@grey-lighter |
|
\#f3f3f5 |
| Tags |
@grey-darker |
|
\#616266 |
| Line numbers |
@grey |
|
\#c2c4cc |
| Selected text |
@blue at 50% alpha |
|
rgba(102, 159, 196, 0.5) |
| Attr-name |
@blue |
|
\#669fc4 |
| Attr-value |
@orange |
|
\#fa7454 |
| Function |
@blue-dark |
|
\#4d7793 |
| String |
@green-dark |
|
\#2d966f |
| Keyword |
@indigo-dark |
|
\#ab197d |
| Variable |
@orange |
|
\#fa7454 |
| Operator |
@indigo-dark |
|
\#ab197d |
| Constant |
@blue |
|
\#669fc4 |
Dark theme
| Element |
Style |
|
|
| Font |
monospace 15px |
|
|
| Buttons (e.g. copy) |
Small tertiary buttons |
See component |
|
| Background |
@black |
|
\#131415 |
| Tags |
@blue-light |
|
\#80c7f5 |
| Line numbers |
@grey-dark |
|
\#9b9da3 |
| Selected text |
@blue at 50% alpha |
|
rgba(102, 159, 196, 0.5) |
| Attr-name |
@green-light |
|
\#86d8b9 |
| Attr-value |
@yellow-lighter |
|
\#fff8c0 |
| Function |
@orange-light |
|
\#fcac98 |
| String |
@green-light |
|
\#86d8b9 |
| Keyword |
@blue-light |
|
\#80c7f5 |
| Variable |
@indigo-light |
|
\#eb90ce |
| Operator |
@grey |
|
\#c2c4cc |
| Constant |
@green |
|
\#06ba77 |