michaelneu/README.md

## README.md

      
    Raw
  

              README.md
            
          
    view-source on iOS Safari - without 3rd party services

A bookmarklet to display the current page's HTML in a new tab. Supports HTML syntax highlighting and indentation, JavaScript keywords will be highlighted, too.
Installation

Before adding the bookmarklet, you need to either build view-source.js, or copy view-source.min.js to your clipboard, as we'll paste this into the bookmarklet later.
Safari apparently doesn't support adding a custom bookmarklet, so you'll need to follow these steps:

Go to about:blank
Share button
Add to bookmarks
Call it "View Source" or similar
Go to your bookmarks and edit the previously created bookmark
Paste the code into the URL

Important: You need to paste either the .min.js contents or build it yourself. If the URL isn't prefixed with javascript:, the bookmarklet won't work.

  
## package.json
{
  "name": "view-source-safari",
  "version": "1.0.0",
  "main": "view-source.js",
  "license": "MIT",
  "scripts": {
    "build": "terser --compress --mangle -- view-source.js | sed '1s;^;javascript:;' | sed -E 's/(  |\\\\n)//g' > view-source.min.js",
    "copy": "cat view-source.min.js | pbcopy"
  },
  "devDependencies": {
    "prettier": "^1.19.1",
    "terser": "^4.6.3"
  }
}

## view-source.js
(() => {
  /**
   * @param {HTMLElement} node
   */
  function visitScript(node) {
    if (!node.textContent) {
      return "";
    }

    const highlightedKeywords = [
      "function",
      "if",
      "else",
      "for",
      "var",
      "let",
      "const",
      "instanceof",
      "typeof"
    ].reduce(
      (text, keyword) =>
        text.replace(
          new RegExp(keyword, "g"),
          `<span class="keyword">${keyword}</span>`
        ),
      node.textContent
    );

    const formatted = highlightedKeywords.replace(/([;\{\}])/g, "$1<br />");

    return `
      <pre class="indent">${highlightedKeywords}</pre>
    `;
  }

  /**
   * @param {HTMLElement} node
   */
  function visit(node) {
    if (node.nodeType !== Node.ELEMENT_NODE) {
      return node.textContent;
    }

    const attributes = node.attributes
      ? [...node.attributes]
          .map(attribute =>
            attribute.value
              ? ` <span class="attribute">${attribute.name}=</span><span class="string">"${attribute.value}"</span>`
              : ` <span class="attribute">${attribute.name}</span>`
          )
          .join("")
      : "";

    const tag = node.tagName.toLowerCase();
    const children =
      tag === "script"
        ? visitScript(node)
        : [...node.childNodes]
            .map(child => `<div class="indent">${visit(child)}</div>`)
            .join("\n");

    return `
      <span class="tag">&lt;${tag}</span>${attributes}<span class="tag">&gt;</span>${children}<span class="tag">&lt;/${tag}&gt;</span>
    `;
  }

  const tab = window.open("about:blank");
  const source = window.document.querySelector("html");

  tab.document.write(`
    <html>
      <head>
        <title>View Source: ${document.title}</title>
        <style>
          body {
            font-family: monospace;
            font-size: 14px;
            white-space: nowrap;
          }

          .indent {
            padding-left: 1rem;
          }

          .attribute {
            color: green;
          }

          .string {
            color: orange;
          }

          .tag {
            color: blue;
          }

          .keyword {
            color: purple;
          }
        </style>
      </head>
      <body>
        ${visit(source)}
      </body>
    </html>
  `);
})();

## view-source.min.js
javascript:(()=>{const n=window.open("about:blank"),t=window.document.querySelector("html");n.document.write(`<html><head><title>View Source: ${document.title}</title><style>body {font-family: monospace;font-size: 14px;white-space: nowrap;}.indent {padding-left: 1rem;}.attribute {color: green;}.string {color: orange;}.tag {color: blue;}.keyword {color: purple;}</style></head><body>${function n(t){if(t.nodeType!==Node.ELEMENT_NODE)return t.textContent;const e=t.attributes?[...t.attributes].map(n=>n.value?` <span class="attribute">${n.name}=</span><span class="string">"${n.value}"</span>`:` <span class="attribute">${n.name}</span>`).join(""):"",a=t.tagName.toLowerCase();return`<span class="tag">&lt;${a}</span>${e}<span class="tag">&gt;</span>${"script"===a?function(n){if(!n.textContent)return"";const t=["function","if","else","for","var","let","const","instanceof","typeof"].reduce((n,t)=>n.replace(new RegExp(t,"g"),`<span class="keyword">${t}</span>`),n.textContent);return t.replace(/([;\{\}])/g,"$1<br />"),`<pre class="indent">${t}</pre>`}(t):[...t.childNodes].map(t=>`<div class="indent">${n(t)}</div>`).join("")}<span class="tag">&lt;/${a}&gt;</span>`}(t)}</body></html>`)})();
	{
	"name": "view-source-safari",
	"version": "1.0.0",
	"main": "view-source.js",
	"license": "MIT",
	"scripts": {
	"build": "terser --compress --mangle -- view-source.js \| sed '1s;^;javascript:;' \| sed -E 's/( \|\\\\n)//g' > view-source.min.js",
	"copy": "cat view-source.min.js \| pbcopy"
	},
	"devDependencies": {
	"prettier": "^1.19.1",
	"terser": "^4.6.3"
	}
	}
	(() => {
	/**
	* @param {HTMLElement} node
	*/
	function visitScript(node) {
	if (!node.textContent) {
	return "";
	}

	const highlightedKeywords = [
	"function",
	"if",
	"else",
	"for",
	"var",
	"let",
	"const",
	"instanceof",
	"typeof"
	].reduce(
	(text, keyword) =>
	text.replace(
	new RegExp(keyword, "g"),
	`<span class="keyword">${keyword}</span>`
	),
	node.textContent
	);

	const formatted = highlightedKeywords.replace(/([;\{\}])/g, "$1<br />");

	return `
	<pre class="indent">${highlightedKeywords}</pre>
	`;
	}

	/**
	* @param {HTMLElement} node
	*/
	function visit(node) {
	if (node.nodeType !== Node.ELEMENT_NODE) {
	return node.textContent;
	}

	const attributes = node.attributes
	? [...node.attributes]
	.map(attribute =>
	attribute.value
	? ` <span class="attribute">${attribute.name}=</span><span class="string">"${attribute.value}"</span>`
	: ` <span class="attribute">${attribute.name}</span>`
	)
	.join("")
	: "";

	const tag = node.tagName.toLowerCase();
	const children =
	tag === "script"
	? visitScript(node)
	: [...node.childNodes]
	.map(child => `<div class="indent">${visit(child)}</div>`)
	.join("\n");

	return `
	<span class="tag"><${tag}</span>${attributes}<span class="tag">></span>${children}<span class="tag"></${tag}></span>
	`;
	}

	const tab = window.open("about:blank");
	const source = window.document.querySelector("html");

	tab.document.write(`
	<html>
	<head>
	<title>View Source: ${document.title}</title>
	<style>
	body {
	font-family: monospace;
	font-size: 14px;
	white-space: nowrap;
	}

	.indent {
	padding-left: 1rem;
	}

	.attribute {
	color: green;
	}

	.string {
	color: orange;
	}

	.tag {
	color: blue;
	}

	.keyword {
	color: purple;
	}
	</style>
	</head>
	<body>
	${visit(source)}
	</body>
	</html>
	`);
	})();