The hexo theme shows code in a solid black box with syntax hightlghting to match. It gives a nice contrast to the rest of the content, however I wanted to add curves to the corner of the code boxes. I also wanted to add a margin / padding around the code box so it did not touch the edges of the post.
Values for commonly used styles are defined as variables in the file
source/css/_variables.styl. This makes it easy to redefine a style across the whole theme with a single change.
In this case, I defined a
code-border-radius variable and gave it a value of 10px.
code-border-radius = 10px
I edited the
source/css/_partial/highlight.styl file and added definitions to the
boarder-radiusadds a cure to the corner using size defined in the variable
background: #333- why did I add this ?
margin: 1px 10px 1px 10pxputs a space of 10 pixels at the left and right of the code block, as well as a 1 pixel space above and below
border: 3px solid #EEEEEE;adds a discrete white boarder around the codeblock to make it blend into the page gracefully.
$code-block style now looks like (added lines 11-14):
I didnt make any further changes in to the theme in the
highlight.styl file. However, there are other things in this file you may want to modify.
The hexo theme makes the line numbers smaller in font size and makes the numbers look faded by using colour number 666. This looked good to me, so I didnt change these styles.
There is a whole range of settings that affect the code-block and other highlighted areas of articles in the
highlight.styl file, however I did feel the need to make any changes here.
If I get tired of the black background for code I could change it here, although I’d need to check the colours used for syntax highlighting still worked with the new code background.
This work is licensed under a Creative Commons Attribution 4.0 ShareAlike License, including custom images & stylesheets. Permissions beyond the scope of this license may be available at @jr0cket