prism.css 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301
  1. /* PrismJS 1.24.0
  2. https://prismjs.com/download.html?#themes=prism-okaidia&languages=markup+css+clike+javascript+apacheconf+aspnet+bash+c+csharp+cpp+coffeescript+dart+docker+elm+git+go+graphql+handlebars+haskell+http+ignore+java+json+kotlin+less+markdown+markup-templating+nginx+php+powershell+ruby+rust+sass+scss+sql+swift+typescript+wasm+yaml&plugins=line-highlight+line-numbers+toolbar+copy-to-clipboard */
  3. /**
  4. * okaidia theme for JavaScript, CSS and HTML
  5. * Loosely based on Monokai textmate theme by http://www.monokai.nl/
  6. * @author ocodia
  7. */
  8. code[class*='language-'],
  9. pre[class*='language-'] {
  10. color: #f8f8f2;
  11. background: none;
  12. text-shadow: 0 1px rgba(0, 0, 0, 0.3);
  13. font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  14. font-size: 1em;
  15. text-align: left;
  16. white-space: pre;
  17. word-spacing: normal;
  18. word-break: normal;
  19. word-wrap: normal;
  20. line-height: 1.5;
  21. -moz-tab-size: 4;
  22. -o-tab-size: 4;
  23. tab-size: 4;
  24. -webkit-hyphens: none;
  25. -moz-hyphens: none;
  26. -ms-hyphens: none;
  27. hyphens: none;
  28. }
  29. /* Code blocks */
  30. pre[class*='language-'] {
  31. padding: 1em;
  32. margin: 0.5em 0;
  33. overflow: auto;
  34. border-radius: 0.3em;
  35. }
  36. :not(pre) > code[class*='language-'],
  37. pre[class*='language-'] {
  38. background: #272822;
  39. }
  40. /* Inline code */
  41. :not(pre) > code[class*='language-'] {
  42. padding: 0.1em;
  43. border-radius: 0.3em;
  44. white-space: normal;
  45. }
  46. .token.comment,
  47. .token.prolog,
  48. .token.doctype,
  49. .token.cdata {
  50. color: #8292a2;
  51. }
  52. .token.punctuation {
  53. color: #f8f8f2;
  54. }
  55. .token.namespace {
  56. opacity: 0.7;
  57. }
  58. .token.property,
  59. .token.tag,
  60. .token.constant,
  61. .token.symbol,
  62. .token.deleted {
  63. color: #f92672;
  64. }
  65. .token.boolean,
  66. .token.number {
  67. color: #ae81ff;
  68. }
  69. .token.selector,
  70. .token.attr-name,
  71. .token.string,
  72. .token.char,
  73. .token.builtin,
  74. .token.inserted {
  75. color: #a6e22e;
  76. }
  77. .token.operator,
  78. .token.entity,
  79. .token.url,
  80. .language-css .token.string,
  81. .style .token.string,
  82. .token.variable {
  83. color: #f8f8f2;
  84. }
  85. .token.atrule,
  86. .token.attr-value,
  87. .token.function,
  88. .token.class-name {
  89. color: #e6db74;
  90. }
  91. .token.keyword {
  92. color: #66d9ef;
  93. }
  94. .token.regex,
  95. .token.important {
  96. color: #fd971f;
  97. }
  98. .token.important,
  99. .token.bold {
  100. font-weight: bold;
  101. }
  102. .token.italic {
  103. font-style: italic;
  104. }
  105. .token.entity {
  106. cursor: help;
  107. }
  108. pre[data-line] {
  109. position: relative;
  110. padding: 1em 0 1em 3em;
  111. }
  112. .line-highlight {
  113. position: absolute;
  114. left: 0;
  115. right: 0;
  116. padding: inherit 0;
  117. margin-top: 1em; /* Same as .prism’s padding-top */
  118. background: hsla(24, 20%, 50%, 0.08);
  119. background: linear-gradient(to right, hsla(24, 20%, 50%, 0.1) 70%, hsla(24, 20%, 50%, 0));
  120. pointer-events: none;
  121. line-height: inherit;
  122. white-space: pre;
  123. }
  124. @media print {
  125. .line-highlight {
  126. /*
  127. * This will prevent browsers from replacing the background color with white.
  128. * It's necessary because the element is layered on top of the displayed code.
  129. */
  130. -webkit-print-color-adjust: exact;
  131. color-adjust: exact;
  132. }
  133. }
  134. .line-highlight:before,
  135. .line-highlight[data-end]:after {
  136. content: attr(data-start);
  137. position: absolute;
  138. top: 0.4em;
  139. left: 0.6em;
  140. min-width: 1em;
  141. padding: 0 0.5em;
  142. background-color: hsla(24, 20%, 50%, 0.4);
  143. color: hsl(24, 20%, 95%);
  144. font: bold 65%/1.5 sans-serif;
  145. text-align: center;
  146. vertical-align: 0.3em;
  147. border-radius: 999px;
  148. text-shadow: none;
  149. box-shadow: 0 1px white;
  150. }
  151. .line-highlight[data-end]:after {
  152. content: attr(data-end);
  153. top: auto;
  154. bottom: 0.4em;
  155. }
  156. .line-numbers .line-highlight:before,
  157. .line-numbers .line-highlight:after {
  158. content: none;
  159. }
  160. pre[id].linkable-line-numbers span.line-numbers-rows {
  161. pointer-events: all;
  162. }
  163. pre[id].linkable-line-numbers span.line-numbers-rows > span:before {
  164. cursor: pointer;
  165. }
  166. pre[id].linkable-line-numbers span.line-numbers-rows > span:hover:before {
  167. background-color: rgba(128, 128, 128, 0.2);
  168. }
  169. pre[class*='language-'].line-numbers {
  170. position: relative;
  171. padding-left: 3.8em;
  172. counter-reset: linenumber;
  173. }
  174. pre[class*='language-'].line-numbers > code {
  175. position: relative;
  176. white-space: inherit;
  177. }
  178. .line-numbers .line-numbers-rows {
  179. position: absolute;
  180. pointer-events: none;
  181. top: 0;
  182. font-size: 100%;
  183. left: -3.8em;
  184. width: 3em; /* works for line-numbers below 1000 lines */
  185. letter-spacing: -1px;
  186. border-right: 1px solid #999;
  187. -webkit-user-select: none;
  188. -moz-user-select: none;
  189. -ms-user-select: none;
  190. user-select: none;
  191. }
  192. .line-numbers-rows > span {
  193. display: block;
  194. counter-increment: linenumber;
  195. }
  196. .line-numbers-rows > span:before {
  197. content: counter(linenumber);
  198. color: #999;
  199. display: block;
  200. padding-right: 0.8em;
  201. text-align: right;
  202. }
  203. div.code-toolbar {
  204. position: relative;
  205. }
  206. div.code-toolbar > .toolbar {
  207. position: absolute;
  208. top: 0.3em;
  209. right: 0.2em;
  210. transition: opacity 0.3s ease-in-out;
  211. opacity: 0;
  212. }
  213. div.code-toolbar:hover > .toolbar {
  214. opacity: 1;
  215. }
  216. /* Separate line b/c rules are thrown out if selector is invalid.
  217. IE11 and old Edge versions don't support :focus-within. */
  218. div.code-toolbar:focus-within > .toolbar {
  219. opacity: 1;
  220. }
  221. div.code-toolbar > .toolbar .toolbar-item {
  222. display: inline-block;
  223. }
  224. div.code-toolbar > .toolbar a {
  225. cursor: pointer;
  226. }
  227. div.code-toolbar > .toolbar button {
  228. background: none;
  229. border: 0;
  230. color: inherit;
  231. font: inherit;
  232. line-height: normal;
  233. overflow: visible;
  234. padding: 0;
  235. -webkit-user-select: none; /* for button */
  236. -moz-user-select: none;
  237. -ms-user-select: none;
  238. }
  239. div.code-toolbar > .toolbar a,
  240. div.code-toolbar > .toolbar button,
  241. div.code-toolbar > .toolbar span {
  242. color: #bbb;
  243. font-size: 0.8em;
  244. padding: 0 0.5em;
  245. background: #f5f2f0;
  246. background: rgba(224, 224, 224, 0.2);
  247. box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2);
  248. border-radius: 0.5em;
  249. }
  250. div.code-toolbar > .toolbar a:hover,
  251. div.code-toolbar > .toolbar a:focus,
  252. div.code-toolbar > .toolbar button:hover,
  253. div.code-toolbar > .toolbar button:focus,
  254. div.code-toolbar > .toolbar span:hover,
  255. div.code-toolbar > .toolbar span:focus {
  256. color: inherit;
  257. text-decoration: none;
  258. }