.content__default
 code
   color lighten($textColor, 20%)
   padding 0.25rem 0.5rem
   margin 0
   font-size 0.85em
   background-color var(--code-color)
   border-radius 3px
   .token
     &.deleted
       color #EC5975
     &.inserted
       color $accentColor

.content__default
 pre, pre[class*="language-"]
   line-height 1.4
   padding 1.25rem 1.5rem
   margin 0.85rem 0
   background-color $codeBgColor
   border-radius 6px
   overflow auto
   code
     color #fff
     padding 0
     background-color transparent
     border-radius 0

div[class*="language-"]
 position relative
 background-color $codeBgColor
 border-radius 6px
 .highlight-lines
   user-select none
   padding-top 1.3rem
   position absolute
   top 0
   left 0
   width 100%
   line-height 1.4
   .highlighted
     background-color rgba(0, 0, 0, 66%)
 pre, pre[class*="language-"]
   background transparent
   position relative
   z-index 1
 &::before
   position absolute
   z-index 3
   top 0.8em
   right 1em
   font-size 0.75rem
   color rgba(255, 255, 255, 0.4)
 &:not(.line-numbers-mode)
   .line-numbers-wrapper
     display none
 &.line-numbers-mode
   .highlight-lines .highlighted
       position relative
       &:before
         content ' '
         position absolute
         z-index 3
         left 0
         top 0
         display block
         width $lineNumbersWrapperWidth
         height 100%
         background-color rgba(0, 0, 0, 66%)
   pre
     padding-left $lineNumbersWrapperWidth + 1 rem
     vertical-align middle
   .line-numbers-wrapper
     position absolute
     top 0
     width $lineNumbersWrapperWidth
     text-align center
     color rgba(255, 255, 255, 0.3)
     padding 1.25rem 0
     line-height 1.4
     br
       user-select none
     .line-number
       position relative
       z-index 4
       user-select none
       font-size 0.85em
   &::after
     content ''
     position absolute
     z-index 2
     top 0
     left 0
     width $lineNumbersWrapperWidth
     height 100%
     border-radius 6px 0 0 6px
     border-right 1px solid rgba(0, 0, 0, 66%)
     background-color $codeBgColor


for lang in $codeLang
 div{'[class~="language-' + lang + '"]'}
   &:before
     content ('' + lang)

div[class~="language-javascript"]
 &:before
   content "js"

div[class~="language-typescript"]
 &:before
   content "ts"

div[class~="language-markup"]
 &:before
   content "html"

div[class~="language-markdown"]
 &:before
   content "md"

div[class~="language-json"]:before
 content "json"

div[class~="language-ruby"]:before
 content "rb"

div[class~="language-python"]:before
 content "py"

div[class~="language-bash"]:before
 content "sh"

div[class~="language-php"]:before
 content "php"