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

Qiitaのコードの左側に選択不可能な行番号を追加するユーザースクリプト

More than 1 year has passed since last update.

 元ネタ

Qiita > 要望 > コード左側に行番号を表示 - Qiita

たまに作りたくなるネタを拝借しています。

最近選択不可のCSSを知ったばかりだったのでタイムリー

まぁ、個人で行番号が見えてn行目~と伝えても通じにくいんですが…

スクリーンショット

codenumber.JPG

codenumberless.JPG

codenumberdrag.JPG

動作検証環境

  • Firefox 46
  • greasemonkey

Qiitaのコードにコピーボタンを追加するユーザースクリプト - Qiita
との併用可能を確認しています。

コード

GistスクリプトリンクQiita_Code_Number.user.js

Qiita_Code_Number.user.js
// ==UserScript==
// @name        Qiita Code Number
// @namespace   khsk
// @description コードに選択不可能な行番号を追加する
// @include     http://qiita.com/*/items/*
// @include     https://qiita.com/*/items/*
// @include     http://qiita.com/*/private/*
// @include     https://qiita.com/*/private/*

// @version     1
// @grant       none
// ==/UserScript==

var style = document.createElement('style')
style.type      = 'text/css'
style.innerHTML = `
pre.khsk-codeNumber { 
  float:               left;
  user-select:         none; /* 追加した行番号は選択不可にする */
  -webkit-user-select: none;
  -moz-user-select:    none;
  -ms-user-select:     none;
  -o-user-select:      none;
  overflow-x:          hidden !important; /* スクロールバーはあるのもないのも不自然 */
}
pre.khsk-codeNumber:after {
  clear:               both;
}
`
document.getElementsByTagName('head')[0].appendChild(style)

var codes = document.querySelectorAll('div.highlight pre')
Array.prototype.forEach.call(codes, function(code) {
  var rows = code.innerText.split('\n')
  // 最後に改行が入っていることにより、空要素が生まれるため削除
  rows.pop()
  var length = rows.length
  var numbers = document.createElement('pre')
  numbers.className = 'khsk-codeNumber'
  for (let i = 0; i < length; ++i) {
    // 桁数は3桁までとする
    let number = ('  ' + (i + 1)).slice(-3)
    // Textでは改行が反映されない
    numbers.innerHTML += number + '\n'
  }

  code.parentElement.insertBefore(numbers,code)

})

やっていることは単純に<pre>を横並びに追加して、コードの行数を数えているだけですね。
ちょっと処理時間がかかる書き方な気がしていますし、配列にするのではなく'\n'の数をカウントした方がいいかな?とも思っています。
あとはCSSで選択不可にすれば、コードのみをドラッグで選択できます。

ちょっと左右の余白が多すぎる気もするので、そこはCSSを追加したり。
もしかしたらコード側の<pre>のCSSをいじらないとスッキリしないかもしれません。

廃案

ハイライトが無効になるためお蔵入り

// ==UserScript==
// @name        Qiita Code Number
// @namespace   khsk
// @description コードに選択不可能な行番号を追加する
// @include     http://qiita.com/*/items/*
// @include     http://qiita.com/*/private/*
// @version     1
// @grant       none
// ==/UserScript==

// 追加した行番号は選択不可にする
var style = document.createElement('style')
style.type      = 'text/css'
style.innerHTML = 'span.khsk-codeNumber { user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none;}'

document.getElementsByTagName('head')[0].appendChild(style)

var codes = document.querySelectorAll('div.highlight pre')
Array.prototype.forEach.call(codes, function(code) {
  var rows = code.innerText.split('\n')
  // 最後に改行が入っているので、空要素が生まれるため削除
  rows.pop()
  rows = rows.map((row, index, array)=>{
    // 桁数は3桁までとする
    let number = ('  ' + (index + 1)).slice(-3)
    return '<span class="khsk-codeNumber">' + number + ' </span>' + row
  })
  code.innerHTML = rows.join('\n')
})

夢想

行番号をクリックしたらその行を選択済みにする、ってコピペに便利そうですけど、<pre>じゃ厳しい気がしてならない。
できそう!って教えてもらえれば頑張って調べてみる。

khsk
週一ぐらいでなにか書いていました。 いろいろお休み中。
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
ユーザーは見つかりませんでした