prism-line-highlight.css 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. pre[data-line] {
  2. position: relative;
  3. padding: 1em 0 1em 3em;
  4. }
  5. .line-highlight {
  6. position: absolute;
  7. left: 0;
  8. right: 0;
  9. padding: inherit 0;
  10. margin-top: 1em; /* Same as .prism’s padding-top */
  11. background: hsla(24, 20%, 50%,.08);
  12. background: linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
  13. pointer-events: none;
  14. line-height: inherit;
  15. white-space: pre;
  16. }
  17. @media print {
  18. .line-highlight {
  19. /*
  20. * This will prevent browsers from replacing the background color with white.
  21. * It's necessary because the element is layered on top of the displayed code.
  22. */
  23. -webkit-print-color-adjust: exact;
  24. color-adjust: exact;
  25. }
  26. }
  27. .line-highlight:before,
  28. .line-highlight[data-end]:after {
  29. content: attr(data-start);
  30. position: absolute;
  31. top: .4em;
  32. left: .6em;
  33. min-width: 1em;
  34. padding: 0 .5em;
  35. background-color: hsla(24, 20%, 50%,.4);
  36. color: hsl(24, 20%, 95%);
  37. font: bold 65%/1.5 sans-serif;
  38. text-align: center;
  39. vertical-align: .3em;
  40. border-radius: 999px;
  41. text-shadow: none;
  42. box-shadow: 0 1px white;
  43. }
  44. .line-highlight[data-end]:after {
  45. content: attr(data-end);
  46. top: auto;
  47. bottom: .4em;
  48. }
  49. .line-numbers .line-highlight:before,
  50. .line-numbers .line-highlight:after {
  51. content: none;
  52. }
  53. pre[id].linkable-line-numbers span.line-numbers-rows {
  54. pointer-events: all;
  55. }
  56. pre[id].linkable-line-numbers span.line-numbers-rows > span:before {
  57. cursor: pointer;
  58. }
  59. pre[id].linkable-line-numbers span.line-numbers-rows > span:hover:before {
  60. background-color: rgba(128, 128, 128, .2);
  61. }