GitLab 的 Markdown 文档代码块渲染目前没有代码复制快捷键,要手动选择代码复制才行。所以写了个油猴脚本,在 GitLab 查看 Markdown 里面的代码时,可以方便的点击复制按钮复制里面的代码。
未使用脚本效果
使用脚本效果
点击代码块右上角的复制图标按钮即可直接复制对应代码块中的代码。
脚本代码
// ==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/logo@96.png // @icon64 https://zixizixi.cn/images/logo/logo@96.png // @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
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于