How to style prismjs copy to clipboard button?

Question

. 。 Answers to this question are eligible for a +150 reputation bounty. Anirudh wants to to this question. 。

I want to copy the exact code block design designed by Ghost using prismjs .

Here is the link - https://ghost.org/tutorials/code-snippets-in-ghost/

The end result must look like the below screenshot.

What I tried looks like this.

Link for the settings I enabled for the code block formatting in prismjs.

https://prismjs.com/download.html#themes=prism-okaidia&languages=css+clike+javascript+css-extras&plugins=autolinker+custom-class+show-language+inline-color+autoloader+toolbar+copy-to-clipboard+match-braces

Answer 1

For your purpose, I think it will be easier to set up the selectors yourself. Ghost.org says:

First, you can edit the prism.css file and update the values to better suit your aesthetic

Solution 1:

Here are three changes that I made for your task:

:not(pre)>code[class*=language-],pre[class*=language-]{
    /* background:#272822 */
    background:#021627;
}

.token.constant,.token.deleted,.token.property,.token.symbol,.token.tag{
    /* color:#f92672 */
    color: #80cbc4;
}

.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{
    /* color:#a6e22e */
    color: #c792ea;
}

Result 1:

I really don't know if you need to hide the color preview. But if yes, change display of span.inline-color-wrapper to none

 span.inline-color-wrapper{
    background:url(data:image/svg+xml;
    base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyIDIiPjxwYXRoIGZpbGw9ImdyYXkiIGQ9Ik0wIDBoMnYySDB6Ii8+PHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0wIDBoMXYxSDB6TTEgMWgxdjFIMXoiLz48L3N2Zz4=);
    background-position:center;
    background-size:110%;
    display: none; /* inline-block; */
    height:1.333ch;
    width:1.333ch;
    margin:0 .333ch;
    box-sizing:border-box;
    border:1px solid #fff;
    outline:1px solid rgba(0,0,0,.5);
    overflow:hidden
}

Result 2:

You can write all these rules for example in the tunes.css file and include it after prism.css so they will take effect.

Solution 2 (bonus):

If you want exactly the same styles as on the page

https://ghost.org/tutorials/code-snippets-in-ghost/

here is a instruction to get their theme file, download and name it prism.css

1. Open the 'Sources' tab in the DevTools
2. Find and click on the syntax-highlighting.css file
3. Right click on a tab with content of syntax-highlighting.css
4. Save as... prism.css

Result 3:

Snippet with all rules including copy button :

(however this button is not shown when using prism.js from cdn)

 /** * MIT License * Copyright (c) 2018 Sarah Drasner * Sarah Drasner's[@sdras] Night Owl * Ported by Sara vieria [@SaraVieira] * Added by Souvik Mandal [@SimpleIndian] */ code[class*="language-"], pre[class*="language-"] { font-family: var(--font-mono); font-size: inherit; hyphens: none; line-height: 1.6; color: #d6deeb; text-align: left; word-break: normal; word-wrap: normal; tab-size: 4; tab-size: 4; tab-size: 4; white-space: pre; word-spacing: normal; -webkit-font-smoothing: auto; } pre[class*="language-"]::selection, pre[class*="language-"]::selection, code[class*="language-"]::selection, code[class*="language-"]::selection { text-shadow: none; background: rgb(29 59 83 / 99%); } pre[class*="language-"]::selection, pre[class*="language-"]::selection, code[class*="language-"]::selection, code[class*="language-"]::selection { text-shadow: none; background: rgb(29 59 83 / 99%); } @media print { code[class*="language-"], pre[class*="language-"] { text-shadow: none; } } /* Code blocks */ pre[class*="language-"] { padding: 25px; margin-top: 3.2vmin; overflow: auto; }:not(pre) > code[class*="language-"], pre[class*="language-"] { color: white; background: #011627; }:not(pre) > code[class*="language-"] { padding: 0.1em; white-space: normal; border-radius: 0.3em; }.token.comment, .token.prolog, .token.cdata { font-style: italic; color: rgb(99 119 119); }.token.punctuation { color: rgb(199 146 234); }.namespace { color: rgb(178 204 214); }.token.deleted { font-style: italic; color: rgb(239 83 80 / 56%); }.token.symbol, .token.property { color: rgb(128 203 196); }.token.tag, .token.operator, .token.keyword { color: rgb(127 219 202); }.token.boolean { color: rgb(255 88 116); }.token.number { color: rgb(247 140 108); }.token.constant, .token.function, .token.builtin, .token.char { color: rgb(130 170 255); }.token.selector, .token.doctype { font-style: italic; color: rgb(199 146 234); }.token.attr-name, .token.inserted { font-style: italic; color: rgb(173 219 103); }.token.string, .token.url, .token.entity, .language-css.token.string, .style.token.string { color: rgb(173 219 103); }.token.class-name, .token.atrule, .token.attr-value { color: rgb(255 203 139); }.token.regex, .token.important, .token.variable { color: rgb(214 222 235); }.token.important, .token.bold { font-weight: 700; }.token.italic { font-style: italic; } /* Custom styles for theme */.code-wrapper { position: relative; overflow: hidden; border-radius: 8px; }.code-wrapper > pre[class*="language-"] { margin-top: 0; }.copy-button { position: absolute; top: 5px; right: 5px; display: flex; align-items: center; color: rgb(230 202 168); cursor: pointer; background: transparent; background-color: #011627; border: none; }.copy-button svg { width: 1em; margin-left: 0.25em; opacity: 0.5; transition: opacity 0.3s; }.copy-button:hover svg { opacity: 1; } div.code-toolbar{ position:relative } div.code-toolbar>.toolbar{ position:absolute; z-index:10; top:.3em; right:.2em; transition:opacity.3s ease-in-out; opacity:0 } div.code-toolbar:hover>.toolbar{ opacity:1 } div.code-toolbar:focus-within>.toolbar{ opacity:1 } div.code-toolbar>.toolbar>.toolbar-item{ display:inline-block } div.code-toolbar>.toolbar>.toolbar-item>a{ cursor:pointer } div.code-toolbar>.toolbar>.toolbar-item>button{ background:0 0; border:0; color:inherit; font:inherit; line-height:normal; overflow:visible; padding:0; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none } div.code-toolbar>.toolbar>.toolbar-item>a,div.code-toolbar>.toolbar>.toolbar-item>button,div.code-toolbar>.toolbar>.toolbar-item>span{ color:#bbb; font-size:.8em; padding:0.5em; background:#f5f2f0; background:rgba(224,224,224,.2); box-shadow:0 2px 0 0 rgba(0,0,0,.2); border-radius:.5em } div.code-toolbar>.toolbar>.toolbar-item>a:focus,div.code-toolbar>.toolbar>.toolbar-item>a:hover,div.code-toolbar>.toolbar>.toolbar-item>button:focus,div.code-toolbar>.toolbar>.toolbar-item>button:hover,div.code-toolbar>.toolbar>.toolbar-item>span:focus,div.code-toolbar>.toolbar>.toolbar-item>span:hover{ color:inherit; text-decoration:none }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js" integrity="sha512-7Z9J3l1+EYfeaPKcGXu3MS/7T+w19WtKQY/n+xzmw4hZhJ9tyYmcUS+4QqAlzhicE5LAfMQSF3iFTK9bQdTxXg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <pre> <code class="language-css">.token.boolean, .token.number, .token.function { color: #f08d49; } </code> </pre>