code.css 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271
  1. code {
  2. font-family: source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace;
  3. font-size: 0.85em;
  4. color: var(--text-color-light);
  5. background-color: rgba(27, 31, 35, 0.05);
  6. padding: 0.25rem 0.5rem;
  7. border-radius: 3px;
  8. margin: 0;
  9. }
  10. code .token.deleted {
  11. color: #ec5975;
  12. }
  13. code .token.inserted {
  14. color: var(--accent-color);
  15. }
  16. div[class*='language-'] {
  17. line-height: 1.5;
  18. padding: 0.5rem 1.5rem;
  19. background-color: var(--code-bg-color);
  20. border-radius: 6px;
  21. overflow-x: auto;
  22. position: relative;
  23. margin: 0.85rem 0;
  24. }
  25. [class*='language-'] pre {
  26. background: transparent;
  27. position: relative;
  28. z-index: 1;
  29. }
  30. [class*='language-'] code {
  31. color: #eee;
  32. padding: 0;
  33. }
  34. [class*='language-'] code,
  35. [class*='language-'] pre {
  36. text-align: left;
  37. white-space: pre;
  38. word-spacing: normal;
  39. word-break: normal;
  40. word-wrap: normal;
  41. line-height: 1.5;
  42. -moz-tab-size: 4;
  43. -o-tab-size: 4;
  44. tab-size: 4;
  45. -webkit-hyphens: none;
  46. -moz-hyphens: none;
  47. -ms-hyphens: none;
  48. hyphens: none;
  49. }
  50. /* Line highlighting */
  51. .highlight-lines {
  52. font-size: 0.9em;
  53. user-select: none;
  54. padding-top: 1.3rem;
  55. position: absolute;
  56. top: 0;
  57. left: 0;
  58. width: 100%;
  59. line-height: 1.5;
  60. }
  61. .highlight-lines .highlighted {
  62. background-color: rgba(0, 0, 0, 66%);
  63. }
  64. /* Line numbers mode */
  65. div[class*='language-'].line-numbers-mode {
  66. padding-left: 5rem;
  67. }
  68. .line-numbers-wrapper {
  69. position: absolute;
  70. top: 0;
  71. left: 0;
  72. width: 3.5rem;
  73. text-align: center;
  74. color: #888;
  75. line-height: 1.5;
  76. font-size: 0.9em;
  77. padding: 1.3rem 0;
  78. border-right: 1px solid rgba(0,0,0,50%);
  79. z-index: 4;
  80. }
  81. /* Language marker */
  82. [class*='language-']:before {
  83. position: absolute;
  84. z-index: 3;
  85. top: 0.6em;
  86. right: 1em;
  87. font-size: 0.8rem;
  88. color: #888;
  89. }
  90. [class~='language-html']:before,
  91. [class~='language-markup']:before {
  92. content: 'html';
  93. }
  94. [class~='language-md']:before,
  95. [class~='language-markdown']:before {
  96. content: 'md';
  97. }
  98. [class~='language-css']:before {
  99. content: 'css';
  100. }
  101. [class~='language-sass']:before {
  102. content: 'sass';
  103. }
  104. [class~='language-scss']:before {
  105. content: 'scss';
  106. }
  107. [class~='language-less']:before {
  108. content: 'less';
  109. }
  110. [class~='language-stylus']:before {
  111. content: 'styl';
  112. }
  113. [class~='language-js']:before,
  114. [class~='language-typescript']:before {
  115. content: 'js';
  116. }
  117. [class~='language-ts']:before,
  118. [class~='language-typescript']:before {
  119. content: 'ts';
  120. }
  121. [class~='language-json']:before {
  122. content: 'json';
  123. }
  124. [class~='language-rb']:before,
  125. [class~='language-ruby']:before {
  126. content: 'rb';
  127. }
  128. [class~='language-py']:before,
  129. [class~='language-python']:before {
  130. content: 'py';
  131. }
  132. [class~='language-sh']:before,
  133. [class~='language-bash']:before {
  134. content: 'sh';
  135. }
  136. [class~='language-php']:before {
  137. content: 'php';
  138. }
  139. [class~='language-go']:before {
  140. content: 'go';
  141. }
  142. [class~='language-rust']:before {
  143. content: 'rust';
  144. }
  145. [class~='language-java']:before {
  146. content: 'java';
  147. }
  148. [class~='language-c']:before {
  149. content: 'c';
  150. }
  151. [class~='language-yaml']:before {
  152. content: 'yaml';
  153. }
  154. [class~='language-dockerfile']:before {
  155. content: 'dockerfile';
  156. }
  157. /**
  158. * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
  159. * Based on https://github.com/chriskempson/tomorrow-theme
  160. * @author Rose Pritchard
  161. */
  162. .token.comment,
  163. .token.block-comment,
  164. .token.prolog,
  165. .token.doctype,
  166. .token.cdata {
  167. color: #999;
  168. }
  169. .token.punctuation {
  170. color: #ccc;
  171. }
  172. .token.tag,
  173. .token.attr-name,
  174. .token.namespace,
  175. .token.deleted {
  176. color: #e2777a;
  177. }
  178. .token.function-name {
  179. color: #6196cc;
  180. }
  181. .token.boolean,
  182. .token.number,
  183. .token.function {
  184. color: #f08d49;
  185. }
  186. .token.property,
  187. .token.class-name,
  188. .token.constant,
  189. .token.symbol {
  190. color: #f8c555;
  191. }
  192. .token.selector,
  193. .token.important,
  194. .token.atrule,
  195. .token.keyword,
  196. .token.builtin {
  197. color: #cc99cd;
  198. }
  199. .token.string,
  200. .token.char,
  201. .token.attr-value,
  202. .token.regex,
  203. .token.variable {
  204. color: #7ec699;
  205. }
  206. .token.operator,
  207. .token.entity,
  208. .token.url {
  209. color: #67cdcc;
  210. }
  211. .token.important,
  212. .token.bold {
  213. font-weight: bold;
  214. }
  215. .token.italic {
  216. font-style: italic;
  217. }
  218. .token.entity {
  219. cursor: help;
  220. }
  221. .token.inserted {
  222. color: green;
  223. }