代码高亮

前言

之前的博客代码块没有对代码设置高亮，看起来就很不舒服，所以还是自己动手改改吧~

原代码

首先要找到高亮代码的位置，一顿摸索后····
不出意外的找到了代码文件位置/source/css/_partial/layout.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
figure.highlight
    display: block
    width: 92%
    margin: auto
    overflow-x: auto

.highlight > table
    background: #f2f2f2
    width: 100%

figure.highlight, .code, code
    font-family: Monaco, Menlo, Consolas, 'Microsoft Yahei', monospace
    background: #eee
    color: #f14e32
    font-size: 14px
    margin: auto 5px
    pre
        // width: 90%
        color: #4a4a4a   
        //background: #eee
        margin: auto   
        overflow-x: auto
        font-family: inherit
        font-size: 13px
        line-height: 1.6em

对 单行代码 和 代码块 添加:字体颜色、背景色、圆角、阴影

修改后

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
figure.highlight			//代码块
    display: block
    width: 92%
    margin: auto
    overflow-x: auto
    box-shadow:2px 2px 5px #918f8f52	//盒子阴影


.highlight > table						//代码序号背景
    background: #f2f2f2
    width: 100%

figure.highlight, .code, code		//单行代码
    font-family: Monaco, Menlo, Consolas, 'Microsoft Yahei', monospace
    background: #eee
    box-shadow:2px 2px 5px #E2E2E2  //盒子阴影
    border-radius:3px;              //圆角
    color: #c7254e
    font-size: 14px 				//单行代码字体
    margin: auto 5px
    pre
        // width: 90%
        color: #4a4a4a
        //background: #eee
        margin: auto
        overflow-x: auto
        font-family: inherit
        font-size: 13px
        line-height: 1.6em
发布于 
tags:
  • { blog }