highlight.styl 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. // https://github.com/chriskempson/tomorrow-theme
  2. $highlight-theme = hexo-config('codeblock.highlight_theme');
  3. @import 'theme';
  4. @import 'diff';
  5. @import 'copy-code' if (hexo-config('codeblock.copy_button.enable'));
  6. // Placeholder: $code-block
  7. $code-block {
  8. background: $highlight-background;
  9. color: $highlight-foreground;
  10. line-height: $line-height-code-block;
  11. margin: 0 auto 20px;
  12. }
  13. pre, code {
  14. font-family: $code-font-family;
  15. }
  16. code {
  17. background: $code-background;
  18. border-radius: 3px;
  19. color: $code-foreground;
  20. padding: 2px 4px;
  21. word-wrap();
  22. }
  23. .highlight {
  24. @extend $code-block;
  25. *::selection {
  26. background: $highlight-selection;
  27. }
  28. pre {
  29. border: 0;
  30. margin: 0;
  31. padding: 10px 0;
  32. }
  33. table {
  34. border: 0;
  35. margin: 0;
  36. width: auto;
  37. }
  38. td {
  39. border: 0;
  40. padding: 0;
  41. }
  42. figcaption {
  43. background: $highlight-gutter.bg-color;
  44. color: $highlight-foreground;
  45. display: flex;
  46. font-size: $table-font-size;
  47. justify-content: space-between;
  48. line-height: 1.2;
  49. padding: .5em;
  50. a {
  51. color: $highlight-foreground;
  52. &:hover {
  53. border-bottom-color: $highlight-foreground;
  54. }
  55. }
  56. }
  57. .gutter {
  58. disable-user-select();
  59. pre {
  60. background: $highlight-gutter.bg-color;
  61. color: $highlight-gutter.color;
  62. padding-left: 10px;
  63. padding-right: 10px;
  64. text-align: right;
  65. }
  66. }
  67. .code pre {
  68. background: $highlight-background;
  69. padding-left: 10px;
  70. width: 100%;
  71. }
  72. }
  73. .gist table {
  74. width: auto;
  75. td {
  76. border: 0;
  77. }
  78. }
  79. pre {
  80. @extend $code-block;
  81. overflow: auto;
  82. padding: 10px;
  83. code {
  84. background: none;
  85. color: $highlight-foreground;
  86. font-size: $table-font-size;
  87. padding: 0;
  88. text-shadow: none;
  89. }
  90. // For diff highlight
  91. .deletion {
  92. background: $highlight-deletion;
  93. }
  94. .addition {
  95. background: $highlight-addition;
  96. }
  97. .meta {
  98. color: $highlight-yellow;
  99. disable-user-select();
  100. }
  101. .comment {
  102. color: $highlight-comment;
  103. }
  104. .variable, .attribute, .tag, .name, .regexp, .ruby .constant, .xml .tag .title, .xml .pi, .xml .doctype, .html .doctype, .css .id, .css .class, .css .pseudo {
  105. color: $highlight-red;
  106. }
  107. .number, .preprocessor, .built_in, .builtin-name, .literal, .params, .constant, .command {
  108. color: $highlight-orange;
  109. }
  110. .ruby .class .title, .css .rules .attribute, .string, .symbol, .value, .inheritance, .header, .ruby .symbol, .xml .cdata, .special, .formula {
  111. color: $highlight-green;
  112. }
  113. .title, .css .hexcolor {
  114. color: $highlight-aqua;
  115. }
  116. .function, .python .decorator, .python .title, .ruby .function .title, .ruby .title .keyword, .perl .sub, .javascript .title, .coffeescript .title {
  117. color: $highlight-blue;
  118. }
  119. .keyword, .javascript .function {
  120. color: $highlight-purple;
  121. }
  122. }