Skip to content

Instantly share code, notes, and snippets.

@austenc
Created December 31, 2019 16:26
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save austenc/542d6806e61c8c3485b0540fcaa82b9a to your computer and use it in GitHub Desktop.
Save austenc/542d6806e61c8c3485b0540fcaa82b9a to your computer and use it in GitHub Desktop.
Prism code highlighting style example for my website
& code {
@apply rounded p-1 m-0 bg-gray-300 text-orange-600;
}
& pre > code {
@apply rounded py-2 px-0 bg-transparent;
color: inherit;
}
& pre,
& pre[class*='language-'] {
@apply rounded py-3 px-6 overflow-auto;
}
pre[class*='language-'] {
@apply relative rounded bg-gray-900;
&::before {
@apply top-0 right-0 absolute z-20 text-xs mt-2 mr-2 text-gray-600 uppercase tracking-wide;
}
}
pre[class~='language-js'],
pre[class~='language-javascript'] {
&:before {
content: 'javascript';
}
}
pre[class~='language-php']:before {
content: 'php';
}
pre[class~='language-json']:before {
content: 'json';
}
pre[class~='language-sass']:before {
content: 'scss';
}
pre[class~='language-bash']:before {
content: 'bash';
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment