code
  -webkit-font-smoothing: auto
  -moz-osx-font-smoothing: auto
  color: var(--text-code)
  font-family: $ff-code

p>code:not([class]),li>code:not([class])
  font-size: 85%
  background: var(--block)
  padding: .2em .4em
  border-radius: 4px

article.md .highlight, pre:not([class]):has(>code)
  margin: var(--gap-p) 0
  border-radius: $border-block
  overflow: hidden
  background: var(--block)
  border: 1px solid var(--block-border)
  line-height: 1.5
  font-family: $ff-code
  box-sizing: border-box
  @media screen and (min-width: $device-mobile)
    min-width: 280px

article.md .highlight
  position: relative
  overflow: auto
  display: block
  figcaption
    color: var(--text-p2)
    font-size: $fs-code
    padding: 4px 0.5rem
    position: sticky
    left: 0
    background: var(--block-hover)
    border-top-left-radius: "calc(%s - 1px)" % $border-block
    border-top-right-radius: "calc(%s - 1px)" % $border-block
    border-bottom: 1px solid var(--block-border)
    span
      margin-right: 4px
  >table
    overflow: auto
    display: block
    td,th
      padding: 0
      border: none
      line-height: 1.5
    margin: 0 !important
    background: transparent
    border: none
    scrollbar-codeblock(convert(hexo-config('style.codeblock.scrollbar')))
    tr
      background: transparent
      &:hover
        background: transparent


  .gutter
    pointer-events: none
    disable-select()
    text-align: right
    padding: 0 1em
    border-width: 0
    margin-left: 0
    // position: sticky // 如果希望行标固定请打开此行；但是如果想在较窄屏幕上拥有较好的阅读体验，建议让行标跟随滚动。
    // background: var(--block) // 如果希望行标固定请打开此行；但是如果想在较窄屏幕上拥有较好的阅读体验，建议让行标跟随滚动。
    left: 0
    z-index: 1
    pre .line
      color: var(--text-p4)
  .code
    pre
      display: block
      padding: .5em 1rem
  .gutter+.code pre
    padding-left: 0.25em


table:not([class])
  border-collapse: collapse


article.md pre
  >.caption
    color: var(--text-p3)
  >.hljs
    padding: 1rem
    border-radius: $border-block
    border: 1px solid var(--block-border)
    line-height: 1.5
    box-sizing: border-box

article.md .highlight
  .code
    vertical-align: top
    &:before
      position: absolute
      top: 0
      right: 0
      padding: 4px 0.5rem
      opacity: .25
      font-weight: 700
      color: var(--theme)

  &.yaml .code:before
    content: "YAML"
  &.json .code:before
    content: "JSON"

  &.diff .code:before
    content: "diff"

  &.html .code:before
    content: "HTML"
  &.js .code:before,&.javascript .code:before
    content: "JS"
  &.css .code:before
    content: "CSS"
  &.less .code:before
    content: "Less"
  &.stylus .code:before
    content: "Stylus"

  &.bash .code:before
    content: "bash"
  &.shell .code:before
    content: "shell"
  &.sh .code:before
    content: "sh"
  &.ini .code:before
    content: "ini"

  &.c .code:before
    content: "C"
  &.cpp .code:before
    content: "C++"
  &.objc .code:before,&.objectivec .code:before
    content: "Objective-C"
  &.swift .code:before
    content: "Swift"

  &.java .code:before
    content: "Java"
  &.python .code:before
    content: "Python"
  &.php .code:before
    content: "PHP"
  &.rust .code:before,&.rs .code:before
    content: "Rust"
  &.sql .code:before
    content: "SQL"
  &.ruby .code:before
    content: "Ruby"
  &.makefile .code:before
    content: "Makefile"
  &.go .code:before
    content: "Go"
  &.typescript .code:before,&.ts .code:before
    content: "TS"



$hl-keyword = #8959a8
$hl-blue = #1E80F0
$hl-cyan = #17AFCA
$hl-green = #3FA33F
$hl-light-blue = #6ECDF9
$hl-red = #EE2B29
$hl-orange = #FB3F1B
$hl-amber = #FD8607
$hl-text = var(--text-p1)
.code>pre
  .code:before
    display: none
  // 行
  .line,.params
    color: $hl-text

  .line .addition
    color: $hl-green
  .line .deletion
    color: $hl-red

  .marked
    background-color: alpha(#FED542, .4)
    padding: 2px 8px 2px 0
    border-radius: 2px
    width: 100%

  .title, .attr, .attribute
    color: $color-md-indigo

  // 注释
  .comment
    color: var(--text-p4)
    font-style: italic

  .keyword, .meta-keyword, .javascript .function
    color: $hl-keyword

  .type, .built_in, .tag .name
    color: $color-md-blue

  .variable, .regexp, .ruby .constant, .xml .tag .title, .xml .pi, .xml .doctype, .html .doctype, .css .id, .css .class, .css .pseudo
    color: $hl-amber

  .number, .preprocessor, .literal, .constant
    color: $hl-amber

  .class, .ruby .class .title, .css .rules .attribute
    color: $color-md-orange

  .string, .meta-string
    color: darken($color-md-green, 10%)

  .value, .inheritance, .header, .ruby .symbol, .xml .cdata
    color: $color-md-green

  .css .hexcolor
    color: #66cccc

  .function, .python .decorator, .python .title, .ruby .function .title, .ruby .title .keyword, .perl .sub, .javascript .title, .coffeescript .title
    color: #6699cc


.highlight.html,.highlight.css,.highlight.less,.highlight.stylus
  .line
    .tag .name, .selector-tag
      color: $hl-red
    .selector-class, .selector-attr
      color: $hl-amber
    .attribute
      color: $color-md-indigo
    .number
      color: $hl-cyan


.highlight.objc,.highlight.objectivec,.highlight.swift,.highlight.c
  .line
    .meta
      color: $hl-keyword
    .class
      color: $hl-text

.highlight.json
  .line
    .attr
      color: #E24F5A
    .literal
      color: $color-md-indigo

.highlight.yaml
  .line
    .attr
      color: #E24F5A