Redmine에서 코드 표시에 행 번호 추가(IE 불가)

ViewCustomizePlugin을 사용합니다.
  • Redmine3.4, 4.0
  • Chrome/Firefox/Edge

  • 에서 동작 확인했습니다.
    IE에서는 움직이지 않았다…

    경로 패턴 : /.*유형 : JavaScript
    $(function(){
    
      // Redmine 3.x
      //const highlightClass='.CodeRay';
      // Redmine 4.x
      const highlightClass = "[class$='syntaxhl']";
    
      let codeBlocks = document.querySelectorAll( highlightClass );
    
      let LINE_DELIM_EXP = /\n(?!$)/g;
    
      Array.prototype.forEach.call(codeBlocks,function( codeBlock ) {
    
        if (codeBlock.tagName != "CODE") { return; }
    
        // 行数取得
        let codeLines = codeBlock.innerHTML.split(LINE_DELIM_EXP);
        // 行の桁数
        let figures = String(codeLines.length).length;
    
        let newCode = '';
    
        Array.prototype.forEach.call(codeLines , function ( codeLine , index ) {
    
          // 行番号をつける
          let lineStr = (Array(figures).fill(' ').join('') + ( index + 1 ) ).slice( -1 * figures );
          let lineNumber = document.createElement("span");
          lineNumber.innerHTML = lineStr + ' ';
    //      lineNumber.className = 'line-numbers';
          lineNumber.style = 'padding: 2px 4px 2px 4px; background-color: #eee; margin:0px 5px 0px 0px;';
    
          newCode += lineNumber.outerHTML;
          newCode += codeLine;
          newCode += '\n';
        });
        codeBlock.innerHTML = newCode;
    
      });
    });
    
  • 4행/6행은 Redmine의 버전에 맞추어 주세요.
  • 옛 Redmine의 소스에서는, class="line-numbers"가 되어 있었습니다만, 지금의 Redmine의 CSS에는 존재하지 않는 것 같기 때문에, 적당하게 style를 쓰고 있습니다.

  • 이런 느낌이 듭니다.

    좋은 웹페이지 즐겨찾기