Hi,

I'd like to propose a couple of changes / enhancements to how org-export exports some data in to HTML files to make it slightly easier to style those files.

The first is re line-numbers.

At the moment those get exported as content in the HTML, although they're really additional metadata. Amongst other things, this means that if you copy/paste from the output you get the line numbers included in the text that's copied.

CSS supports arbitrary counters that can be associated with content, starting from an arbitrary value. My current hack that sort of works is the following CSS:

/* Hide the current line numbers */
span.linenr {
  display: none;
}

/* Style each line. Maintain a counter for each line, increment
   by one for each <code>...</code> element.
.reveal pre.src code {
  display: inline;
  font-size: 125%;
  line-height: 1.2;
  counter-increment: line;
}

/* Show a line number before each line. */
.reveal pre.src code:before {
  content: counter(line);
  border-right: 1px solid #ddd;
  padding: 0 0.5em;
  margin-right: 0.5em;
  width: 1em;
  display: inline-block;
  text-align: right;
}

and a change to org-html-do-format-code to wrap each line in its own <code>...</code> element:

...
          ;; Transcoded src line.
          (format "<code>%s</code>" loc)
...

But this adds line numbers to all code blocks, irrespective of the "-n" option, and they all start from one.

What I'd like to do is change the output to:

1. Omit the <span class="linenr">...</span>" content.
2. Add an additional class to the pre element to indicate whether or not this block should have line numbers.
3. Add a data-ox-starting-number (or similar) attribute to the pre element that specifies what the starting line number for this block should be.

Couple of questions before I write a patch:

a) Does that sound reasonable?
b) Should this replace the current approach, or be an option that can be toggled by a customisation?


And the second is re languages associated with exported SRC blocks.

At the moment the language is mentioned as src-... class (src-html, src-javascript, etc).

I'd like to put the language in a data-ox-src-language attribute as well (e.g., <pre class="src src-html" data-ox-src-language="HTML">...</pre>) so that I can put use CSS to put badges indicating the language in the output.


.src:after {
  content: attr(data-ox-src-language);
  position: absolute;
  top: -10px;
  right: -10px;
  font-size: 70%;
  background: green;
  color: white;
  text-align: center;
  line-height: 18px;
  border-radius: .25em;
  padding: 0 0.5em;
  box-shadow: 0 0 1px #333;
}

I see there's already some code that tries to show language badges on hover (which doesn't work for me for some reason, I haven't dug in to why).

Does this change sound reasonable?

Here's a screenshot from an export showing early versions of these changes in action. Notice how the selected text (the first function) doesn't include the line numbers in the selection.

image.png

N