自定义代码高亮

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;
  }