Web Author - codeblock line numbers

[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

[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

[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

[peterpan]

As a first visitor to your website, I must express my admiration for the exceptional quality of the content you offer.The phenomenon is remarkable!