code.css 4.7 KB

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