New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve syntax highlighting styles #1450

Merged
merged 4 commits into from Jan 5, 2018

Conversation

Projects
None yet
1 participant
@mmistakes
Owner

mmistakes commented Jan 4, 2018

To make customizing the colors used in code highlighted blocks, hard-coded values have been replaced with Sass variables. These variables use a base of sixteen colors (Base16) to style syntax.

Code block colors can easily be changed by overriding any of the following color variables as noted in the docs.

/* syntax highlighting (base16) */
$base00: #263238;
$base01: #2e3c43;
$base02: #314549;
$base03: #546e7a;
$base04: #b2ccd6;
$base05: #eeffff;
$base06: #eeffff;
$base07: #ffffff;
$base08: #f07178;
$base09: #f78c6c;
$base0a: #ffcb6b;
$base0b: #c3e88d;
$base0c: #89ddff;
$base0d: #82aaff;
$base0e: #c792ea;
$base0f: #ff5370;

The following skins' code block colors have been modified to better fit the overall tone.

Default

default-code-block

Contrast

contrast-code-block

Dark

dark-code-block

Dirt

dirt-code-block

Neon

neon-code-block

Plum

plum-code-block

Sunrise

sunrise-code-block

mmistakes added some commits Jan 4, 2018

Cleanup syntax highlighting styles
* Replace hardcoded color values with [base16](http://chriskempson.com/projects/base16/) Sass variables
* Harmonize padding between GFM code blocks and `{% highlight %}` code blocks
*  Improve readability of line numbers

@mmistakes mmistakes merged commit 3f469f2 into master Jan 5, 2018

@mmistakes mmistakes deleted the syntax-highlighting-cleanup branch Jan 5, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment