Help us understand the problem. What is going on with this article?

Qiitaの記事内のコード部分を楽にコピペするユーザースクリプト

More than 5 years have passed since last update.
// ==UserScript==
// @name           Qiita: Select code block
// @description コードの右上のアイコンをクリックすると選択される
// @version        1.1
// @match          http://qiita.com/*
// @namespace      http://qiita.com/vzvu3k6k/
// @license        Public Domain
// ==/UserScript==

var style = document.createElement("style");
style.textContent = 
    '.code-frame .__select-code {' +
    '   display: none;' +
    '}' +
    '.code-frame:hover .__select-code {' +
    '   display: block;' +
    '   background: none repeat scroll 0 0 #EEEEEE;' +
    '   border-bottom: 1px solid #CCCCCC;' +
    '   border-left: 1px solid #CCCCCC;' +
    '   border-radius: 0 3px 0 3px;' +
    '   cursor: pointer;' +
    '   padding: 3px;' +
    '   float: right;' +
    '}';
document.head.appendChild(style);

document.addEventListener("DOMNodeInserted", function(e){
    var node = e.target;
    if(node.nodeType == Node.ELEMENT_NODE && node.classList.contains("code-frame"))
        if(!node.querySelector(".__select-code"))
            addSelectButton(e.target);
});

Array.prototype.forEach.call(document.querySelectorAll(".code-frame"), addSelectButton);

function addSelectButton(elmCodeFrame){
    var elmSelectButton = document.createElement("div");
    elmSelectButton.setAttribute("class", "__select-code");
    elmSelectButton.addEventListener("click", function(){
        select(elmCodeFrame.querySelector("pre"));
    });
    elmSelectButton.insertAdjacentHTML("afterbegin", '<i class="icon-paper-clip"/>');
    elmCodeFrame.insertBefore(elmSelectButton, elmCodeFrame.firstChild);
}

function select(elm){
    var select = window.getSelection();
    select.removeAllRanges();
    var range = document.createRange();
    range.selectNodeContents(elm);
    select.addRange(range);
}

qiita-select-code-block.user.js

コード上にマウスカーソルを乗せると右上にクリップアイコンが表示される。クリックするとテキストが選択される。

  • JavaScriptだけでクリップボードにコピーする方法が見つからなかった。
  • DOMの更新監視はMutationObserverでやりたかったけど、Firefoxにはsubtreeの監視が実装されてないので諦めた。
  • 途中までスクロールしてから「やっぱコピーしよう」と思い直したら上までスクロールしなおさないといけないのが面倒な気がする。Firefoxを使ってる人はコンテキストメニューをいじるバージョンを使ったほうが便利だと思う。

元ネタ: Qiita - 【要望】ボタンクリックでコードをコピーしたい - Qiita [キータ]

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした