JezK

Edit File: prism.scss

@import '~prismjs/themes/prism.css'; @import '~prismjs/plugins/line-numbers/prism-line-numbers.css'; @import '~prismjs/plugins/toolbar/prism-toolbar.css'; @import '~prismjs/plugins/inline-color/prism-inline-color.css'; @import '~prismjs/plugins/previewers/prism-previewers.css'; @import '~prismjs/plugins/autolinker/prism-autolinker.css'; /* These lines are taken from '~prismjs/plugins/inline-color/prism-inline-color.css', adjusted to avoid autoprefixer complaining about deprecated syntax. Ideally, they can be removed if the file in question is updated. */ pre[data-line] { position: relative; padding-block: 1em; padding-inline: 3em 0; } .line-highlight { position: absolute; inset-inline: 0; padding: inherit; margin-block-start: 1em; background: hsl(24deg 20% 50% / 8%); background: linear-gradient(to right, hsl(24deg 20% 50% / 10%) 70%, hsl(24deg 20% 50% / 0%)); pointer-events: none; line-height: inherit; white-space: pre; @media print { print-color-adjust: exact; } &::before, &[data-end]::after { content: attr(data-start); position: absolute; inset-block-start: .4em; inset-inline-start: .6em; min-inline-size: 1em; padding-block: 0; padding-inline: .5em; background-color: hsl(24deg 20% 50% / 40%); color: hsl(24deg 20% 95%); font: bold 65%/1.5 sans-serif; text-align: center; vertical-align: .3em; border-radius: 999px; text-shadow: none; box-shadow: 0 1px white; } &[data-end]::after { content: attr(data-end); inset-block: auto .4em; } .line-numbers &::before, .line-numbers &::after { content: none; } /* Additional fixes to the behaviour of line highlighting with certain themes. */ .is-style-prism-coy-without-shadows pre[class*="language-"] & { margin-block-start: 0; } :not(.is-style-prism-shades-of-purple) pre[class*="language-"].line-numbers & { box-sizing: border-box; padding: 0; margin-block: 1em 0; margin-inline: 0; } } pre[id].linkable-line-numbers span.line-numbers-rows { pointer-events: all; > span::before { cursor: pointer; } > span:hover::before { background-color: rgb(128 128 128 / 20%); } }