Skip to content

Instantly share code, notes, and snippets.

@martianyi
Last active September 10, 2020 18:54
Show Gist options
  • Save martianyi/9c732423f8f4a73f7a5cbfe4197c9990 to your computer and use it in GitHub Desktop.
Save martianyi/9c732423f8f4a73f7a5cbfe4197c9990 to your computer and use it in GitHub Desktop.
bookmarklet to view source with syntax highlighting using highlight.js
javascript: function getSelSource() {
x = document.createElement('div');
x.appendChild(window.getSelection().getRangeAt(0).cloneContents());
return x.innerHTML;
}
function makePre(text) {
p = nd.createElement('pre');
c = nd.createElement('code');
c.setAttribute('class', 'language-html');
c.appendChild(nd.createTextNode(text));
p.appendChild(c);
return p;
}
nd = window.open().document;
ndb = nd.createElement('div');
if (!window.getSelection || !window.getSelection().rangeCount || window.getSelection().getRangeAt(0).collapsed) {
ndb.appendChild(makePre("<html>\n" + document.documentElement.innerHTML + "\n</html>"));
} else {
ndb.appendChild(makePre(getSelSource()));
};
nd.open();
nd.write(`
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
body {
margin: 0;
}
pre,code {
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
font-size: 14px;
line-height: 1.5;
tab-size: 4;
-webkit-hyphens: none;
margin: 0;
padding: 0 !important;
}
td.hljs-ln-numbers {
text-align: right;
color: rgb(128, 128, 128);
word-break: normal;
white-space: nowrap;
font-family: Helvetica;
font-size: 12px;
user-select: none;
box-sizing: border-box;
width: 31px;
background-color: rgb(240, 240, 240);
padding: 0px 4px !important;
border-right: 1px solid rgb(187, 187, 187) !important;
}
td.hljs-ln-code {
padding: 0 5px !important;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/googlecode.min.css">
</head>
<body>
${ndb.innerHTML}
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.3.0/highlightjs-line-numbers.min.js"></script>
<script>hljs.initHighlightingOnLoad();
hljs.initLineNumbersOnLoad();
</script></body>
`);
nd.close();
void 0
javascript: function getSelSource() {
x = document.createElement('div');
x.appendChild(window.getSelection().getRangeAt(0).cloneContents());
return x.innerHTML;
}
function makePre(text) {
p = nd.createElement('pre');
c = nd.createElement('code');
c.setAttribute('class', 'language-html');
c.appendChild(nd.createTextNode(text));
p.appendChild(c);
return p;
}
nd = window.open().document;
ndb = nd.createElement('div');
if (!window.getSelection || !window.getSelection().rangeCount || window.getSelection().getRangeAt(0).collapsed) {
ndb.appendChild(makePre("<html>\n" + document.documentElement.innerHTML + "\n</html>"));
} else {
ndb.appendChild(makePre(getSelSource()));
};
nd.open();
nd.write(`
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
pre,code {
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
font-size: 14px;
line-height: 1.5;
tab-size: 4;
-webkit-hyphens: none;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/googlecode.min.css">
</head>
<body>
${ndb.innerHTML}
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script></body>
`);
nd.close();
void 0
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment