Implementing highlight.js into an existing site

Regex? https://regex101.com/r/uP7lK1/2

Then process the matches through PHP and send them through htmlentities and embed them in new <pre><code> blocks

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';
  }	
})();