Dracula Theme For Prism.js Syntax Highlighting.
Includes Implementation Instructions and some additional (and unnecessary) presentational stylization/formatting.
Praise be to glory that is click-to-copy.
A Pen by Matt Daniel Brown on CodePen.
Created
April 11, 2023 09:53
-
-
Save neisdev/77c367c1093c5d9f6e4c10df64bb280e to your computer and use it in GitHub Desktop.
Dracula Theme For Prism.js Syntax Highlighting (Includes Quick-Implementation Instructions)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="unused-notice"> | |
| <h1>dracula color scheme</h1> | |
| <h5>Prism.js Syntax Highlighting Theme</h5> | |
| <br> | |
| <div class="copy-instructions-wrapper"> | |
| <h5>None of this Pen is actually "Doing" anything...</h5> | |
| <h3> <mark><em>So, to use :</em></mark> </h3> | |
| <h6> <strong>Step One:</strong> Just add the <code>Prism.js</code> library to your dependencies... <br> | |
| <br> | |
| <br> | |
| <strong>Step Two:</strong> | |
| Then Copy <strong>One</strong> Of The Following: | |
| </h6> | |
| <br> | |
| <div class="one"> | |
| <small class="code-snippet-lang-label">HTML</small> | |
| <small class="copy-label click-to-copy" data-clipboard-text='<link rel="stylesheet" href="https://codepen.io/matt-daniel-brown/pen/povrZGB.css">'>Click To Copy</small> | |
| <pre><code | |
| class="language-html click-to-copy" | |
| id="html-snippet" | |
| data-clipboard-text='<link rel="stylesheet" href="https://codepen.io/matt-daniel-brown/pen/povrZGB.css">' | |
| ><link rel="stylesheet" href="https://codepen.io/matt-daniel-brown/pen/povrZGB.css"></code></pre> | |
| </div> | |
| <div class="two"> | |
| <small class="code-snippet-lang-label">CSS ⁄ SCSS</small> | |
| <small class="copy-label click-to-copy" data-clipboard-text='@import url(https://codepen.io/matt-daniel-brown/pen/povrZGB.css)'>Click To Copy</small> | |
| <pre><code | |
| class="language-css click-to-copy" | |
| id="css-snippet" | |
| data-clipboard-text='@import url(https://codepen.io/matt-daniel-brown/pen/povrZGB.css)' | |
| >@import url(https://codepen.io/matt-daniel-brown/pen/povrZGB.css)</code></pre> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="copy-notification"> | |
| <p>Code Snippet Contents Copied To Your Clipboard</p> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const htmlSnippetElement = document.getElementById('html-snippet'); | |
| const cssSnippetElement = document.getElementById('css-snippet'); | |
| // const copyNotification = document.getElementById('copy-notification'); | |
| const copyNotification = $('#copy-notification'); | |
| var clipboard = new ClipboardJS('.click-to-copy'); | |
| $('#copy-notification').hide(); | |
| function showCopyNotification() { | |
| // copyNotification.classList.add('copy-notification-animate'); | |
| // copyNotification.addEventListener('animationend', function() { | |
| // copyNotification.classList.remove('copy-notification-animate'); | |
| // }); | |
| copyNotification.fadeIn(120).fadeOut(3000); | |
| } | |
| clipboard.on('success', function(e) { | |
| console.info('Accion:', e.action); | |
| console.info('Texto:', e.text); | |
| console.info('Trigger:', e.trigger); | |
| showCopyNotification(); | |
| // $('#copy-notification').slideUp(400).fadeIn(4000); | |
| e.clearSelection(); | |
| }); | |
| clipboard.on('error', function(e) { | |
| console.error('Accion:', e.action); | |
| console.error('Trigger:', e.trigger); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/prism.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import "bourbon@5.*"; | |
| // @import url(https://codepen.io/matt-daniel-brown/pen/povrZGB.css); | |
| $system-fonts: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", | |
| "Roboto", "Helvetica Neue", Arial, sans-serif !default; | |
| html { | |
| box-sizing: border-box !important; | |
| } | |
| *,*:before,*:after,*::before,*::after { | |
| box-sizing: inherit !important; | |
| text-rendering: optimizeLegibility !important; | |
| -webkit-font-smoothing: antialiased !important; | |
| -moz-osx-font-smoothing: grayscale !important; | |
| } | |
| $font-family-code: source-code-pro, Consolas, "Andale Mono WT", "Andale Mono", | |
| "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", | |
| "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, | |
| "Courier New", Courier, monospace; | |
| @import url("https://fonts.googleapis.com/css?family=Inconsolata:400,700"); | |
| $inconsolata: Inconsolata, monospace; | |
| #demo-body { | |
| height: 100%; | |
| min-height: 100vh; | |
| width: 100%; | |
| min-width: 100vw; | |
| overflow-x: hidden; | |
| margin: 0 !important; | |
| padding: 0 !important; | |
| position: relative; | |
| p { | |
| font-weight: 500; | |
| line-height: 1; | |
| } | |
| } | |
| #unused-notice { | |
| // font-family: $font-family-code; | |
| font-family: $inconsolata; | |
| font-weight: 300; | |
| h1 { | |
| text-transform: capitalize; | |
| font-weight: bold !important; | |
| letter-spacing: 4px; | |
| color: mediumslateblue; | |
| text-shadow: 0 4px 8px rgba(black, 0.85), 0 0 8px mediumslateblue; | |
| } | |
| p { | |
| letter-spacing: 3px; | |
| $_color: tint(mediumblue, 60%); | |
| color: rgba($_color, 0.5); | |
| font-weight: bold; | |
| } | |
| color: white; | |
| width: 100vw; | |
| height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| align-content: center; | |
| justify-content: center; | |
| text-align: center; | |
| background: #000; | |
| background: shade(mediumslateblue, 85%); | |
| } | |
| pre { | |
| line-height: 1 !important; | |
| border-radius: 4px !important; | |
| margin: 1em auto !important; | |
| padding: 0.5em !important; | |
| vertical-align: middle; | |
| display: flex; | |
| flex-direction: column; | |
| align-content: center; | |
| align-items: flex-start; | |
| justify-content: center; | |
| padding: 14px !important; | |
| padding-top: 16px !important; | |
| // margin-bottom: 0 !important; | |
| // padding-bottom: 0 !important; | |
| } | |
| pre > code { | |
| font-family: $inconsolata !important; | |
| font-family: $font-family-code !important; | |
| font-weight: 600; | |
| font-size: 13px !important; | |
| padding-left: 1em !important; | |
| padding-right: 1em !important; | |
| vertical-align: middle !important; | |
| line-height: 3 !important; | |
| margin-bottom: 0 !important; | |
| padding-bottom: 0 !important; | |
| } | |
| .copy-instructions-wrapper { | |
| text-align: left; | |
| h5, h4 { | |
| color: rgba(white, 0.35) !important; | |
| line-height: 1 !important; | |
| margin-bottom: 0 !important; | |
| margin-top: 1em !important; | |
| } | |
| p { | |
| line-height: 1 !important; | |
| margin-bottom: 0 !important; | |
| font-size: small; | |
| color: rgba(white, 0.35) !important; | |
| letter-spacing: 0.5px !important; | |
| margin-top: 4px !important; | |
| margin-bottom: 0 !important; | |
| padding: 0 !important; | |
| } | |
| } | |
| .one, | |
| .two { | |
| position: relative; | |
| margin: 0 auto; | |
| margin-bottom: 3em !important; | |
| } | |
| .code-snippet-lang-label { | |
| position: absolute; | |
| // top: -2.75em; | |
| left: 0; | |
| letter-spacing: normal; | |
| font-family: $system-fonts; | |
| font-weight: 600 !important; | |
| opacity: 0.25; | |
| top: 2px; | |
| // background: rgba(#000, 0.3) !important; | |
| font-size: 8px !important; | |
| line-height: 0 !important; | |
| margin: 0 !important; | |
| padding: 6px !important; | |
| // margin-top: 16px !important; | |
| // margin-bottom: -16px !important; | |
| } | |
| .copy-label { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| letter-spacing: normal; | |
| font-family: $system-fonts; | |
| font-weight: 600 !important; | |
| opacity: 0.5; | |
| background: rgba(#000, 0.3) !important; | |
| font-size: 9px !important; | |
| line-height: 1 !important; | |
| margin: 0 !important; | |
| padding: 6px !important; | |
| // margin-top: 16px !important; | |
| // margin-bottom: -16px !important; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| transition: all 200ms; | |
| &:hover { | |
| background: rgba(#000, 0.6) !important; | |
| } | |
| &:active { | |
| background: rgba(#000, 1) !important; | |
| } | |
| } | |
| @keyframes notify-animation { | |
| 0% { | |
| opacity: 0.0; | |
| } | |
| 5% { | |
| display: block; | |
| opacity: 0.0; | |
| } | |
| 50% { | |
| opacity: 1; | |
| } | |
| 75% { | |
| opacity: 0.0; | |
| } | |
| 90% { | |
| opacity: 0.0; | |
| } | |
| 100% { | |
| display: none; | |
| opacity: 0.0; | |
| } | |
| } | |
| .copy-notification-animate { | |
| animation-name: notify-animation; | |
| animation-duration: 4s; | |
| animation-fill-mode: both; | |
| animation-direction: alternate reverse; | |
| } | |
| #copy-notification { | |
| // display: none; | |
| // transition: all 4s !important; | |
| position: absolute; | |
| z-index: 1000; | |
| bottom: 3em; | |
| left: 25%; | |
| right: 25%; | |
| background: #221f42; | |
| border: #302b5b solid 2px; | |
| border-radius: 4px; | |
| padding: 1em; | |
| line-height: 1 !important; | |
| text-align: center; | |
| box-shadow: 0 0 16px rgba(white, 0.1); | |
| p { | |
| text-align: center; | |
| line-height: 1 !important; | |
| margin: 0 auto !important; | |
| // color: white; | |
| color: #5e5c75; | |
| // opacity: 0.3; | |
| font-weight: 500 !important; | |
| letter-spacing: 1px; | |
| font-size: 14px !important; | |
| } | |
| } | |
| h6 { | |
| font-weight: normal; | |
| opacity: 0.8; | |
| code { | |
| font-family: monospace; | |
| font-weight: bold; | |
| font-size: large; | |
| } | |
| } | |
| strong { | |
| font-size: large; | |
| opacity: 1; | |
| font-weight: bolder !important; | |
| } | |
| em { | |
| opacity: 1 !important; | |
| color: lightgray; | |
| } | |
| mark, mark strong, mark em { | |
| color: rgba(#000000, 0.85) !important; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/0.6.0/modern-normalize.min.css" rel="stylesheet" /> | |
| <link href="https://codepen.io/matt-daniel-brown/pen/povrZGB.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment