Create a gist now

Instantly share code, notes, and snippets.

for fc2
pre.hljs-container {
white-space: pre;
}
pre > code.hljs {
font-family: Menlo, Consolas, 'DejaVu Sans Mono', monospace;
}
.hljs-line-numbers {
border-right: 1px solid gray;
padding-left: 1em;
}
pre.hljs-container {
position: relative;
}
/*
pre > code.hljs {
position: relative;
}
*/
pre > code.hljs-line-numbers {
float: left;
text-align: right;
}
.hljs-markers {
display: block;
position: absolute;
width: 100%;
/*
top: 0;
height: inherit;
*/
padding-left: 0;
padding-right: 0;
}
.hljs-markers .marker {
position: absolute;
background-color: rgba(255, 180, 180, 0.20);
left: 6px;
right: 6px;
}
/*
data-line-number
only attribute or number.
if number is specified, then line number start its value.
data-marker-line
comma separated value.
data-not-escape-html
if specified, then not escape html
*/
window.addEventListener("DOMContentLoaded", function() {
hljs.configure({
tabReplace: ' ', // 4 spaces
});
var unescape_repl_map = {
'&lt;' : '<',
'&gt;' : '>',
'&amp;' : '&'
};
function create_escaped_textnode(ele) {
// http://stackoverflow.com/questions/6234773/can-i-escape-html-special-chars-in-javascript
return document.createTextNode(
ele.innerHTML
// single "<" already escaped in innerHTML
.replace(/&(lt|gt|amp);/g, function(m) {
return unescape_repl_map[ m ];
})
);
}
function chomp(e) {
// function remove_newline(node, ofs) {
// if (node.nodeType == 3 && node.data.length > 0) { // 3 : Text
// if (ofs < 0) {
// ofs = node.data.length - 1;
// }
// if (node.data[ofs] == "\n") {
// node.deleteData(ofs, 1);
// }
// }
// }
// remove_newline(e.firstChild, 0);
// remove_newline(e.lastChild, -1);
var c = e.firstChild;
if (c.nodeType == 3 && c.data.length > 0 && c.data[0] == "\n") {
c.deleteData(0, 1);
}
c = e.lastChild;
if (c.nodeType == 3 && c.data.length > 0 && c.data[c.data.length - 1] == "\n") {
c.deleteData(c.data.length - 1, 1);
}
}
function hljs_escape_html(e) {
if (! e.hasAttribute("data-not-escape-html")) {
var text = create_escaped_textnode(e);
e.innerHTML = "";
e.appendChild(text);
}
chomp(e);
// e.innerHTML = e.innerHTML
// .replace(/^[\r\n]+|[\r\n]$/g, "")
// .replace(/&/g, "&amp;")
// .replace(/</g, "&lt;")
// .replace(/>/g, "&gt;")
// .replace(/"/g, "&quot;")
// .replace(/'/g, "&#039;");
return e;
}
function hljs_migrate_syntaxhighlighter(e) { // pre[class*="brush:"]
var text = create_escaped_textnode(e);
e.innerHTML = "";
var code = document.createElement("code");
code.appendChild(text);
e.appendChild(code);
chomp(code);
// code.parentNode.classList.add("hljs");
var m = /brush:\s*(\w+)/.exec(e.className);
if (m) {
code.classList.add(m[1]);
}
m = /highlight:\s*\[([^\]]+)\]/.exec(e.className);
if (m) {
code.dataset.markerLine = m[1];
}
/* TODO:
gutter
first-line
*/
return code;
}
function hljs_modify_line_number(code, start, marker) {
var lines = code.textContent.split(/\r\n|\r|\n/).length;
if (lines > 1) {
if (marker && marker.length > 0) {
var markers = new Array(lines);
markers.fill("&nbsp;");
var ofs = start > 0 ? start : 1;
marker.forEach(function(line) {
var i = line - ofs;
if (0 <= i && i < lines) {
markers[i] = '<span class="marker">&nbsp;</span>&nbsp;';
}
});
var marker_area = document.createElement("code");
marker_area.className = "hljs hljs-markers";
marker_area.innerHTML = markers.join("\n");
code.parentNode.insertBefore(marker_area, code);
// code.parentNode.style.position = 'relative';
code.style.position = "relative";
code.style.backgroundColor = 'transparent';
}
if (start > 0) {
var nums = new Array(lines);
nums.fill(start);
nums.forEach(function(v, i, a) {
a[i] = (v + i) + '.';
});
var lineno = document.createElement("code");
lineno.className = "hljs hljs-line-numbers";
lineno.innerHTML = nums.join("\n");
code.parentNode.insertBefore(lineno, code);
if (marker && marker.length > 0) { // has marker ?
lineno.style.backgroundColor = 'transparent';
}
}
}
}
Array.prototype.forEach.call(document.querySelectorAll("pre > code"), function(code) {
code = hljs_escape_html(code);
code.parentNode.classList.add("hljs-container");
hljs.highlightBlock(code);
});
// migration for SyntaxHighlighter
Array.prototype.forEach.call(document.querySelectorAll('pre[class*="brush:"]'), function(code) {
code = hljs_migrate_syntaxhighlighter(code);
code.parentNode.classList.add("hljs-container");
hljs.highlightBlock(code);
});
// line number
function extract_attr(code, attr) {
if (code.hasAttribute("data-line-number")) {
attr.start_line = code.dataset.lineNumber === "" ? 1 : parseInt(code.dataset.lineNumber, 10);
}
if (code.hasAttribute("data-marker-line")) {
attr.marker_line = code.dataset.markerLine.split(/[,\s]+/).reduce(function(a, i) {
if (/^\d+$/.test(i)) {
a.push(parseInt(i,10));
}
return a;
}, []);
console.log(attr.marker_line);
}
return attr;
/* TODO:
check parent node (PRE) ?
*/
}
Array.prototype.forEach.call(document.querySelectorAll("pre > code"), function(code) {
// hljs_modify_line_number(code, 10, [12,14,16]);
// hljs_modify_line_number(code, null, [3,6,9]);
var attr = extract_attr(code, {});
hljs_modify_line_number(code, attr.start_line, attr.marker_line);
});
/* TODO:
copy code to clipboard
*/
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment