Fixing codeboxes

[joedf]

Great to hear!

[joedf]

another update, I've added the option to toggle line numbers

Code here for future reference:

Code: Select all

// joedf: add option toggle line numbers in codeboxes
// created Jan 2020
// should on all latest major browsers
// Chrome v1, Edge 12, FF62, IE9

function toggleLineNums_init(){
	// add css rules
	var ir = document.createElement('style');
	ir.innerHTML = ".Ln_prism_sub::selection{background:none}" + "\n .Ln_prism_sub{width:auto;height:'+hCode+'px;float:left;border-right:1px solid limegreen;line-height:1.5em;padding-right:.5em;margin-right:.5em;text-align:right;color:#999;user-select:none;overflow:hidden;pointer-events:none}";
	document.body.appendChild(ir);

	// add toggle anchor links ...
	var boxes = document.getElementsByTagName('code');
	for (var i = 0; i < boxes.length; i++) {
		var tagP = (boxes[i].parentNode.tagName.toLowerCase() == 'pre' ? boxes[i].parentNode.previousSibling : boxes[i].previousSibling);
			tagP.innerHTML += ' - <a href="#" title="Toggle Line numbers" onclick="toggleLineNums(this); return false;">Toggle Line numbers</a>';
	}
}
function toggleLineNums(e) {
	var eCode = e.parentNode.parentNode.getElementsByTagName('code')[0];

	// check if linenumbers are ready
	if(eCode.className.indexOf('Ln_prism_ready')>-1) {
		var lnBox = eCode.getElementsByClassName('Ln_prism_sub')[0];

		// determine case to show/hide them
		if(eCode.className.indexOf('Ln_prism_show')>-1) {
			eCode.className = eCode.className.replace(' Ln_prism_show','')
			lnBox.style.display = 'none';
		} else {
			eCode.className += ' Ln_prism_show';
			lnBox.style.display = 'block';
		}
	} else {
		// otherwise initialize and create the line numbers
		var hCode = eCode.scrollHeight;
		var l_start = '<div class="Ln_prism_sub">';
		var l_end = '</div>';

		var lnBox = window.document.createElement('div');
		var numbers = [];
		var hay = eCode.innerHTML;
		var ln = 1;
		for(var i=0;i<hay.length;i++){
			if (hay[i]=='\n')
				numbers.push(ln++);
		}
		numbers.push(ln++);
		lnBox.innerHTML = l_start + numbers.join('\n') + l_end;
		lnBox.style.display = 'block';

		eCode.insertBefore(lnBox, eCode.firstChild);
		eCode.className += ' Ln_prism_ready Ln_prism_show'
	}
}
toggleLineNums_init();

[HotKeyIt]

Nice

[joedf]

Thanks!