css - 如何设置 prismjs 复制到剪贴板按钮的样式？-6ren

css - 如何设置 prismjs 复制到剪贴板按钮的样式？

转载作者：行者123 更新时间：2023-12-05 05:34:11

我想复制 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-clipboard+match-braces

最佳答案

解决方案 1:

如果你想要和页面上的样式一模一样

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

这是获取他们的主题文件的说明，下载并命名为 prism.css

在 DevTools 中打开“Sources”选项卡
找到并点击/tutorials/assets/built/components/syntax-highlighting.css文件
右键单击内容为 syntax-highlighting.css
另存为... prism.css

包含复制按钮在内的所有规则的代码段:

(当使用来自 CDN 的 prism.js 时，该按钮未显示在片段中)

相似度是通过添加css规则实现的，但是没有动画。

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


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

div.code-toolbar>.toolbar>.toolbar-item{
    display:inline-block
}
div.code-toolbar>.toolbar>.toolbar-item>a{
    cursor:pointer
}

/* feature styles for buttons */

/* icon copy */
div.code-toolbar>.toolbar>.toolbar-item>button > span
{
    color: transparent;
    background-color:#e6caa8;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'%3E%3C/path%3E%3Cpath d='M7 6V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 3 21l.003-14c0-.552.45-1 1.007-1H7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E");
    mask-repeat: no-repeat no-repeat;
    mask-position: center right;
}

/* hide icon copy */
div.code-toolbar>.toolbar>.toolbar-item>button[data-copy-state=copy-success] > span ,
div.code-toolbar>.toolbar>.toolbar-item>button[data-copy-state=copy-success]:hover > span
{
    mask-image: none;
    color: #e6caa8;
    background-color: transparent;
}

/* color of "Copied!" */
.copy-to-clipboard-button[data-copy-state~=copy-success] span {
    color: #e6caa8;
}

/* text copy is hidden */
.copy-to-clipboard-button[data-copy-state=copy] span {
    color: transparent;
}

/* default item color */
div.code-toolbar>.toolbar>.toolbar-item {
   color: #e6caa8; 
}

/* remove toolbar items decoration*/
div.code-toolbar > .toolbar > .toolbar-item > a, 
div.code-toolbar > .toolbar > .toolbar-item > button, 
div.code-toolbar > .toolbar > .toolbar-item > span {
    background-color: transparent;
    border: 0;
    box-shadow: 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>

解决方案 2:

代码中最有趣的部分来自研究 ghost.org 上的源代码(按钮事件:/tutorials/src/js/post/code-copy.js) 和 github 上按钮的来源, 但是，为了让它工作，我不得不将两个脚本共生因为它不能正常工作(来自 github 的函数 copyTextToClipboard、fallbackCopyTextToClipboard 已转换为异步)。

现在复制按钮的外观和功能与原始按钮一样:

function initCodeCopy() {
    const codeBlocks = document.querySelectorAll('code[class*="language-"]');
    codeBlocks.forEach((block) => {
      const lang = parseLanguage(block);
      const referenceEl = block.parentElement;
      const parent = block.parentElement.parentElement;
      
      const wrapper = document.createElement('div');
      wrapper.className = 'code-wrapper';
      parent.insertBefore(wrapper, referenceEl);
      wrapper.append(block.parentElement);

      const copyBtn = document.createElement('button');
      copyBtn.setAttribute('class', 'copy-button');
      copyBtn.setAttribute('data-lang', lang);
      copyBtn.innerHTML = `${lang} <svg viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M7 6V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 3 21l.003-14c0-.552.45-1 1.007-1H7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z" fill="currentColor"/></svg>`;

      wrapper.insertAdjacentElement('beforeend', copyBtn);
    });

    function parseLanguage(block) {
      const className = block.className;
      if (className.startsWith('language')) {
        const [prefix, lang] = className.split('-');
        return lang;
      }
    }

        async function fallbackCopyTextToClipboard(text) {
            return new Promise((resolve, reject) => {
                var textArea = document.createElement('textarea');
                textArea.value = copyInfo.getText();
                // Avoid scrolling to bottom
                textArea.style.top = '0';
                textArea.style.left = '0';
                textArea.style.position = 'fixed';
                document.body.appendChild(textArea);
                textArea.focus();
                textArea.select();
                try {
                    var successful = document.execCommand('copy');
                    setTimeout(function () {
                        if (successful) {
                            resolve('success')
                        } else {
                            reject('error')
                        }
                    }, 1);
                } catch (err) {
                    setTimeout(function () {
                        reject(err)
                    }, 1);
                } finally {
                    document.body.removeChild(textArea);
                }
            })  
        }
    
        async function copyTextToClipboard(text) {
            return new Promise((resolve, reject) => {
                if (navigator.clipboard) {
                    navigator.clipboard.writeText(text).then(
                        resolve(), function () {
                        // try the fallback in case `writeText` didn't work
                        fallbackCopyTextToClipboard(text).then(
                            () => resolve(),
                            () => reject()
                        )
                    });
                } else {
                    fallbackCopyTextToClipboard(text).then(
                        () => resolve(),
                        () => reject()
                    )
                }
            })
        }

    function copy(e) {
        const btn = e.currentTarget;
        const lang = btn.dataset.lang;
        const text = e.currentTarget.previousSibling.children[0].textContent;
        copyTextToClipboard(text)
            .then(
            () => {
                btn.innerHTML = `copied! <svg viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M7 6V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 3 21l.003-14c0-.552.45-1 1.007-1H7zm2 0h8v10h2V4H9v2z" fill="currentColor"/></svg>`;
                btn.setAttribute('style', 'opacity: 1');
                
            },
            () => alert('failed to copy'),
        );

        setTimeout(() => {
            btn.removeAttribute('style');
            btn.innerHTML = `${lang} <svg viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M7 6V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 3 21l.003-14c0-.552.45-1 1.007-1H7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z" fill="currentColor"/></svg>`;
        }, 3000);
    }

    const copyButtons = document.querySelectorAll('.copy-button');

    copyButtons.forEach((btn) => {
        btn.addEventListener('click', copy);
    });
    }
    initCodeCopy()

/**
 * MIT License
 * Copyright (c) 2018 Sarah Drasner
 * Sarah Drasner's[@sdras] Night Owl
 * Ported by Sara vieria [@SaraVieira]
 * Added by Souvik Mandal [@SimpleIndian]
 */
* {
  margin:0; /* make bottom corners round */
}

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

<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 class="language-css"><code class="language-css">.token.boolean,
    .token.number,
    .token.function {
            color: #f08d49;
    }
</code></pre>

关于css - 如何设置 prismjs 复制到剪贴板按钮的样式？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/73671616/

文章推荐： markdown - Github markdown render 不等同于 VS Code

文章推荐： java - JMM : Why this outcome is illegal?

文章推荐： reactjs - 我在使用 Elements of stripe 时遇到 React router v6 问题

c# - 剪贴板.设置比较
当尝试复制到剪贴板时，有什么区别 Clipboard.SetData(DataFormats.Text, ""); 和 Clipboard.SetText(""); 最佳答案 SetText 只是 S
c# - 剪贴板将对象复制到和从中复制
我正在尝试将一个对象复制到 Windows 剪贴板上，然后再次关闭。我的代码是这样的: 复制到剪贴板: Clipboard.Clear(); DataObject newObject = new Da
C# 剪贴板.GetText()
如何在非静态线程中获取剪贴板文本？我有一个解决方案，但我正在尝试获得最干净/最短的方法。正常调用时结果为空字符串。最佳答案我会添加一个辅助方法，它可以在 MTA 主线程中将 Action 作为 S
macos - Applescript到 "paste"剪贴板
我正在研究Applescript，将上次复制的内容粘贴到任何当前字段中。它将与VoiceOver一起使用，并且关键代码方式(我所知道的唯一方式)并非始终有效。 tell application
cygwin 命令复制到 Windows 剪贴板
我在这里看到: http://www.pgrs.net/2008/1/11/command-line-clipboard-access Linux 和 osx 中有一种方法可以从命令行复制到剪贴板。所
javascript - PhpStorm 剪贴板 API
我正在尝试使用已在浏览器中运行的 Clipboard API，但 PhpStorm 不知道它。怎样才能让 PhpStorm 识别它？我已在项目设置中将 JavaScript 语言版本设置为 ECMA
clipboard - Wayland 剪贴板 API
Wayland 中有剪贴板 API 之类的东西吗？或者我应该在哪里以编程方式将内容粘贴到剪贴板？我在 Wayland 上运行 Fedora 24。如果我觉得有一个剪贴板完全没问题，那么有代码示例(
perl - 将提交评论复制到 Windows 剪贴板
我最近看到一个针对 ClearCase 的绝妙 hack，其中版本号作为提交的一部分被添加到 Windows 剪贴板。黑客看起来像这样: @rem = ' PERL for Windows NT -
c# - 剪贴板 + PresentationFramework = OutOfMemoryException？
为什么 System.Windows.Clipboard(PresentationCore.dll) 对System.Windows.Thickness (PresentationFramework.
c# - 无法在单元测试中设置 WinForms 剪贴板
我想用来自 NUnit 测试的文本填充 Forms.Clipboard。我遇到的第一个问题是剪贴板必须在STA模式下使用。我找到了 the solution (NUnit 2.5.x+) 在方法上设
java - 选择器中缺少 Android 剪贴板
当我想在我的应用程序中共享基本纯文本时，将其复制到剪贴板的选项不会显示在选择器列表中。我的代码有问题吗？还是我的设备设置有误？ String code = getXMLCode(); Intent s
javascript - LibGDX html 剪贴板
我在LibGDX开发游戏，游戏中有登录界面和注册界面。 HTML 版本的游戏有剪贴板的沙盒环境，意味着: 任何从游戏中复制的东西，都不能粘贴到游戏外&从外部复制的任何内容都不能粘贴到游戏的文本字段中
IOS 剪贴板(复制粘贴)无法跨应用程序
我有一个奇怪的问题，我相信我可能只需要一些权利来声明使其工作。我有一些用户可以复制文本的 TextView ，并且可以将其粘贴到应用程序内的另一个文本字段中。但是当用户退出(或暂停)应用程序时，用户
C# - 剪贴板 Hook 检查正在复制的数据是真的图像还是文本？
我有一个小程序正在监听图像的剪贴板( Hook )。如果有存储或通过ctrl+c等复制的图像，我的程序会自动将图像粘贴到打开的word文档中。代码: if (Clipboard.ContainsIm
linux - 从终端脚本访问 Linux 剪贴板
我正在使用在 Linux Mint 上运行的终端仿真器(准确地说是 MATE)，它在 Windows 托管的虚拟机中运行。我通过 ssh 连接到 CentOS Linux 上的 bash shell。
windows - 如何将脚本的输出复制到 Windows 剪贴板？
我发现自己在运行脚本并将这些运行的输出复制粘贴到电子邮件或其他一些文档中。有没有办法让复制到剪贴板的步骤成为脚本本身的一部分？我的大部分脚本都是 Perl 或 bat 文件，我在 Windows 上工
.net - 访问 Windows 剪贴板
如何使用 .NET 框架访问剪贴板内容？最佳答案检查 Clipboard类及其 SetText\GetText 方法。另请参阅本教程: Clipboard Copy and Paste with
c++ - 我是否错误地使用了 Windows 剪贴板？
我有一些代码要复制和粘贴: void WinClipboard::copy( const std::string& input ) { LPWSTR lptstrCopy;
c# - 从那里获取数据然后返回到 Windows 剪贴板
我想获取当前存储在 Windows 剪贴板中的数据并将其保存在一个变量中，然后将数据放回剪贴板。现在我正在使用这段代码: object l_oClipBrdData = Clipboard.GetD
android - 是否可以将视频复制到 android 剪贴板？
引用topic这解释了如何将数据复制到 android 剪贴板，是否可以将视频/音频文件复制到剪贴板。我假设视频/音频文件以二进制值存储并再次绑定(bind)以将它们作为视频/音频播放。需要您的建

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

css - 如何设置 prismjs 复制到剪贴板按钮的样式？