blogging

Hexo Custom Theme - Styling Code Snippets

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.

Add corners to the code box

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.

source/css/_partial/header.styl
1
code-border-radius = 10px

I edited the source/css/_partial/highlight.styl file and added definitions to the $code-block style:

  • boarder-radius adds a cure to the corner using size defined in the variable code-border-radius
  • background: #333 - why did I add this ?
  • margin: 1px 10px 1px 10px puts 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.

The updated $code-block style now looks like (added lines 11-14):

source/css/_partial/highlight.styl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$code-block
  background: highlight-background
  margin: 0 article-padding * -1
  padding: 15px article-padding
  border-style: solid
  border-color: color-border
  border-width: 1px 0
  overflow: auto
  color: highlight-foreground
  line-height: font-size * line-height
  border-radius: code-border-radius
  background: #333;
  margin: 1px 10px 1px 10px
  border: 3px solid #EEEEEE;

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.

Line numbers

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.

source/css/_partial/highlight.styl
1
2
3
$line-numbers
 color: #666
 font-size: 0.85em

More customisation possible

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.

source/css/_partial/highlight.styl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
.article-entry
 pre, code
   font-family: font-mono
 code
   background: color-background
   text-shadow: 0 1px #fff
   padding: 0 0.3em
 pre
   @extend $code-block
   code
     background: none
     text-shadow: none
     padding: 0
 .highlight
   @extend $code-block
   pre
     border: none
     margin: 0
     padding: 0
   table
     margin: 0
     width: auto
   td
     border: none
     padding: 0
   figcaption
     clearfix()
     font-size: 0.85em
     color: highlight-comment
     line-height: 1em
     margin-bottom: 1em
     a
       float: right
   .gutter pre
     @extend $line-numbers
     text-align: right
     padding-right: 20px

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
Creative Commons License