如何設置 prismjs 復制到剪貼板按鈕的樣式？

Question

賞金將在 7 天后到期。 此問題的答案有資格獲得+150聲望賞金。 Anirudh希望引起對這個問題的更多關注。

我想復制 Ghost 使用prismjs設計的確切代碼塊設計。

這是鏈接 - https://ghost.org/tutorials/code-snippets-in-ghost/

最終結果必須類似於下面的屏幕截圖。

我嘗試的看起來像這樣。

我為 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-剪貼板+匹配大括號

Answer 1

出於您的目的，我認為自己設置選擇器會更容易。 Ghost.org 說：

首先，您可以編輯 prism.css 文件並更新值以更好地適應您的審美

解決方案1：

以下是我為您的任務所做的三項更改：

: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;
}

結果1：

我真的不知道您是否需要隱藏顏色預覽。 但如果是， span.inline-color-wrapper display更改為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
}

結果 2：

例如，您可以在tunes.css文件中編寫所有這些規則，並將其包含在prism.css之后，以便它們生效。

解決方案 2（獎金）：

如果您想要與頁面上完全相同的 styles

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

這是獲取主題文件的說明，下載並命名為prism.css

1. 在DevTools中打開“源”選項卡
2. 找到並點擊syntax-highlighting.css文件
3. 右鍵單擊內容為syntax-highlighting.css的選項卡
4. 另存為... prism.css

結果 3：

包含所有規則的片段，包括復制按鈕：

（但是，當使用來自 cdn 的 prism.js 時，此按鈕不顯示）

 /** * 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>