GitLab Markdown 代码块复制按钮油猴脚本

本贴最后更新于 230 天前,其中的信息可能已经沧海桑田

GitLab 的 Markdown 文档代码块渲染目前没有代码复制快捷键,要手动选择代码复制才行。所以写了个油猴脚本,在 GitLab 查看 Markdown 里面的代码时,可以方便的点击复制按钮复制里面的代码。

未使用脚本效果

image.png

使用脚本效果

image.png

点击代码块右上角的复制图标按钮即可直接复制对应代码块中的代码。

脚本代码

// ==UserScript==
// @name         GitLabMarkdownCodeCopy
// @namespace    http://zixizixi.cn/
// @homepage     http://zixizixi.cn/
// @version      0.1
// @description  GitLab Markdown 代码块复制按钮
// @author       iTiki
// @match        *://192.168.0.9/* // GitLab 私服
// @match        *://*.gitlab.com/*
// @match        *://gitlab.com/*
// @icon         https://zixizixi.cn/images/logo/[email protected]
// @icon64       https://zixizixi.cn/images/logo/[email protected]
// @supportURL   https://zixizixi.cn/gitlab-markdown-code-copy-tampermonkey
// @run-at       document-end
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Your code here...
    // 可适当调整按钮定位样式:right: 52px
    var getCopyBtn = function(attrSelector) {
        return `<button aria-label="复制代码块内容" title="复制代码块内容" class="btn btn-default btn-md gl-button btn-icon" style="position: absolute;margin-top: -5px;right: 52px;"
            data-clipboard-target="[data-sourcepos='${attrSelector}']" data-testid="copyContentsButton" data-qa-selector="copy_contents_button" type="button">
            <svg data-testid="copy-to-clipboard-icon" role="img" aria-hidden="true" class="gl-button-icon gl-icon s16">
              <use href="/assets/icons-74e006cef5a76d001c81e4dda159833de67bd6dbd16e42db899bbe43f2a76cf2.svg#copy-to-clipboard"></use>
            </svg>
          </button>`
    }

    window.onload = function() {
        setTimeout(function() {
            document.querySelectorAll('div.blob-viewer pre[data-sourcepos]').forEach(function(o, i) {
                var selector = o.attributes['data-sourcepos'].value,
                    target = document.querySelector(`[data-sourcepos='${selector}']`),
                    copyNode = new DOMParser().parseFromString(getCopyBtn(selector), 'text/html').body.childNodes[0];

                target.insertBefore(copyNode, target.childNodes[0]);
            });
        }, 3e3)
    }

})();

2021 年 12 月 25 日一个人发布于 https://zixizixi.cn/gitlab-markdown-code-copy-tampermonkey

  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    700 引用 • 1147 回帖 • 485 关注
  • tampermonkey
    3 引用 • 17 回帖
  • GitLab

    GitLab 是利用 Ruby 一个开源的版本管理系统,实现一个自托管的 Git 项目仓库,可通过 Web 界面操作公开或私有项目。

    43 引用 • 72 回帖 • 1 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
iTanken
飘风不终朝,骤雨不终日。 成都