htmlハイライト系のツールはさがせばいくらでもありそうですが、いまさら探すのも億劫なため適当にjavascriptでブックマークレットを作りました。
htmlのハイライトブックマークレット – 前段階
ブックマークレットで検索すると、ちょうどうでもいいページばかり表示されて、困った。グーグルは役に立つサイトを表示させるというけど、まったくそんなふうになっている気がしない。という話はさておき、とりあえず以下の便利なブックマークサイトを上位表示させるべき。
正確には覚えてないけど、ここにたしかhtmlhilight系のブックマークレットがあったはず。昔ここからダウンロードしたjavascriptファイルがあったので改造することに。上記サイトで公開されているブックマークレットは、見出しタグのハイライト機能しかない。もっと機能を増やせばよかったのではないか？と思うも、逆に言えば機能を最小限にとどめ後は各自で開発せよという意向があったのかもしれないと思うと、感動がわいてくる。
htmlをハイライトするブックマークレットを改造
改造というか、自分で好きなコードをちょっと足せばよいだけなので後付けしかしていない。count変数を入れて見つかった要素をカウントするようにした。実質htmlをハイライトできてよいことがあるのかといえば大した使い道はない。公開する意味もおそらくないとは思うけど、メモ書き程度にコードを貼り付けておきます。
javascript : (function () {
(function () {
[
{
color: "#F44336",
selector: "h1"
}, {
color: "#E91E63",
selector: "h2"
}, {
color: "#9C27B0",
selector: "h3"
}, {
color: "#673AB7",
selector: "h4"
}, {
color: "#3F51B5",
selector: "h5"
}, {
color: "#2196F3",
selector: "h6"
},{
color: "#888888",
selector: "ul"
},{
color: "#11111",
selector: "ol"
}
].map(function (a) {
var count = 0;
for (var c = document.querySelectorAll(a.selector), b = 0, f = c.length; b < f; ++ b) {
var d = c[b];
d.style.backgroundColor = a.color;
var e = document.createElement("span");
e.innerHTML = " | " + a.selector + "[" + count + "]";
count++;
d.appendChild(e)
}
})
})();
})();
解説もくそもないというか、各コードがどういう動きをするのかというは雰囲気でつかんだうえで ここ に あれ を足せばこう動くだろうという感じでやったので野暮なコード指南は大省略 。
圧縮版
ブックマークレットとしてつかえるように圧縮版のコードをはっておきます。
javascript:(function(){(function(){[{color:"#F44336",selector:"h1"},{color:"#E91E63",selector:"h2"},{color:"#9C27B0",selector:"h3"},{color:"#673AB7",selector:"h4"},{color:"#3F51B5",selector:"h5"},{color:"#2196F3",selector:"h6"},{color:"#888888",selector:"ul"},{color:"#11111",selector:"ol"}].map(function(a){var count=0;for(var c=document.querySelectorAll(a.selector),b=0,f=c.length;b<f;++b){var d=c[b];d.style.backgroundColor=a.color;var e=document.createElement("span");e.innerHTML=" | "+a.selector+"["+count+"]";count++;d.appendChild(e)}})})()})();
というかjavascriptの圧縮サービスとかは検索すればでてくるので、何かの間違いでここにたどりついたひとは、そのあたりは各自でやってほしいという雑感。終わり。
コメント