prism.css 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204
  1. /**
  2. * prism.js default theme for JavaScript, CSS and HTML
  3. * Based on dabblet (http://dabblet.com)
  4. * @author Lea Verou
  5. */
  6. code[class*="language-"],
  7. pre[class*="language-"] {
  8. color: black;
  9. text-shadow: 0 1px white;
  10. font-family: Consolas, Monaco, 'Andale Mono', monospace;
  11. direction: ltr;
  12. text-align: left;
  13. white-space: pre;
  14. word-spacing: normal;
  15. -moz-tab-size: 4;
  16. -o-tab-size: 4;
  17. tab-size: 4;
  18. -webkit-hyphens: none;
  19. -moz-hyphens: none;
  20. -ms-hyphens: none;
  21. hyphens: none;
  22. }
  23. ::-moz-selection {
  24. text-shadow: none;
  25. background: #b3d4fc;
  26. }
  27. ::selection {
  28. text-shadow: none;
  29. background: #b3d4fc;
  30. }
  31. @media print {
  32. code[class*="language-"],
  33. pre[class*="language-"] {
  34. text-shadow: none;
  35. }
  36. }
  37. /* Code blocks */
  38. pre[class*="language-"] {
  39. padding: 1em;
  40. margin: .5em 0;
  41. overflow: auto;
  42. }
  43. :not(pre) > code[class*="language-"],
  44. pre[class*="language-"] {
  45. background: #f5f2f0;
  46. }
  47. /* Inline code */
  48. :not(pre) > code[class*="language-"] {
  49. padding: .1em;
  50. border-radius: .3em;
  51. }
  52. .token.comment,
  53. .token.prolog,
  54. .token.doctype,
  55. .token.cdata {
  56. color: slategray;
  57. }
  58. .token.punctuation {
  59. color: #999;
  60. }
  61. .namespace {
  62. opacity: .7;
  63. }
  64. .token.property,
  65. .token.tag,
  66. .token.boolean,
  67. .token.number {
  68. color: #905;
  69. }
  70. .token.selector,
  71. .token.attr-name,
  72. .token.string {
  73. color: #690;
  74. }
  75. .token.operator,
  76. .token.entity,
  77. .token.url,
  78. .language-css .token.string,
  79. .style .token.string {
  80. color: #a67f59;
  81. background: hsla(0,0%,100%,.5);
  82. }
  83. .token.atrule,
  84. .token.attr-value,
  85. .token.keyword {
  86. color: #07a;
  87. }
  88. .token.regex,
  89. .token.important {
  90. color: #e90;
  91. }
  92. .token.important {
  93. font-weight: bold;
  94. }
  95. .token.entity {
  96. cursor: help;
  97. }
  98. pre[data-line] {
  99. position: relative;
  100. padding: 1em 0 1em 3em;
  101. }
  102. .line-highlight {
  103. position: absolute;
  104. left: 0;
  105. right: 0;
  106. padding: inherit 0;
  107. margin-top: 1em; /* Same as .prism’s padding-top */
  108. background: hsla(24, 20%, 50%,.08);
  109. background: -moz-linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
  110. background: -webkit-linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
  111. background: -o-linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
  112. background: linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
  113. pointer-events: none;
  114. line-height: inherit;
  115. white-space: pre;
  116. }
  117. .line-highlight:before,
  118. .line-highlight[data-end]:after {
  119. content: attr(data-start);
  120. position: absolute;
  121. top: .4em;
  122. left: .6em;
  123. min-width: 1em;
  124. padding: 0 .5em;
  125. background-color: hsla(24, 20%, 50%,.4);
  126. color: hsl(24, 20%, 95%);
  127. font: bold 65%/1.5 sans-serif;
  128. text-align: center;
  129. vertical-align: .3em;
  130. border-radius: 999px;
  131. text-shadow: none;
  132. box-shadow: 0 1px white;
  133. }
  134. .line-highlight[data-end]:after {
  135. content: attr(data-end);
  136. top: auto;
  137. bottom: .4em;
  138. }
  139. pre.line-numbers {
  140. position: relative;
  141. padding-left: 3.8em;
  142. counter-reset: linenumber;
  143. }
  144. pre.line-numbers > code {
  145. position: relative;
  146. }
  147. .line-numbers .line-numbers-rows {
  148. position: absolute;
  149. pointer-events: none;
  150. top: 0;
  151. font-size: 100%;
  152. left: -3.8em;
  153. width: 3em; /* works for line-numbers below 1000 lines */
  154. letter-spacing: -1px;
  155. border-right: 1px solid #999;
  156. -webkit-user-select: none;
  157. -moz-user-select: none;
  158. -ms-user-select: none;
  159. user-select: none;
  160. }
  161. .line-numbers-rows > span {
  162. pointer-events: none;
  163. display: block;
  164. counter-increment: linenumber;
  165. }
  166. .line-numbers-rows > span:before {
  167. content: counter(linenumber);
  168. color: #999;
  169. display: block;
  170. padding-right: 0.8em;
  171. text-align: right;
  172. }