2018/02 : 更新 1) 行番号部分をクリックするとソースを選択するようにしました。 2) 表示時にテキストエリアにフォーカスを移すようにしました。 3) コピー操作をしやすいように、テキストエリア内に padding-left を入れました。 4) ツールバーの不透明度を 0.5 => 0.8 に変更しました。 5) ツールバーに対する border の CSS を変更して見えやすくしました。そもそも、SyntaxHighlighter を配布していたサイトが GitHub に移った上、バージョン4 になってるけれど、いろいろ一般的には面倒な事になってるので、古いバージョンを一生懸命使って来た... というのが現実でした。 しかし、ここに来て行単位を取り出す『ソースの表示』がしょぼい事や、クリップボードへコピーするのが Flash だったとか、印刷表示ができていない(理由は解ったので対応済み)とか、about のリンク先が終わってるとか、ロクでも無い現状を打破しました。 これらは、オリジナルの処理を書き換えるという方法で行ってます。マイナーバージョンが上がった際にあった shLegacy.js というスクリプトで実装できます。解る人はこのサイトのソースを見てもらってコピーすれば使えます。但し、ウチのバージョンは 2.0.296 なんで、世の中的には難しいでしょうけれど。
ありがたいことに、WEB アーカイブからダウンロードできました。 ※ 他のバージョンも可能です。 ※ ライセンスは GNU Lesser General Public Licenseソースの表示 行番号対応しました。これは、JQuery Lined TextArea plugin というプラグイン使ってます。行番号だけあれば十分なので、既に開発も終わってる古いソフトですが、 MIT License だしソースは短いし、自分でどうにでもアップグレードできそうなので使う事にしました。 ▼ ウインドウを最大化した時に行番号を表示するという処理を、jquery-linedtextarea.js の中に追加しています( ソースはこれです )
$(window).resize( function(){
var domTextArea = textarea[0];
var scrollTop = domTextArea.scrollTop;
var clientHeight = domTextArea.clientHeight;
codeLinesDiv.css( {'margin-top': (-1*scrollTop) + "px"} );
lineNo = fillOutLines( codeLinesDiv, scrollTop + clientHeight, lineNo );
});
ただ、textarea を使うので、ウインドウを最大化した時の幅や高さの調整は自分で外から追加する必要がありました。▼ 組み込んだ内容
SyntaxHighlighter.toolbar.items.viewSource = function(highlighter)
{
this.create = function()
{
return "\u884c\u756a\u53f7\u4ed8\u304d\u30c6\u30ad\u30b9\u30c8\u30a8\u30ea\u30a2\u3067\u30bd\u30fc\u30b9\u3092\u8868\u793a\u3057\u307e\u3059";
};
this.execute = function(sender, event, args)
{
var wnd = SyntaxHighlighter.utils.popup('', '_blank', 750, 400, 'location=0, resizable=1, menubar=0, scrollbars=1')
;
var code = SyntaxHighlighter.utils.unindent(
SyntaxHighlighter.utils.fixForBlogger(highlighter.originalCode)
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/&/g, '&')
.replace(/\n/g, '\n')
);
code = SyntaxHighlighter.utils.unindent(code);
var str="";
str+="<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"> ";
str+="<"+"script src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js\"></"+"script> \n";
str+="<"+"script src=\"https://lightbox.sakura.ne.jp/homepage/jquery/plugins/jquery-linedtextarea.js\"></"+"script> \n";
str+="<link id=\"link\" rel=\"stylesheet\" href=\"https://lightbox.sakura.ne.jp/homepage/jquery/plugins/jquery-linedtextarea.css\"> \n";
wnd.document.write(str);
wnd.document.write('<t'+ 'extarea readonly style="width:100%;height:350px">' + code + '</' + 'textarea>');
str="";
str+="<"+"script> \n";
str+="$(function() { \n";
str+=" $(\"textarea\").linedtextarea(); \n";
str+=" $(\".linedwrap\").css({\"width\":\"calc(100% - 20px\"}); \n";
str+=" $(\".lines\").css({\"height\":\"calc(100% - 20px)\"}); \n";
str+=" $(\"textarea\").css({\"width\":\"calc(100% - 80px)\", \"padding-left\":\"10px\"}); \n";
str+=" $(\"textarea\").css({\"height\":\"calc(100% - 20px)\"}); \n";
str+=" $(\"head\").append($(\"<title>\").text(\"\u30bd\u30fc\u30b9\u306e\u8868\u793a\")); \n";
str+=" $(\".codelines\").on(\"click\", function(){ $(\"textarea\").select() } ); \n";
str+=" $(\"textarea\").focus(); \n";
str+="}); \n";
str+="</"+"script> ";
wnd.document.write(str);
wnd.document.close();
};
};
何も無いところに動的にいろいろやる必要があるので、document.write は仕方無いので使っています。 document.write だけに関して言えば、将来性はそのへん疑問はありますが、当面しばらく大丈夫だと思ってます。 内容としては、動的に jQuery を書き出して、さらに jQuery のコードも書き出す事になってます。 高さと幅の調整は jQuery の部分の、本体とその親要素に対して calc を使って 100% から補正するというテクニックでやっています。 ▼ 補正部分のみ取り出すとこうなります
<script>
$(function() {
$("textarea").linedtextarea();
$(".linedwrap").css({"width":"calc(100% - 20px"});
$(".lines").css({"height":"calc(100% - 20px)"});
$("textarea").css({"width":"calc(100% - 80px)"});
$("textarea").css({"height":"calc(100% - 20px)"});
$("head").append($("<title>").text("ソースの表示"));
$(".codelines").on("click", function(){ $("textarea").select() } );
$("textarea").focus();
});
</script>
次は、クリップボードのお話です 自サイト(logical error を含む)で使用している SyntaxHighlighter のツールバーの問題点をごっそり自前で修正・カスタマイズしました。( その2 / ソースをクリップボードにコピー ) 以下は、一般的なコードサンプルになります
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function(){
$("#open_window").on("click", function(){
code = $("#code").val();
var wnd = win_open("","_blank",750, 400, "location=0,resizable=1,menubar=0,scrollbars=1");
var str="";
str+="<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"> ";
str+="<"+"script src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js\"></"+"script> \n";
str+="<"+"script src=\"https://lightbox.sakura.ne.jp/homepage/jquery/plugins/jquery-linedtextarea.js\"></"+"script> \n";
str+="<link id=\"link\" rel=\"stylesheet\" href=\"https://lightbox.sakura.ne.jp/homepage/jquery/plugins/jquery-linedtextarea.css\"> \n";
wnd.document.write(str);
wnd.document.write('<t'+ 'extarea readonly style="width:100%;height:350px">' + code + '</' + 'textarea>');
str="";
str+="<"+"script> \n";
str+="$(function() { \n";
str+=" $(\"textarea\").linedtextarea(); \n";
str+=" $(\".linedwrap\").css({\"width\":\"calc(100% - 20px\"}); \n";
str+=" $(\".lines\").css({\"height\":\"calc(100% - 20px)\"}); \n";
str+=" $(\"textarea\").css({\"width\":\"calc(100% - 80px)\", \"padding-left\":\"10px\"}); \n";
str+=" $(\"textarea\").css({\"height\":\"calc(100% - 20px)\"}); \n";
str+=" $(\"head\").append($(\"<title>\").text(\"\u30bd\u30fc\u30b9\u306e\u8868\u793a\")); \n";
str+=" $(\".codelines\").on(\"click\", function(){ $(\"textarea\").select() } ); \n";
str+=" $(\"textarea\").focus(); \n";
str+=" $(\"body\").css({\"overflow-y\":\"y:hidden\"}); \n";
str+="}); \n";
str+="</"+"script> ";
wnd.document.write(str);
wnd.document.close();
});
});
function win_open(url, name, width, height, options) {
var x = (screen.width - width) / 2;
var y = (screen.height - height) / 2;
options +=
', left=' + x +
', top=' + y +
', width=' + width +
', height=' + height
;
// 先頭のカンマを取り除く
options = options.replace(/^,/, '');
var win = window.open(url, name, options);
win.focus();
return win;
}
</script>
<input id="open_window" type="button" value="window を開く">
<br>
<textarea id="code" style='width:400px;height:300px'></textarea>
|
|
【JavaScript ライブラリの最新記事】
- clipboard.js を使用してテキストをコピーする際に clipboard.js が必要とするパーツと意味
- clipboard.js のコピーさせるテキストを自由にダイナミックに渡す方法は、Advanced Usage の text です。
- JavaScript の内部コード文字列を SHIFT_JIS としてダウンロードさせる方法
- 自サイト(logical error を含む)で使用している SyntaxHighlighter のツールバーの問題点をごっそり自前で修正・カスタマイズしました。( その2 / ソースをクリップボード..
- ブラウザ上のテキストデータを名前を付けて保存できる FileSaver.js を使って、テーブルのデータを Excel で開ける事を想定した CSV にして PC に保存
- JavaScript のみで、SHIFT_JIS や EUC-JP を UrlEncode に近い Escapeする Escape Codec Library
- JavaScript でクリップボードに文字列をコピーする Clipboard.js の使用方法と注意事項
- Lightbox2 ライブラリの今時の使い方
- Google Visualization API って apikey いらなくなった? / ライブラリロード方法が変わってました
- Lightbox2 で data-title にボタンを埋め込んで、クリックしたら 画像のファイル名を取り出して Lightbox2 を閉じるギャラリーのデモ
- EASELJS を使用した画像の分割と分割されたエリア毎のアニメーション / createjs.Ticker の reset と init はうまく動きませんでした
- EASELJS を使用した画像の縮小とトリミングと角丸マスク / 画像は new Image でイベント処理して画像サイズを取得します
- Three.js r73 での Canvas で平面を飛翔させる為の詳細デモ
- クリスマスに備えて、『雪を降らす snowstorm.js』のカスタマイズ / ダウンロードも何も必要ありません。jQuery も必要ありません
- JavaScript : 誰でもすぐ使える Google 円グラフ(2) : データを Google ドキュメントから取得する
- JavaScript : 誰でもすぐ使える Google 円グラフ
- カラーピッカーのライブラリなのですが、ちょっと雑な作りだったので、修正してリリースです。
- google.load で Yahoo UI のメニューを使う
