【ブックマークレット】スマホからでもソースが見たい！

ブックマークレットでページのソースを見る

スマホでページをみているときにページのソースコードが読みたくなるとき、ありませんか？
ブックマークレットを使うと、ブックマークをクリックするだけでスマホでも、iPadでも、ソースコードを見ることができます！

はじめに謝辞

これは@mumeさんの

にシンタックスハイライトを追加したものです。

コード

新しいタブでソースコードが表示されます

javascript:(function(){let newwin=window.open('about:blank');newwin.document.write('<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css"><pre><code>'+(document.documentElement.outerHTML%7C%7Cdocument.documentElement.innerHTML).replace(/&/g,%22&amp;%22).replace(/%3C/g,%22&lt;%22).replace(/%3E/g,%22&gt;%22)+'</code></pre><style>body{margin:0;padding:0;background:#282C34;}pre{color:white;overflow-x:auto;-webkit-overflow-scrolling:touch;}</style><script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script><script>document.querySelectorAll("pre code").forEach((el)=>{hljs.highlightElement(el);})</script>');})();

min化する前

javascript:
(function(){
    let newwin=window.open('about:blank');
    newwin.document.write('
     <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
     <pre>
      <code>'+
        (document.documentElement.outerHTML||document.documentElement.innerHTML)
         .replace(/&/g,%22&amp;%22).replace(/</g,%22&lt;%22).replace(/>/g,%22&gt;%22)+
     '</code>
     </pre>
     <style>
      body{
        margin: 0;
        padding: 0;
        background: #282C34;
      }
      pre{
        color: white;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }
     </style>
     <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
     <script>
     document.querySelectorAll("pre code")
      .forEach((el)=>{
        hljs.highlightElement(el);
      })
     </script>');
})();

コード解説

元のコードから、新しいタブで開くようにし、ハイライトを加えたものです

ブックマークレットはURL欄に書くため、ブックマークレットだと示すために最初にJavascriptであることを言っておきます

javascript:

新しいタブを開いて書き込みます

var newwin=window.open('about:blank');
newwin.document.write( ... );

ハイライトにはhighlight.jsを使いました
ライブラリを読み込み、ハイライトを実行します

<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">

document.querySelectorAll("pre code")
 .forEach((el)=>{
     hljs.highlightElement(el);
 })

ここで読み込んでいるCSSを変えることで、ハイライトの配色を変更できます。

配色一覧

ここではatom-one-darkを使ってます

最後にhighlight.jsのバージョンアップの頻度が高いので、バージョンを最新版にしておくのをおすすめします
11.9.0の部分を最新のパージョンに変えてください

まとめ

ブックマークレットという存在を知らなかったのですが、ブラウザを自分でカスタマイズしている感覚があって楽しいです。