Skip to content
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
Merged

Conversation

mmistakes
Copy link
Owner

@mmistakes 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

* 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 January 5, 2018 01:46
kkunapuli pushed a commit to kkunapuli/kkunapuli.github.io that referenced this pull request May 30, 2019
* 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
* Add longer code block example to test double digit line numbers
* Adjust code block colors for specific skins
sumeetmondal pushed a commit to sumeetmondal/sumeetmondal.github.io that referenced this pull request Sep 10, 2019
* 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
* Add longer code block example to test double digit line numbers
* Adjust code block colors for specific skins
jchwenger pushed a commit to jchwenger/jchwenger.github.io that referenced this pull request May 5, 2023
* 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
* Add longer code block example to test double digit line numbers
* Adjust code block colors for specific skins
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant