Line numbers not visible in bbPress when using EnlighterJS plugin.

I have decided to ask this question here because I am using the bbp style pack for the look and feel of my support forum. I am having an issue with a plugin called EnlighterJS.

Here is an example of this plugin being use with a standard WordPress post. There is nothing wrong with it. All good.

Here is an example showing code in a public bbPress forum post. You don’t need to register with the forum to see the above.

The main issue in bbPress is that you can’t see the line numbers on the left. I had tried this additional CSS:

.EnlighterJS{
   width: auto !important;
   overflow-x: scroll !important;
   word-wrap: normal !important;
}

.EnlighterJS li{
  white-space: pre !important;
}

ol.EnlighterJS, ul.EnlighterJS {
  padding-left: 50px !important;
}

By adding padding of 50px it kind of fixes it in bbPress. But this is not the solution for two reasons:

• The larger the starting line number, the larger padding would be needed.
• This styling messes up the regular posts where no padding is required.

I have come to the conclusion that massaging the padding for the bullet elements is not the answer. Somehow I need to ensure that the EnlighterJS container is all within the bbPress topic/reply whilst at the same time not breaking the look and feel of code samples in normal posts.

I hope this makes sense. Any advice on what CSS styling to implement is greatly appreciated.

• This topic was modified 4 years, 2 months ago by Chuckie.

The page I need help with: [log in to see the link]