Ah, ok. I’m off out for the evening, but I’ll have another look in the next day or so.
I could expand the comment more so it goes over two lines if you want it to be seen during testing.
Take your time. I have some technical editing to do tonight but I might be able to squeeze in some time to try and get this working. Always more satisfying when I figure stuff out myself.
Goodnight.
No, that’s cool. I have your demo running on my PC and had done this anyway.
Edit: ninja’d : )
1 Like
Hey Ryan,
So to achieve this, all we need to do is alter the numbering function.
Something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<base href="http://www.codefundamentals.com/" />
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<title>Test - CodeFundamentals</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta charset="UTF-8">
<link href="/scripts/resets.css" type="text/css" rel="stylesheet">
<link href="/scripts/styles.css" type="text/css" rel="stylesheet">
<link href="/scripts/highlight-default.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="main-wrap">
<div class="main">
<div class="content">
<section><figure><figcaption id="example171">Example 17.1</figcaption><pre class="line-numbers"><code tabindex="0" spellcheck="false">/*CSS*/
div
{
margin-bottom: 30px; /*test asdfa asdf asdf adf asdf asdf sfd saf asdf saf sf sf asf saf saf saf sdfsa sf saf sa*/
width: 300px;
height: 300px;
background: gray;
padding: 5px;
border: 1px solid #000;
}</code></pre></figure></section>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="/scripts/highlight.pack.js"></script>
<script type="text/javascript">hljs.initHighlightingOnLoad();</script>
<script type="text/javascript">
setTimeout(function(){
var pre, code, h, len, column, linesOfCode, i, j, baselineHeight, containerHeight;
pre=document.getElementsByTagName('pre');
for(h=0;h<pre.length;h++)
{
code = pre.item(h).getElementsByTagName('code');
len = code.length;
column = document.createElement('div');
column.setAttribute('aria-hidden', 'true');
linesOfCode = 0;
var baselineHeight = parseInt($("code span:first-child").css("line-height"), 10);
var containerHeight = $("code").height();
var linesOfCode = Math.ceil(containerHeight/baselineHeight);
for(j=0;j<linesOfCode;j++)
{
column.appendChild(document.createElement('span'));
}
pre[h].className = 'line-numbers';
pre[h].insertBefore(column, code[i]);
}
}, 250);
</script>
</body>
</html>
I’ve used jQuery (being lazy). If you would like to use this approach and are not using jQuery elsewhere on the page, let me know and we can remove it.
Beautiful.
I would like to not use jQuery for this @James_Hibbard .
I do have jQuery on my pages (1.6) and I tried upgrading to the most recent version actually a couple of days ago but my lightbox script breaks when I do that.
So this weekend I’ll probably need to upgrade my jQuery and rewrite my lightbox accordingly. Heck, I might even just remove jQuery since I’m only using it as a lightbox feature.
While I can appreciate jQuery, I do need all the practice I can get when it comes to vanilla JS. That’s the one skill that’s lacking behind the rest and front-end jobs all require firm understanding. I’m getting there 
.
Edit-looks like I also use it for my hamburger navigation. Guess I know what my weekend project will be! Goodbye jQuery.
Here’s the same script without jQuery:
function getStyle(el,styleProp){
if (el.currentStyle){
var y = el.currentStyle[styleProp];
} else if (window.getComputedStyle){
var y = document.defaultView.getComputedStyle(el,null).getPropertyValue(styleProp);
return y;
}
}
setTimeout(function(){
var pre, code, h, len, column, linesOfCode, i, j, baselineHeight, containerHeight;
pre=document.getElementsByTagName('pre');
for(h=0;h<pre.length;h++)
{
code = pre.item(h).getElementsByTagName('code');
len = code.length;
column = document.createElement('div');
column.setAttribute('aria-hidden', 'true');
linesOfCode = 0;
var baselineHeight = parseInt(getStyle(code[h].querySelector("span"), 'line-height'), 10);
var containerHeight = code[h].offsetHeight;
var linesOfCode = Math.ceil(containerHeight/baselineHeight);
for(j=0;j<linesOfCode;j++){
column.appendChild(document.createElement('span'));
}
pre[h].className = 'line-numbers';
pre[h].insertBefore(column, code[i]);
}
}, 250);
The setTimeout bit is a bit clunky. It might be worth looking if there is some kind of callback mechanism in highlight.js.
1 Like
The script is randomly failing now. Not sure why. Can you take a look? Go to my website and click my recent article on percentage heights.
Brought the test page back - http://www.codefundamentals.com/test
1 Like
Last post - I think the issue is that you loop through the code variable on the same looop as you do when going through pre. I THINK(!) that this loop doesn’t properly take into account multiple code tags. I change code[h] to code[0] and my test page worked properly, although a live article didn’t. So I think the loop needs to be reworked to account for multiple code tags. Might be wrong though.
The test page worked since it was a single pre, and a single code tag.
Mods can combine if they want. Doesn’t matter to me.
I - I think I figured it out? I put these lines into a loop based off off the “len” variable (code.length) and +='d the results. Seems to work? Anything you see wrong? I updated the live website with this code so feel free to open up code-counter.js to see the final product.
for(k=0;k<len;k++)
{
baselineHeight = parseInt(getStyle(code[k].querySelector("span"), 'line-height'), 10);
containerHeight = code[k].offsetHeight;
linesOfCode += Math.ceil(containerHeight/baselineHeight);
}
Hi Ryan,
Nice one!
What you posted seems fine to me.
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.