子兮子兮

2022年3月10日 更新：最新版 GitLab 已原生支持 Markdown 代码块复制按钮...

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

未使用脚本效果

使用脚本效果

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

脚本代码

 1// ==UserScript==
 2// @name         GitLabMarkdownCodeCopy
 3// @namespace    http://zixizixi.cn/
 4// @homepage     http://zixizixi.cn/
 5// @version      0.1
 6// @description  GitLab Markdown 代码块复制按钮
 7// @author       iTiki
 8// @match        *://192.168.0.9/* // GitLab 私服
 9// @match        *://*.gitlab.com/*
10// @match        *://gitlab.com/*
11// @icon         https://zixizixi.cn/images/logo/logo@96.png
12// @icon64       https://zixizixi.cn/images/logo/logo@96.png
13// @supportURL   https://zixizixi.cn/gitlab-markdown-code-copy-tampermonkey
14// @run-at       document-end
15// @grant        none
16// ==/UserScript==
17
18(function() {
19    'use strict';
20
21    // Your code here...
22    // 可适当调整按钮定位样式：right: 52px
23    var getCopyBtn = function(attrSelector) {
24        return `<button aria-label="复制代码块内容" title="复制代码块内容" class="btn btn-default btn-md gl-button btn-icon" style="position: absolute;margin-top: -5px;right: 52px;"
25            data-clipboard-target="[data-sourcepos='${attrSelector}']" data-testid="copyContentsButton" data-qa-selector="copy_contents_button" type="button">
26            <svg data-testid="copy-to-clipboard-icon" role="img" aria-hidden="true" class="gl-button-icon gl-icon s16">
27              <use href="/assets/icons-74e006cef5a76d001c81e4dda159833de67bd6dbd16e42db899bbe43f2a76cf2.svg#copy-to-clipboard"></use>
28            </svg>
29          </button>`
30    }
31
32    window.onload = function() {
33        setTimeout(function() {
34            document.querySelectorAll('div.blob-viewer pre[data-sourcepos]').forEach(function(o, i) {
35                var selector = o.attributes['data-sourcepos'].value,
36                    target = document.querySelector(`[data-sourcepos='${selector}']`),
37                    copyNode = new DOMParser().parseFromString(getCopyBtn(selector), 'text/html').body.childNodes[0];
38
39                target.insertBefore(copyNode, target.childNodes[0]);
40            });
41        }, 3e3)
42    }
43
44})();

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