Implementing highlight.js into an existing site

I was just thinking and it all has to be one pre/code block due to a row counter I have. Using two separate ones resets the counter. Also I have the code section modifiable (contenteditable=true) and two separate ones would have two separate regions. Not very good.

So I need something to insert into my pre/code section which will make highlightjs try and re-find what language it is. Perhaps this is something I need to modify myself.

Edit-Just opened up the highlight pack.js file…Dear lord…

I’m not following… got an example?

I modified my post some - see above. One second while I get an example up. I’ll edit this post.

www. codefun damentals.com/test.php (tired of being TL3 and having my links being followed and generating 404s in my webmaster log. Too lazy to rewrite :wink: )

Note that if you look at the source. I have two pre/code blocks in there. Remove the second one (to only have one) and you’ll see the CSS is completely unstyled. Since the highlightjs thinks the entire block is HTML.

Just put it inside backticks (single backticks)
www.example.com

hmm… I can’t seem to recreate that as it styles the two blocks differently for me, so it obviously sees them as HTML and the other as CSS…

Yes, it’s because, as I said, I have them in two separate pre/code. However, the numbering on the left is screwed up. Also, dpending if you clicked the HTML or the CSS, you’d have two editable fields (because of my contenteditable=true in my HTML for each block.)

I’ll make it one big block now. Please refresh the page.

Ah, I get it now

<style type="text/css">
test {
  display: none;
}
</style>

<a href="test">testing a link</a>
test { 
  display:none;
}

<a href="test">a link</a>

Hmm… seems to work if you have it in <style> tags

Eh, I mean I’d rather not, as that’s a bit of wasted space in my code. My users don’t need to see that.

I guess I could keep that in mind as a last resort.

Did you custom build a line number component? As you could use the data attribute (maybe data-line-number) to give it a starting line number to use

Could you move all these posts to a new thread? And no, not custom built. I found one and implemented it. Found here.

(function()
{
  if(typeof(window.getComputedStyle) == 'undefined') 
  { 
    return; 
  }
  var pre = document.getElementsByTagName('pre');
  for(var len = pre.length, i = 0; i < len; i ++)
  {
    var code = pre[i].getElementsByTagName('code').item(0);
    if(!code)
    {
      code = pre[i].getElementsByTagName('samp').item(0);
      if(!code)
      {
        continue;
      }
    }
    var column = document.createElement('div');
    column.setAttribute('aria-hidden', 'true');
    for(var n = 0; n < code.innerHTML.split(/[\n\r]/g).length; n ++)
    {
      column.appendChild(document.createElement('span'));
    }
    pre[i].insertBefore(column, code);
    pre[i].className = 'line-numbers';
  }	
})();

I sort of have it working here. Could you look for a cleaner way to do this?
http://www.codefundamentals.com/test.php

Can you throw up a page the original way that had two separate blocks and the line numbers were different? I’m wondering if setting counter-reset would solve it.

Refresh.

Bummer… I’m having zero luck with it :frowning: Not sure exactly why though.

I can do without the contenteditible crap…but the codecounter needs to be reworked to where it’s not looking inside of the CODE, per say. It needs to count the number of CODE blocks, remember the previous line numbe it was on, and go from there. I’m moving this to the Javascript section. Hopefully someone can rework this.

I’d also like this to take into account lines which wrap. I’d like a second number given depending on if it wraps once…twice (2 line numbers) etc.

Perhaps @James_Hibbard or another JS guru can get in here.

Hmm, wait. Perhaps I could, in JS, set that attribute like you were talking about @cpradio. What do ou think about an if statement which detects whether a future code block exists. If so, then set a number to start at? Did you try that? Not sure what you all tried.

I was only playing with CSS. So I didn’t try anything with JavaScript.

I decided I’m going to implement a horizontal scrollbar to eliminate the wrapping lines issue.

I might play with this.

I doubt CSS alone can do this the way the current JS is set up.

Why is this elements height returning 0?

(function()
{
  var height;
  if(typeof(window.getComputedStyle) == 'undefined') 
  { 
    return; 
  }
  var pre = document.getElementsByTagName('pre');
  for(var len = pre.length, i = 0; i < len; i ++)
  {
    var code = pre[i].getElementsByTagName('code').item(0);

    var column = document.createElement('div');
    column.setAttribute('aria-hidden', 'true');
    for(var n = 0; n < code.innerHTML.split(/[\n\r]/g).length; n ++)
    {
      height=column.appendChild(document.createElement('span'));

      console.log(height.offsetHeight);
    }
    pre[i].insertBefore(column, code);
    pre[i].className = 'line-numbers';
  }	
})();

I kept getting deeper and deeper into this Javascript code and eventuallly scrapped the whole thing. Spent about 3 hours on it.

I’m really hating the lines wrapping without adding a number. Could anyone please look at post 12 and help?

Basically, go to codefundamentals.com. CLick an article.

The actual code section you see is comprised of spans. Basically, I took the left columns numbers and got the length of it. Then I got the height of the numbers. Basically, if the height of the numbers were less than the total parents height, then there were lines that need adding.

So I took the leftover number from the math, divided it by one of the numbers height, and got that remainder. Added that many.

THis was all very confusing code and I do not feel ashamed by scrapping it. Anyway, could someone sort of take my logic, refine it, and show me where I can go from here?