自定义代码高亮
jekyll默认主题的代码高亮实在不敢恭维,网上查了好多资料都说需要在配置文件里修改高亮插件,实际上根本没用
其实jekyll的代码高亮修改非常简单,所有代码块样式设置都在_sass/minima/_syntax-highlighting.scss
文件中
简单介绍:
/**
* 这里直接贴出我自定义的所有代码
*/
.highlight {
/**
* pre标签的背景色在这里修改
*/
background: #f6f8fa;
@extend %vertical-rhythm;
.highlighter-rouge & {
background: #f6f8fa;
}
/**
* 如果看不懂下面每个注释的话,可以在网页中打开你自己写的代码块,右键->检查,定位到每个对应的标签
*/
.c { color: #998; font-style: italic } // Comment
.err { color: #a61717; background-color: #e3d2d2 } // Error
.k { color: #9B2393; font-weight: bold } // Keyword
.o { font-weight: bold } // Operator
.cm { color: #998; font-style: italic } // Comment.Multiline
.cp { color: #999; font-weight: bold } // Comment.Preproc
.c1 { color: #998; font-style: italic } // Comment.Single
.cs { color: #999; font-weight: bold; font-style: italic } // Comment.Special
.gd { color: #000; background-color: #fdd } // Generic.Deleted
.gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific
.ge { font-style: italic } // Generic.Emph
.gr { color: #a00 } // Generic.Error
.gh { color: #999 } // Generic.Heading
.gi { color: #000; background-color: #dfd } // Generic.Inserted
.gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific
.go { color: #888 } // Generic.Output
.gp { color: #555 } // Generic.Prompt
.gs { font-weight: bold } // Generic.Strong
.gu { color: #aaa } // Generic.Subheading
.gt { color: #a00 } // Generic.Traceback
.kc { color: #9B2393; font-weight: bold } // Keyword.Constant
.kd { color: #9B2393; font-weight: bold } // Keyword.Declaration
.kp { color: #9B2393; font-weight: bold } // Keyword.Pseudo
.kr { color: #9B2393; font-weight: bold } // Keyword.Reserved
.kt { color: #5C2699; font-weight: bold } // Keyword.Type
.m { color: #1C00CF } // Literal.Number
.s { color: #C41A16 } // Literal.String
.na { color: #008080 } // Name.Attribute
.nb { color: #0086B3 } // Name.Builtin
.nc { color: #458; font-weight: bold } // Name.Class
.no { color: #008080 } // Name.Constant
.ni { color: #800080 } // Name.Entity
.ne { color: #900; font-weight: bold } // Name.Exception
.nf { color: #6f42c1; font-weight: bold } // Name.Function
.nn { color: #555 } // Name.Namespace
.nt { color: #000080 } // Name.Tag
.nv { color: #000 } // Name.Variable
.ow { font-weight: bold } // Operator.Word
.w { color: #bbb } // Text.Whitespace
.mf { color: #1C00CF } // Literal.Number.Float
.mh { color: #1C00CF } // Literal.Number.Hex
.mi { color: #1C00CF } // Literal.Number.Integer
.mo { color: #1C00CF } // Literal.Number.Oct
.sb { color: #C41A16 } // Literal.String.Backtick
.sc { color: #C41A16 } // Literal.String.Char
.sd { color: #C41A16 } // Literal.String.Doc
.s2 { color: #C41A16 } // Literal.String.Double
.se { color: #C41A16 } // Literal.String.Escape
.sh { color: #C41A16 } // Literal.String.Heredoc
.si { color: #C41A16 } // Literal.String.Interpol
.sx { color: #C41A16 } // Literal.String.Other
.sr { color: #C41A16 } // Literal.String.Regex
.s1 { color: #C41A16 } // Literal.String.Single
.ss { color: #C41A16 } // Literal.String.Symbol
.bp { color: #999 } // Name.Builtin.Pseudo
.vc { color: #008080 } // Name.Variable.Class
.vg { color: #008080 } // Name.Variable.Global
.vi { color: #008080 } // Name.Variable.Instance
.il { color: #099 } // Literal.Number.Integer.Long
}
/**
* 此处自定义code和pre标签的样式
* code标签的背景色需要在此单独修改
*/
code, pre {
border-width: 0;
color: #24292e;
background-color: rgba(27,31,35,.05);
}
code {
border-radius: 3px;
font-size: 13.6px;
padding: .2em .4em;
}
pre {
border-radius: 5px;
padding: 16px;
}