Page 1 of 1
Web Author - codeblock line numbers
Posted: Wed Sep 04, 2024 4:17 pm
by Johannab_31
Hello,
I'm looking to add line numbers for the codeblock element in the Web Author editor.
I tried using CSS, but I couldn't achieve it as a new line is not available as a CSS Selector.
Just wondering if you know if it's possible or maybe have an example?
Many Thanks,
Johanna Bolton
Re: Web Author - codeblock line numbers
Posted: Thu Sep 05, 2024 11:56 am
by Bogdan Dumitru
Hello Johanna,
The best way to implement line-numbers for a codeblock is to define a FormControl that allows you to change the HTML of the document. See this tutorial [1].
With CSS you definitely won't be able to achieve line numbers from a framework CSS but you might be able to render something with a application CSS like this:
Code: Select all
div[data-name="codeblock!"] {
text-wrap: nowrap;
white-space: pre;
display: flex !important;
}
div[data-name="codeblock!"]:before {
content: "1\a 2\a 3\a 4\a 5\a 6";
text-wrap: wrap;
height: calc(100% - 15px);
position: absolute;
overflow: hidden;
color: #adadad;
border-right: 1px solid gray;
padding-right: 4px;
}
div[data-name="codeblock!"] > span[data-role="text"] {
white-space: pre !important;
width: 100%;
display: block;
overflow: auto;
}
Please note that the above snippet has many flows, it's just an idea and we recommend implementing a Form Control. To apply the application CSS see this [2] sample plugin.
[1]
https://www.oxygenxml.com/maven/com/oxy ... ntrol.html
[2]
https://github.com/oxygenxml/web-author ... i-with-css
Re: Web Author - codeblock line numbers
Posted: Thu Sep 05, 2024 11:56 am
by Bogdan Dumitru
Hello Johanna,
The best way to implement line-numbers for a codeblock is to define a FormControl that allows you to change the HTML of the document. See this tutorial [1].
With CSS you definitely won't be able to achieve line numbers from a framework CSS but you might be able to render something with a application CSS like this:
Code: Select all
div[data-name="codeblock!"] {
text-wrap: nowrap;
white-space: pre;
display: flex !important;
}
div[data-name="codeblock!"]:before {
content: "1\a 2\a 3\a 4\a 5\a 6";
text-wrap: wrap;
height: calc(100% - 15px);
position: absolute;
overflow: hidden;
color: #adadad;
border-right: 1px solid gray;
padding-right: 4px;
}
div[data-name="codeblock!"] > span[data-role="text"] {
white-space: pre !important;
width: 100%;
display: block;
overflow: auto;
}
Please note that the above snippet has many flows, it's just an idea and we recommend implementing a Form Control. To apply the application CSS see this [2] sample plugin.
[1]
https://www.oxygenxml.com/maven/com/oxy ... ntrol.html
[2]
https://github.com/oxygenxml/web-author ... i-with-css