add line number to [code]

For support and discussion related to templates, themes, and imagesets in phpBB 3.2.
Post Reply
User avatar
Meis2M
Translator
Posts: 869
Joined: Wed Mar 03, 2010 11:32 am
Location: IR.Damghan
Name: میثم نوبری
Contact:

add line number to [code]

Post by Meis2M » Mon May 06, 2019 12:52 pm

Hello
i am trying to add line number to

Code: Select all

[code] 
tag with this code but still not working please help

Code: Select all

 .codebox {
    counter-reset: line;
}
.codebox code:before {
    border-right: 1px solid #ddd;
    padding: 0 .5em;
    margin-right: .5em;
    display: inline-block;
    counter-increment: line;
    content: counter(line);
}
phpBB persian international support
Ultimate SEO Friendly URL - Extension
Follow us in Instagram
Free upgrade and install extensions on your forum - drop me PM

User avatar
Hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 889
Joined: Wed Dec 30, 2009 8:14 am
Name: Michael Miday
Contact:

Re: add line number to [code]

Post by Hanakin » Mon May 06, 2019 5:54 pm

not sure this is possible with css you would have to use a code highlighter library such as highlightjs and a plugin https://github.com/wcoder/highlightjs-line-numbers.js/

counter properties are a proposal and not implemented there is only partial support for firefox and that is it https://caniuse.com/#search=counter
Donations welcome via Paypal Image

User avatar
EA117
Registered User
Posts: 583
Joined: Wed Aug 15, 2018 3:23 am
Contact:

Re: add line number to [code]

Post by EA117 » Mon May 06, 2019 6:38 pm

Hanakin wrote:
Mon May 06, 2019 5:54 pm
counter properties are a proposal and not implemented there is only partial support for firefox and that is it
Neat; hadn't seen those before. But it looks like it's custom counter styles which have the draft status and limited implementation being referred to; the same page shows support for actual CSS counters is green across the board. i.e. The draft part is defining a non-numeric and non-letter-based counter, such as:

Code: Select all

A "box-corner" counter style can be defined as:

@counter-style box-corner {
  system: fixed;
  symbols: ◰ ◳ ◲ ◱;
  suffix: ': ';
}

It will then produce lists that look like:

◰:  One
◳:  Two
◲:  Three
◱:  Four
5:  Five
6:  Six
I think the original proposed CSS didn't work because it's numbering the instances of the <code> element. But there is only a single <code> element in response to any given [code] usage; not "one per line displayed within [code]." The originally proposed CSS successfully puts a "1" at the beginning of the <code> element, if I simply enter that CSS in the F12 view of Chrome.

Therefore agreed on the "it doesn't seem like this would be possible from CSS alone", and you'll need some kind of Javascript or phpBB extension's participation in actually marking up the data within the [code] BBCode in a way that could be numbered per-line.

User avatar
Hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 889
Joined: Wed Dec 30, 2009 8:14 am
Name: Michael Miday
Contact:

Re: add line number to [code]

Post by Hanakin » Mon May 06, 2019 7:16 pm

maybe try code span with highlightjs by itself as thats how it wraps its lines with the hljs class on the span. you can see it if you inspect this page.
Donations welcome via Paypal Image

User avatar
david63
Registered User
Posts: 16063
Joined: Thu Dec 19, 2002 8:08 am
Location: Lancashire, UK
Name: David Wood
Contact:

Re: add line number to [code]

Post by david63 » Mon May 06, 2019 7:59 pm

It might also be possible to do it with an event in the text formatter
David
Remember: You only know what you know and - you don't know what you don't know!
My CDB Contributions | How to install an extension
I will not be accepting translations for any of my extensions in Github - please post any translations in the appropriate topic.
No support requests via PM or email as they will be ignored

User avatar
Meis2M
Translator
Posts: 869
Joined: Wed Mar 03, 2010 11:32 am
Location: IR.Damghan
Name: میثم نوبری
Contact:

Re: add line number to [code]

Post by Meis2M » Mon May 06, 2019 8:42 pm

Hanakin wrote:
Mon May 06, 2019 5:54 pm
not sure this is possible with css you would have to use a code highlighter library such as highlightjs and a plugin https://github.com/wcoder/highlightjs-line-numbers.js/

counter properties are a proposal and not implemented there is only partial support for firefox and that is it https://caniuse.com/#search=counter
david63 wrote:
Mon May 06, 2019 7:59 pm
It might also be possible to do it with an event in the text formatter
i tried to do this with this:
https://codepen.io/elomatreb/pen/hbgxp

and this:
https://www.sylvaindurand.org/using-css ... numbering/

it seems it is possible
phpBB persian international support
Ultimate SEO Friendly URL - Extension
Follow us in Instagram
Free upgrade and install extensions on your forum - drop me PM

User avatar
EA117
Registered User
Posts: 583
Joined: Wed Aug 15, 2018 3:23 am
Contact:

Re: add line number to [code]

Post by EA117 » Mon May 06, 2019 9:43 pm

Meis2M wrote:
Mon May 06, 2019 8:42 pm
i tried to do this with this:
https://codepen.io/elomatreb/pen/hbgxp

and this:
https://www.sylvaindurand.org/using-css ... numbering/

it seems it is possible
Agreed that it is supported and possible from a browser and CSS perspective. What's missing in the case of phpBB's [code] BBCode -- but what all those other examples you cited do have -- is a specific HTML tag that is encapsulating each line of the output. In your successful examples, the CSS numbering was simply attached to whatever that HTML element was; <span> in one case, and <code> in the other case.

But the phpBB [code] BBCode implementation doesn't already inherently "wrap every line in a specific HTML tag", such that you could apply CSS counting "to an HTML element that appears on every line." The phpBB [code] BBCode implementation simply emits the "raw" input, which when wrapped in a <pre> tag, causes the web browser itself to honor whatever line endings and other whitespace are present. There is no "per line HTML tag" for you to attach CSS numbering to in that scenario, which is why the attempts to make a CSS-only change have failed.

This is why writing a phpBB extension (which could likely intercept and extend one of the text-formatter events as david63 suggested), and/or using an additional Javascript library (as Hanakin referenced) were suggested. Because the solution to make the phpBB [code] BBCode perform numbering is going to involve further transforming that "raw" input phpBB is otherwise designed to emit; such that the output within the <pre> tag will now also have a specific HTML tag encapsulating each individual line. At which point you will be able to attach CSS numbering to whatever that added HTML tag is.

User avatar
Hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 889
Joined: Wed Dec 30, 2009 8:14 am
Name: Michael Miday
Contact:

Re: add line number to [code]

Post by Hanakin » Tue May 07, 2019 1:31 am

can not open the codpen at the moment but the second one is highly unsemantic avoid at all costs.

as EA117 mentioned and I pointed out above
Hanakin wrote:
Mon May 06, 2019 7:16 pm
maybe try code span with highlightjs by itself as thats how it wraps its lines with the hljs class on the span. you can see it if you inspect this page.
its easy to use and add just include the js and modify the bbcode template to include the required classes will give you want you want if you compare the source for a code block on .com and one on area51 you will see the difference. area51 is vanilla phpbb. Here at .com we are using a custom ext or inclusion of highlighterjs. something that I will be merging into core in the new version of the theme most likely...have a look at the new post component for the new theme...
Donations welcome via Paypal Image

Post Reply

Return to “[3.2.x] Styles Support & Discussion”