帰ってきた徒然苔: サーバいらず版SyntaxHighlighterでもっと工夫を - 全選択機能の復活とBlogger固有の問題への対策

もうちょっとSyntaxHighlighterネタを引っ張ってみたいと思います。

Bloggerさんで以下のようなhtmlモードでコピーしたハイライト済みhtmlがある状態で作成モードに遷移すると、

ﾃｷｽﾄ行1 
 
ﾃｷｽﾄ行3 
 
ﾃｷｽﾄ行5 

こんな感じで間延びします。

ﾃｷｽﾄ行1

ﾃｷｽﾄ行3

ﾃｷｽﾄ行5

おまけに途中に空行がある場合、上記のように行番号も合わなくなる始末です。
原因は、作成モードに遷移するとhtmlが自動的に整形しなおされ、タグ間に改行文字が挟まれるためです。

さらに、本来の空行と改行してできた空行がごっちゃになって、行番号が合わないように見えるというからくりです。

まあ、ありのままに見せたい人向けにhtmlモードを用意してくれているのに、Bloggerさんに整形を任せる作成モードに自分で入ったんですから仕方がありません。

作成モードにしても保存しなけりゃいいんですが、両者を行ったり来たりできればなお便利です。
その対策を立てるとすると、結局見る直前で再整形してやるのが早いです。

この記事も、再整形機能を導入してhtmlモードにしてハイライト済みﾃｷｽﾄを貼り付けて、作成モードにして文章を入力して、の繰り返しで作成しました(いうまでもありませんが、上で例示した間延びﾃｷｽﾄは敢えてそのままにしてあります）。

再整形とは大仰ですが、実際にはやることは簡単で、改行文字を消して、本来の空行だったところに再度空行を追加するだけなので数行のｺｰﾄﾞで終わります。
具体的にはこんな感じです。引数のidにはハイライト済みhtmlが入ってるタグのidなら何でもいいですが、今回作ったcgiやhtmlではSyntaxHilighterが生成したidをそのまま流用していますので、そのidがいいでしょう。
概ねuniqueになるので、この記事のようにいくつも整形済みﾃｷｽﾄがあっても混同しませんので好都合です。

function motonimodosu( id )  
{ 
  var ele=document.getElementById(id); 
  var str = ele.innerHTML; 
  // 1. 強制改行を除去 
  str = str.replace(/\n/g,''); 
 
  // 2. 本来の空行を再追加 
  str = str.replace( /div(.*?)><\/div/g, "div$1>&nbsp;</div"); 
  ele.innerHTML = str; 
}; 

強力な正規表現のおかげでたったこれだけです。
で、どうせjavascriptを使ってこういった予防措置をとるくらいなら、もう一歩進めてコード部分をダブルクリックするとソースを全選択した状態になるお役立ち機能を再実装してみたくなるのが人情です。

本来SyntaxHighlighterが整形処理の際に同時にイベントハンドラに追加しているのですが、今回の場合は整形済みﾃｷｽﾄを持ってきているのですから、イベントを処理することはできません。単なるﾃｷｽﾄですから。
そのため、実装って言ったって、本来の処理同様、codeタグ全部にイベントハンドラを設定するだけです。
で、具体的にはこれだけ。
引数は上記の関数と同じで、ハイライト済みhtmlが入ってるタグのidです。

function addDblClickListener(id){ 
  var codes = document.getElementById(id).getElementsByTagName('code'); 
  for(i=0;i<codes.length;i++){ 
    codes[i].addEventListener( "dblclick",  quickCodeHandler ) ; 
  } 
} 

ひっかけるべきイベントハンドラの実装はquickCodeHandlerという関数で、shCore.js内にあるのですが、scripts/shCore.js版はパックされているため外部から呼べないので、src/shCore.jsのほうからイベントハンドラ関連を抽出してきます。
quickCodeHandlerを動作させるにはfindElement, findParentElement, hasClass, addClass, removeClass, attachEventの6関数だけです。
これで、あのｽﾊﾞﾗｼｲ機能が再びわがものとなります。

次回は(まだ引っ張るのかよ)前回お示ししたhtmlに加え、これらの処理を自動化させた処理を追加したhtmlのオンラインデモをお試しいただきますと同時に、このhtmlの使い方を説明したいと思います。

とりあえず今回はこれまでです。

以下、ライセンスに絡む事務連絡というか公開になります。
イベント再設定関数+quickCodeHandlerおよび前述6関数の計8関数とBloggerさん固有の改行対策関数を別ファイルにまとめて再パックして若干機能追加を行ったのが以下のhtmlになります。

<!-- 
  ライセンス条項に基づく表記: 
  (ダブルクリック時の処理のため関数を取り込んだのでご容赦ください) 
   
  The MIT License 
 
  Copyright 2017 ayumi https://ttgcameback.blogspot.com/ 
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 
 
  The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 
 
  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 
 
  The packed code (PACKED_LIB) included in this program has a code of Syntax Highighter. 
 
  SyntaxHighlighter 
  http://alexgorbatchev.com/SyntaxHighlighter 
  Copyright (C) 2004-2010 Alex Gorbatchev. 
 
  MITって柾ﾁｭｰ大学摂津校じゃないかもしれない 
--> 
 
<!DOCTYPE html> 
<html> 
<head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
  <title>サーバなしでハイライト済みﾃｷｽﾄを生成するページ</title> 
  <meta charset="utf-8" /> 
     
  <script type="text/javascript" src="syntaxhighlighter_3.0.83/scripts/shCore.js"></script> 
 
  <script type="text/javascript"> 
    var version = "syntaxhighlighter_3.0.83"; 
    var brushes = { 
      'ActionScript3': ['as3', 'shBrushAS3.js', ], 
      'Bash/shell': ['bash', 'shBrushBash.js', ], 
      'ColdFusion': ['cf', 'shBrushColdFusion.js', ], 
      'C#': ['c-sharp', 'shBrushCSharp.js', ], 
      'C++': ['cpp', 'shBrushCpp.js', ], 
      'CSS': ['css', 'shBrushCss.js', ], 
      'Delphi': ['delphi', 'shBrushDelphi.js', ], 
      'Diff': ['diff', 'shBrushDiff.js', ], 
      'Erlang': ['erl', 'shBrushErlang.js', ], 
      'Groovy': ['groovy', 'shBrushGroovy.js', ], 
      'JavaScript': ['js', 'shBrushJScript.js', ], 
      'Java': ['java', 'shBrushJava.js', ], 
      'JavaFX': ['jfx', 'shBrushJavaFX.js', ], 
      'Perl': ['perl', 'shBrushPerl.js', ], 
      'PHP': ['php', 'shBrushPhp.js', ], 
      'Plain Text': ['plain', 'shBrushPlain.js', ], 
      'PowerShell': ['ps', 'shBrushPowerShell.js', ], 
      'Python': ['py', 'shBrushPython.js', ], 
      'Ruby': ['ruby', 'shBrushRuby.js', ], 
      'Scala': ['scala', 'shBrushScala.js', ], 
      'SQL': ['sql', 'shBrushSql.js', ], 
      'Visual Basic': ['vb', 'shBrushVb.js', ], 
      'XML': ['xml', 'shBrushXml.js', ], 
    }; 
    var styles = { 
      "Default": ['shCoreDefault.css', 'shThemeDefault.css'], 
      "Django": ['shCoreDjango.css', 'shThemeDjango.css'], 
      "Eclipse": ['shCoreEclipse.css', 'shThemeEclipse.css'], 
      "Emacs": ['shCoreEmacs.css', 'shThemeEmacs.css'], 
      "FadeToGrey": ['shCoreFadeToGrey.css', 'shThemeFadeToGrey.css'], 
      "MDUltra": ['shCoreMDUltra.css', 'shThemeMDUltra.css'], 
      "Midnight": ['shCoreMidnight.css', 'shThemeMidnight.css'], 
      "RDark": ['shCoreRDark.css', 'shThemeRDark.css'], 
    }; 
 
    // bloggerで作成モードに戻って保存した場合の救済関数と 
    // ダブルクリック時のコピーモード遷移機能の付与のため 
    // shrink.jsをpackしたコードを張り付け 
    function attachScript( id ){ 
      if (!isChecked('checkbox_blogger_linebreak_remove') && !isChecked('checkbox_copy_paste_helper')) { 
        return ""; 
      } 
      var PACKED_LIB = "eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\\\b'+e(c)+'\\\\b','g'),k[c]);return p}('2 P(a){4 b=f.y(a);4 c=b.z;c=c.o(/\\\\n/g,\\'\\');c=c.o(/h(.*?)><\\\\/h/g,\"h$1>&Q;</h\");b.z=c};2 R(a){4 b=f.y(a).S(\\'5\\');p(i=0;i<b.q;i++){b[i].A(\"T\",B)}}2 j(a,b,c){6(a==s)7 s;4 d=c!=C?a.D:[a.E],t={\\'#\\':\\'U\\',\\'.\\':\\'9\\'}[b.F(0,1)]||\\'G\\',u,k;u=t!=\\'G\\'?b.F(1):b.V();6((a[t]||\\'\\').H(u)!=-1)7 a;p(4 i=0;d&&i<d.q&&k==s;i++)k=j(d[i],b,c);7 k};2 v(a,b){7 j(a,b,C)};2 I(a,b){7 a.9.H(b)!=-1};2 J(a,b){6(!I(a,b))a.9+=\\' \\'+b};2 K(a,b){a.9=a.9.o(b,\\'\\')};2 B(e){4 a=e.w,l=v(a,\\'.W\\'),8=v(a,\\'.8\\'),3=f.X(\\'3\\'),Y;6(!8||!l||j(8,\\'3\\'))7;J(l,\\'L\\');4 b=8.D,5=[];p(4 i=0;i<b.q;i++)5.Z(b[i].10||b[i].11);5=5.12(\\'\\\\r\\');3.M(f.13(5));8.M(3);3.14();3.15();m(3,\\'16\\',2(e){3.E.17(3);K(l,\\'L\\')})};2 m(a,b,c,d){2 x(e){e=e||N.18;6(!e.w){e.w=e.19;e.1a=2(){1b.1c=O}}c.1d(d||N,e)};6(a.m){a.m(\\'1e\\'+b,x)}1f{a.A(b,x,O)}};',62,78,'||function|textarea|var|code|if|return|container|className||||||document||div||findElement|found|highlighterDiv|attachEvent||replace|for|length||null|propertyToFind|expectedValue|findParentElement|target|handler|getElementById|innerHTML|addEventListener|quickCodeHandler|true|childNodes|parentNode|substr|nodeName|indexOf|hasClass|addClass|removeClass|source|appendChild|window|false|LBRemover|nbsp|addDblClickListener|getElementsByTagName|dblclick|id|toUpperCase|syntaxhighlighter|createElement|highlighter|push|innerText|textContent|join|createTextNode|focus|select|blur|removeChild|event|srcElement|preventDefault|this|returnValue|call|on|else'.split('|'),0,{}))"; 
      var scriptstr = "\n<script type=\"text/javascript\">\n"; 
      if (isChecked('checkbox_append_library')) { 
        scriptstr += "/*SyntaxHighlighter Copyright (C) 2004-2010 Alex Gorbatchev.*/\n" 
        scriptstr += PACKED_LIB + ";"; 
      } 
      var utility_function_str = "(function(){"; 
      if (isChecked('checkbox_blogger_linebreak_remove')) { 
        utility_function_str += "LBRemover('" + id + "');"; 
      } 
      if (isChecked('checkbox_copy_paste_helper')) { 
        utility_function_str += "addDblClickListener('" + id + "');"; 
      } 
      utility_function_str += "})()\n"; 
       
      scriptstr += utility_function_str; 
      scriptstr += '<' + "/script>"; 
 
      // デモ用にこのプログラムのdomにもスクリプトをくっつける 
      var ele = document.getElementById('packed_lib_script'); 
      if (ele == null) { 
        ele = document.createElement("script"); 
        ele.type = "text/javascript"; 
        ele.innerHTML = PACKED_LIB; 
        ele.id = "packed_lib_script"; 
        document.getElementsByTagName('head')[0].appendChild(ele); 
      } 
      ele = document.getElementById('packed_lib_exec_script'); 
      if (ele != null) { 
        document.body.removeChild(ele); 
        ele = null; 
      } 
      ele = document.createElement("script"); 
      ele.type = "text/javascript"; 
      ele.innerHTML = utility_function_str; 
      ele.id = "packed_lib_exec_script"; 
      document.getElementsByTagName('body')[0].appendChild(ele); 
      return scriptstr; 
    } 
    function toClipBoard(id) { 
      var ele = document.getElementById(id); 
      if (ele != null) { 
        ele.select(); 
        document.execCommand("copy"); 
      } 
    } 
 
    function loadfile(fname) { 
      try{ 
        var xmlHttp = new XMLHttpRequest(); 
        xmlHttp.overrideMimeType("text/plain"); 
        xmlHttp.open("GET", fname, false); 
        xmlHttp.send(null); 
        return xmlHttp.responseText; 
      } 
      catch (e) { 
        return null; 
      } 
    } 
    function loadStyle() { 
      var eles = document.getElementsByName("style"); 
      for (i = 0; i < eles.length; i++) { 
        if (eles[i].checked) { 
          var fname = version + "/styles/" + styles[eles[i].value][0]; 
          var stylestr = loadfile(fname); 
          if (stylestr == null) { 
            document.getElementById('div_nonchrome').style.display = 'none'; 
            document.getElementById('div_chrome').style.display = "block"; 
            document.getElementById('atag_style').href = fname; 
          } 
          else { 
            document.getElementById('style_textarea').value = 
              "<style type=\"text/css\">" 
              + stylestr 
              + "\n.syntaxhighlighter {overflow-y: hidden !important;};"//縦ｽｸﾛｰﾙﾊﾞｰ消去 
              + "</style>"; 
          } 
 
          //スタイルの付け替え 
          var head = document.getElementsByTagName('head')[0]; 
          var ele = document.getElementById("id_stylelink"); 
          if (ele != null) { 
            head.removeChild(ele); 
          } 
          var link = document.createElement('link'); 
          link.id = "id_stylelink"; 
          link.rel = 'stylesheet'; 
          link.type = 'text/css'; 
          link.href = fname; 
          head.appendChild(link); 
        } 
      } 
    } 
    function getBrush() { 
      var eles = document.getElementsByName("brush"); 
      for (i = 0; i < eles.length; i++) { 
        if (eles[i].checked) { 
          return brushes[eles[i].value][0]; 
        } 
      } 
    } 
    function isChecked(id) { 
      var ele = document.getElementById(id); 
      if (ele == null) { 
        alert(id + " is null"); 
      } 
 
      return ele.checked; 
    } 
    function makeRadioTable(type) { 
      var arr = brushes; 
      if (type == "style") { 
        arr = styles; 
      } 
      var COLMAX = 5; 
      var cnt = 0; 
      var str = "<table>"; 
      str += "<tr><th colspan='" + COLMAX + "' align='center'>"; 
      if (type == "style") { 
        str+="スタイル"; 
      } 
      else { 
        str += "言語(ブラシ)"; 
      } 
      str += "の選択</th></tr>"; 
      for (var key in arr) { 
        if (cnt % 5 == 0) { 
          if (cnt != 0) { 
            str += "</tr>"; 
          } 
          str += "<tr>"; 
        } 
        str += "<td><input type='radio' name='" + type + "' value='" + key + "'"; 
        if (key == "C++" || key == "Django") { 
          str += " checked"; 
        } 
        str += " /><label>" + key + "</label>"; 
        cnt++; 
      } 
      if (cnt % 5 != 0) { 
        for (var i = 0 ; i < cnt - (cnt % 5) ; i++) { 
          str += "<td></td>"; 
        } 
      } 
      str += "</tr></table>"; 
      return str; 
    } 
 
    function makeRadioButtons() { 
      var radiobuttonarea = document.getElementById('radiobuttonarea'); 
      radiobuttonarea.innerHTML += makeRadioTable('style') + makeRadioTable('brush'); 
    } 
    function getSyntaxHighlighterId( ele ) { 
      var divs = ele.getElementsByTagName('div'); 
      for (var i = 0; i < divs.length; i++) { 
        if (divs[i].id.match(/^highlighter_/)) { 
          return divs[i].id; 
        } 
      } 
      return null; 
    } 
    function conv() { 
      load_brushes(); 
      document.getElementById('resultdispareadiv').style.display = "block"; 
 
      loadStyle(); 
 
      var divdiv = document.getElementById('divdiv'); 
      var pre = document.getElementById('preprepre'); 
      var otheropts = document.getElementById('text_otheroption').value; 
      if (pre != null && pre.tagName.match(/DIV/i)) { 
        divdiv.removeChild(pre); 
        pre = null; 
      } 
      if (pre == null) { 
        pre = document.createElement('pre'); 
        divdiv.appendChild(pre); 
        pre.id = 'preprepre'; 
      } 
      var src_textarea = document.getElementById("src_textarea"); 
      var dst_textarea = document.getElementById("dst_textarea"); 
      dst_textarea.value = ""; 
      var src = src_textarea.value; 
 
      pre.className = "brush: " + getBrush(); 
      if (otheropts != "") { 
        pre.className += " " + otheropts; 
      } 
 
      pre.textContent = src; 
 
      SyntaxHighlighter.defaults['auto-links'] = isChecked('checkbox_auto_links'); 
      SyntaxHighlighter.defaults['toolbar'] = false; 
      SyntaxHighlighter.defaults['html-script'] = isChecked('checkbox_html_highlight'); 
      SyntaxHighlighter.defaults['tab-size'] = document.getElementById("text_tabsize").value; 
      SyntaxHighlighter.defaults['gutter'] = isChecked('checkbox_gutter'); 
      SyntaxHighlighter.config.bloggerMode = isChecked('checkbox_blogger_mode'); 
 
      SyntaxHighlighter.highlight(); 
 
      var result = document.getElementById("preprepre"); 
      var shid = getSyntaxHighlighterId(result); 
      var resulthtml = result.innerHTML; 
 
      // もう不要(これ以降htmlテキストをコピーするのでidが重複) 
      divdiv.removeChild(result); 
 
      var resultpreview = document.getElementById("resultdiv"); 
      resultpreview.innerHTML = "<h3>ハイライト処理済みhtml版プレビュー</h3>" 
        + resulthtml; 
 
      dst_textarea.value = resulthtml + attachScript(shid); 
    } 
    function appendBrushScript(src) { 
      var s = document.createElement('script'); 
      s.type = 'text/javascript'; 
      s.src = version + "/scripts/" + src; 
 
      document.head.appendChild(s); 
    } 
    function load_brushes() { 
      //appendBrushScript("shCore.js"); 
      for (var key in brushes) { 
        appendBrushScript(brushes[key][1]); 
      } 
    } 
    // ブラシスクリプトの一括ﾛｰﾄﾞ 
    load_brushes(); 
  </script> 
</head> 
<body> 
  <div id="radiobuttonarea"></div> 
  <script type="text/javascript"> 
    makeRadioButtons(); 
  </script> 
  <input type="checkbox" id="checkbox_html_highlight" name="checkbox_html_highlight" value="true" /> 
  <label>html-script</label> 
  <input type="checkbox" id="checkbox_blogger_mode" name="checkbox_blogger_mode" value="true" /> 
  <label>Blogger mode</label> 
  <input type="checkbox" id="checkbox_auto_links" name="checkbox_auto_links" value="true" /> 
  <label>auto-linkes</label> 
  <input type="checkbox" id="checkbox_gutter" name="checkbox_gutter" value="true" checked /> 
  <label>行番号</label> 
  <br /> 
  <input type="checkbox" id="checkbox_blogger_linebreak_remove" name="checkbox_blogger_linebreak_remove" value="true" checked /> 
  <label>Bloggerで生成モードで更新してしまって表示が崩れた場合のお助け処理を追加(※)</label> 
  <br /> 
  <input type="checkbox" id="checkbox_copy_paste_helper" name="checkbox_copy_paste_helper" value="true" checked /> 
  <label>「ダブルクリックでコピーモードに遷移」機能の再追加(※)</label> 
  <br /> 
  <small>(※:javascriptが整形済みhtml末尾に追加されます)</small> 
  <br /> 
  <input type="checkbox" id="checkbox_append_library" name="checkbox_append_library" value="true" checked /> 
  <label>※印で必要な関数を整形済みhtml末尾に追加<small>(最初に表示される整形済みﾃｷｽﾄだけに追加で十分です)</small></label> 
  <br /> 
  <br /> 
  TABサイズ:<input type="text" size="2" id="text_tabsize" name="text_tabsize" value="2" /> 
 
  その他の追加属性(開始行番号など):<input type="text" size="20" id="text_otheroption" name="text_otheroption" value="" /> 
  <br /> 
   
  <br /> 
 
  変換元テキスト入力欄: 
  <input type="button" value="ハイライト実行" onclick="javascript: conv();" /> 
  <br /> 
  <textarea id="src_textarea"></textarea> 
  <br /> 
 
  <div id="resultdispareadiv" style="display:none"> 
    <table> 
      <tr> 
        <td> 
          <div id="div_nonchrome"> 
            ハイライト用スタイル:<br /> 
            <textarea id="style_textarea"></textarea> 
            <br /> 
            <input type="button" value="クリップボードにコピー" onclick="javascript: toClipBoard('style_textarea');" /> 
          </div> 
          <div id="div_chrome" style="display:none;background-color:bisque"> 
            <small> 
              Chromeをお使いの方はGoogle様の保護により、<br /> 
              Edgeをお使いの方はMicrosoft様の優しさにより、<br /> 
              お使いのブラウザではローカルファイルをプログラムで<br /> 
              ﾛｰﾄﾞする権限が与えられておりません。<br /> 
              お気の毒ですが<a href="" id="atag_style" target="_blank">こちら</a>を手動で開きコピーして、<br /> 
              コピー内容を<br /> 
              <b>&lt;style type=&quot;text/css&quot;&gt;のようなタグで囲って</b><br /> 
              blogなどの対象にペーストしてください。<br /> 
              このリンクは単にスタイルで指定したcssファイル<br /> 
              へのリンクです。 
            </small> 
          </div> 
        </td> 
        <td> 
          ハイライト済ﾃｷｽﾄ:<br /> 
          <textarea id="dst_textarea"></textarea> 
          <br /> 
          <input type="button" value="クリップボードにコピー" onclick="javascript: toClipBoard('dst_textarea');" /> 
        </td> 
      </tr> 
    </table> 
  </div> 
  <!-- 縦ｽｸﾛｰﾙﾊﾞｰを隠す --> 
  <style> 
    .syntaxhighlighter { 
      overflow-y: hidden !important; 
    } 
  </style> 
  <div id="divdiv"> 
    <div id="resultdiv"></div> 
    <pre id="preprepre"></pre> 
  </div> 
  <div> 
    <a href='http://alexgorbatchev.com/SyntaxHighlighter' target="_blank">SyntaxHighlighter</a><br /> 
    Copyright (C) 2004-2010 Alex Gorbatchev.<br /> 
  </div> 
</body> 
</html> 

なお、パックされているjavascriptの原本は以下です(PACKED_LIB変数に代入されている謎の文字列がコレです)。

例の強制改行除去＋空行再追加とイベントハンドラの再設定、およびイベントハンドラを構成する関数をまとめたものです。

面白いのは、コメント中にあるアポストロフィの数が合わないもんだからハイライトが途中でおかしくなっています。

まあ、そこまでやってらんねーんでしょうね。

パックにはhttp://dean.edwards.name/packer/さんを利用させていただきました。

いずれにせよ、パックされたjavascriptをそのまま再利用するのが気持ち悪い方は下記をご利用ください。見た目とﾛｰﾄﾞ時間が冗長なだけで効果は同一です。

/** 
 * SyntaxHilighter(v3)のいいところどり補助ライブラリ 
 * http://dean.edwards.name/packer/ などで圧縮すると素敵 
 * 本コードにはSyntaxHilighterのshCore.jsのコードの一部を抜粋・改変して掲載されています。 
 * SyntaxHighlighter 
 * http://alexgorbatchev.com/SyntaxHighlighter 
 * Copyright (C) 2004-2010 Alex Gorbatchev. 
 *  
 * 本コード自身はMITライセンスとして提供します。 
 * ライセンス条項に基づく表記: 
 * The MIT License 
 * 
 * Copyright 2017 ayumi https://ttgcameback.blogspot.com/ 
 * Permission is hereby granted, free of charge, to any person obtaining a  
 * copy of this software and associated documentation files (the "Software"),  
 * to deal in the Software without restriction, including without limitation  
 * the rights to use, copy, modify, merge, publish, distribute, sublicense,  
 * and/or sell copies of the Software, and to permit persons to whom the  
 * Software is furnished to do so, subject to the following conditions: 
 *  
 * The above copyright notice and this permission notice shall be included in 
 * all copies or substantial portions of the Software. 
 * 
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS  
 * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,  
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE  
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER  
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  
 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS 
 * IN THE SOFTWARE. 
 */ 
 
/** 
 * bloggerで作成モードに移行した際に強制改行された 
 * ハイライト結果をもとに戻す 
 * @param id: ハイライト済みhtmlのdivのid(highlighter_317189など) 
 */ 
function LBRemover( id ) 
{ 
  var ele=document.getElementById(id); 
  var str = ele.innerHTML; 
  // 1. 強制改行を除去 
  str = str.replace(/\n/g,''); 
 
  // 2. 空行を再追加 
  // bloggerではdivタグの後は強制改行? 
  // 当然文字列リテラル内かどうかは無関係なのでこのｺｰﾄﾞも例外でない 
  str = str.replace( /div(.*?)><\/div/g, "div$1>&nbsp;</div"); 
  //空行は<div class="line number9 index8 alt2">&nbsp;</div>が 
  //以下の二行に分解されてnbspが消される様子。 
  //<div class="line number9 index8 alt2"> 
  //</div> 
 
  ele.innerHTML = str; 
}; 
/** 
 * ダブルクリックで一括コピーモードに遷移するイベントを仕掛ける 
 * @param id: ハイライト済みhtmlのdivのid(highlighter_317189など) 
 */ 
function addDblClickListener(id){ 
  var codes = document.getElementById(id).getElementsByTagName('code'); 
  for(i=0;i<codes.length;i++){ 
    codes[i].addEventListener( "dblclick",  quickCodeHandler ) ; 
  } 
} 
 
// 
// 以下は shCore.jsからコピー関連のスクリプトを抜粋したものです 
// 
// 
 
 
/** 
 * Looks for a child or parent node which has specified classname. 
 * Equivalent to jQuery's $(container).find(".className") 
 * @param {Element} target Target element. 
 * @param {String} search Class name or node name to look for. 
 * @param {Boolean} reverse If set to true, will go up the node tree instead of down. 
 * @return {Element} Returns found child or parent element on null. 
 */ 
function findElement(target, search, reverse /* optional */) 
{ 
  if (target == null) 
    return null; 
     
  var nodes     = reverse != true ? target.childNodes : [ target.parentNode ], 
    propertyToFind  = { '#' : 'id', '.' : 'className' }[search.substr(0, 1)] || 'nodeName', 
    expectedValue, 
    found 
    ; 
 
  expectedValue = propertyToFind != 'nodeName' 
    ? search.substr(1) 
    : search.toUpperCase() 
    ; 
     
  // main return of the found node 
  if ((target[propertyToFind] || '').indexOf(expectedValue) != -1) 
    return target; 
   
  for (var i = 0; nodes && i < nodes.length && found == null; i++) 
    found = findElement(nodes[i], search, reverse); 
   
  return found; 
}; 
/** 
 * Looks for a parent node which has specified classname. 
 * This is an alias to <code>findElement(container, className, true)</code>. 
 * @param {Element} target Target element. 
 * @param {String} className Class name to look for. 
 * @return {Element} Returns found parent element on null. 
 */ 
function findParentElement(target, className) 
{ 
  return findElement(target, className, true); 
}; 
/** 
 * Checks if target DOM elements has specified CSS class. 
 * @param {DOMElement} target Target DOM element to check. 
 * @param {String} className Name of the CSS class to check for. 
 * @return {Boolean} Returns true if class name is present, false otherwise. 
 */ 
function hasClass(target, className) 
{ 
  return target.className.indexOf(className) != -1; 
}; 
 
/** 
 * Adds CSS class name to the target DOM element. 
 * @param {DOMElement} target Target DOM element. 
 * @param {String} className New CSS class to add. 
 */ 
function addClass(target, className) 
{ 
  if (!hasClass(target, className)) 
    target.className += ' ' + className; 
}; 
 
/** 
 * Removes CSS class name from the target DOM element. 
 * @param {DOMElement} target Target DOM element. 
 * @param {String} className CSS class to remove. 
 */ 
function removeClass(target, className) 
{ 
  target.className = target.className.replace(className, ''); 
}; 
 
/** 
 * Quick code mouse double click handler. 
 */ 
function quickCodeHandler(e) 
{ 
  var target = e.target, 
    highlighterDiv = findParentElement(target, '.syntaxhighlighter'), 
    container = findParentElement(target, '.container'), 
    textarea = document.createElement('textarea'), 
    highlighter 
    ; 
 
  if (!container || !highlighterDiv || findElement(container, 'textarea')) 
    return; 
 
  //highlighter = getHighlighterById(highlighterDiv.id); 
   
  // add source class name 
  addClass(highlighterDiv, 'source'); 
 
  // Have to go over each line and grab it's text, can't just do it on the 
  // container because Firefox loses all \n where as Webkit doesn't. 
  var lines = container.childNodes, 
    code = [] 
    ; 
   
  for (var i = 0; i < lines.length; i++) 
    code.push(lines[i].innerText || lines[i].textContent); 
   
  // using \r instead of \r or \r\n makes this work equally well on IE, FF and Webkit 
  code = code.join('\r'); 
   
  // inject <textarea/> tag 
  textarea.appendChild(document.createTextNode(code)); 
  container.appendChild(textarea); 
   
  // preselect all text 
  textarea.focus(); 
  textarea.select(); 
   
  // set up handler for lost focus 
  attachEvent(textarea, 'blur', function(e) 
  { 
    textarea.parentNode.removeChild(textarea); 
    removeClass(highlighterDiv, 'source'); 
  }); 
}; 
/** 
 * Adds event handler to the target object. 
 * @param {Object} obj    Target object. 
 * @param {String} type   Name of the event. 
 * @param {Function} func Handling function. 
 */ 
function attachEvent(obj, type, func, scope) 
{ 
  function handler(e) 
  { 
    e = e || window.event; 
     
    if (!e.target) 
    { 
      e.target = e.srcElement; 
      e.preventDefault = function() 
      { 
        this.returnValue = false; 
      }; 
    } 
       
    func.call(scope || window, e); 
  }; 
   
  if (obj.attachEvent)  
  { 
    obj.attachEvent('on' + type, handler); 
  } 
  else 
  { 
    obj.addEventListener(type, handler, false); 
  } 
}; 

今度こそ以上です。

帰ってきた徒然苔

2017年3月21日火曜日

サーバいらず版SyntaxHighlighterでもっと工夫を - 全選択機能の復活とBlogger固有の問題への対策

0 件のコメント:

コメントを投稿