highlight.styl

@require './theme.styl'
@require './diff.styl'

languages = 'js' 'javascript' 'python' 'ruby' 'xml' 'html' 'css' 'php' 'sql' 'coffeescript' 'java' 'bash' 'markdown' 'kotlin' 'c' 'c\+\+' 'c#' 'go' 'golang' 'less' 'sass' 'scss' 'stylus' 'styl' 'typescript' 'ts' 'yml' 'yaml' 'matlab' 'objectivec' 'makefile' 'scala' 'gradle' 'swift' 'rust' 'lua' 'lisp' 'fortran' 'dart' 'perl'
$wordWrap = hexo-config('code_word_wrap')

for lang in languages
  .highlight{'.' + lang}
    figcaption
      span
        &:first-child::before
          content: lang
          margin: 0 .6rem
          color: alpha($highlight-header-color, .5)

.highlight
  overflow: auto
  position: relative
  margin: .5rem 0 1rem
  min-width: 100%
  line-height: $line-height-code-block
  color: $highlight-color
  background-color: $highlight-background

  pre,
  code
    font-family: $code-font-family

  pre
    margin: 0

    if ($wordWrap)
      white-space: pre-wrap
      counter-reset: line

  td
    border: 0

  figcaption
    overflow: hidden
    padding: .1rem 0
    width: 100%
    color: $highlight-header-color
    background-color: $highlight-header-bg-color

    span
      &:first-child
        float: left
        color: $highlight-header-color

    span
      &:nth-child(2)
        float: right
        margin-right: 2rem

  figcaption.custom
    padding: .1rem 0
    min-height: 1.5rem

    .custom-lang
      float: left
      margin: 0 .6rem
      color: alpha($highlight-header-color, .5)

  .gutter,
  .code
    padding: .4rem .5rem

  .gutter
    width: 1rem
    background-color: $highlight-gutter-bg-color

    if ($wordWrap)
      display: none

    pre
      text-align: right
      color: $highlight-gutter-color
      background-color: inherit

  if ($wordWrap)
    .line
      &::before
        content: counter(line)
        display: inline-block
        margin: 0 1rem 0 0
        width: 1rem
        text-align: right
        color: $highlight-gutter-color
        counter-increment: line

  pre
    .variable,
    .attribute
      color: $highlight-red

    .number,
    .preprocessor,
    .literal,
    .params,
    .constant,
    .number,
    .command
      color: $highlight-orange

    .built_in
      color: $highlight-yellow

    .special,
    .formula,
    .class,
    .string,
    .value,
    .inheritance,
    .header,
    .regexp,
    .tag
      color: $highlight-green

    .keyword,
    .title
      color: $highlight-aqua

    .function,
    .title
      color: $highlight-blue

    .comment
      color: $highlight-comment

  .ruby .constant,
  .xml .tag .title,
  .xml .pi,
  .xml .doctype,
  .html .doctype,
  .css .id,
  .tag .name,
  .css .class,
  .css .pseudo
    color: $highlight-red

  .ruby .class .title,
  .css .rules .attribute,
  .ruby .symbol,
  .xml .cdata
    color: $highlight-green

  .css .hexcolor,
  .tag .string
    color: $highlight-aqua

  .python .decorator,
  .python .title,
  .ruby .function .title,
  .ruby .title .keyword,
  .perl .sub,
  .javascript .title,
  .js .title,
  .coffeescript .title
    color: $highlight-blue

  .tag .attr,
  .javascript .keyword,
  .javascript .function,
  .js .keyword,
  .js .function
    color: $highlight-purple

  .diff .addition
    background-color: $highlight-addition

  .diff .deletion
    background-color: $highlight-deletion