I'm trying to implement the
SyntaxHighlighter to list code snippets I've created. The problem is, there's quite a few REALLY long ones. Instead of making the page long to dispaly it all (which is what happens), I want to restrict the height of the .syntaxhighlighter DIVs to the height of a single row times the syntaxCount variable.
That should be easy enough, but a wrench in the plan is the fact I'm loading the files dynamically. Now, I've set-up recursive functions to ensure the files are loaded before proceeding (formatSyntax() and loadFiles()), but this don't help with timing on rendering. On my localhost, the page loads up, rendered correctly, but pulling the height of the row occurs before the dynamically loaded CSS can render. This results in a response of 20px instead of 15px.
I tried a hackish workaround where I test the background-color being changed, but this just prevents the CSS from ever rendering due to the test loop.
Here is the relevant code:
Code:
$(document).ready(function() {
var jsDIR = './js/',
cssDIR = './css/',
page = $('#navID').val(),
syntaxCount = 15;
// Load SyntaxHighlighter is page belongs to 'snippets'
if(page == 'snippets') {
var inject = new Array('shCore.js', 'shBrushXml.js', 'shBrushJScript.js', 'shBrushPHP.js', 'shCoreFadeToGrey.css');
formatSyntax(function() {
loadFiles(inject, function() {
SyntaxHighlighter.defaults['auto-links'] = false;
SyntaxHighlighter.highlight();
});
}, function() {
$('.syntaxhighlighter .toolbar').remove();
$('.syntaxhighlighter').each(function() {
console.log(parseInt($(this).find('.gutter .line').first().css('height')));
if($(this).find('.gutter .line').length <= syntaxCount) {
$(this).css('cssText', 'overflow-y: hidden !important');
} else {
$(this).css('cssText', 'height: ' + (parseInt($(this).find('.gutter .line').first().css('height')) * syntaxCount) + 'px');
// $(this).css('cssText', 'height: 225px');
}
});
}, 0);
}
// Function for loading CSS files
function loadCSS(href, code) {
var cssLink = (((href != null) && (href != '')) ? $('<link rel="stylesheet" type="text/css" href="' + cssDIR + href + '" />') : (((code != null) && (code != '')) ? '<style>' + code + '</style>' : ''));
$('head').append(cssLink);
};
// Function for loading JavaScript files
function loadJS(src, code) {
var jsLink = $('<script type="text/javascript"' + (((src != null) && (src != '')) ? ' src="' + jsDIR + src + '"' : '') + '>' + (((code != null) && (code != '')) ? code : '') + '</script>');
$('head').append(jsLink);
};
function formatSyntax(loadFiles, callback, ran) {
if(ran == 0) {
loadFiles();
ran = 1;
formatSyntax(loadFiles, callback, ran);
} else {
callback();
}
}
// Function for loading files recursively from an array
function loadFiles(files, callback) {
if(files.length == 0) {
callback();
} else {
file = files[0];
files = files.slice(1);
if(file.substr(-3) == '.js') {
loadJS(file);
} else {
loadCSS(file);
}
loadFiles(files, callback);
}
}
});
Code:
<pre class="brush: js;">function rgba2hex(color) {
if(color.search('rgb') == -1) {
return color;
} else {
if(color.search('rgba') != -1) {
color = color.match(/^rgba\(([0-2]?\d{1,2}),\s*([0-2]?\d{1,2}),\s*([0-2]?\d{1,2}),\s*((0|1)?\.\d+)\)$/);
function hex(x) {
return ('0' + parseInt(x).toString(16)).slice(-2);
}
return '#' + hex(color[1]) + hex(color[2]) + hex(color[3]) + hex(color[4] * 255);
} else {
color = color.match(/^rgb\(([0-2]?\d{1,2}),\s*([0-2]?\d{1,2}),\s*([0-2]?\d{1,2})\)$/);
function hex(x) {
return ('0' + parseInt(x).toString(16)).slice(-2);
}
return '#' + hex(color[1]) + hex(color[2]) + hex(color[3]);
}
}
}</pre>
It seems that this won't work on JSFiddle or the StackOverflow snippets, but I can confirm it renders, it just doesn't allow me to set the height CSS properly.
If I set a fixed value, the code works, but that take away the option of making it easily portable (I like not having to recreate snippets).
My knowledge of the DOM and rendering process it fairly limited, but I have done a fair bit of research. The problem is, I keep getting instructions for transitions, which doesn't apply here. Just in case (and since my knowledge on the matter is limited), I did try using:
Code:
$('.syntaxhighlighter').on('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function() {
instead of
Code:
$('.syntaxhighlighter').each(function() {
but the only change was that the entire function didn't run, which indicated that my original assumption that transitions didn't apply was correct.
Anyone have an idea on how-to make this work dynamically, instead of having to predefine the line-height or total height?
*Note - All the code contained within this post, including the rgba2hex() function in the example, were written by me, so I can't blame anyone else for how sloppy they are. ^^'
