PATCHES: Wrap code in <code>, add an attribute for line number value

PATCHES: Wrap code in <code>, add an attribute for line number value

[Nik Clayton]

[-- Attachment #1.1: Type: text/plain, Size: 787 bytes --]

Hi,

Attached are two TINYCHANGE patches that provide an alternative way of
displaying line numbers in generated HTML output.

The current approach hardcodes a span containing preformated text. It's
non-trivial to move this in the displayed output or adjust the formatting.
The content is also part of the selectable part of the page, so if you
copy/paste code from an ORG -> HTML file you get the line numbers as well.

The first patch just wraps each line of code in a <code> element. The
second patch extends this to include the line number of that element as a
special data- attribute. The value of this can be accessed in CSS to
display the line number, format it in interesting ways, etc, while keeping
it non-selectable, so that copy/pasting the code ignores the line numbers.

N

[-- Attachment #1.2: Type: text/html, Size: 933 bytes --]

[-- Attachment #2: 0001-ox-html.el-Wrap-each-line-of-a-source-block-in-a-cod.patch --]
[-- Type: application/octet-stream, Size: 1022 bytes --]

From 3cc1bea9a92cd66bc95a7382644679914c30b313 Mon Sep 17 00:00:00 2001
From: Nik Clayton <nik@ngo.org.uk>
Date: Tue, 4 Jun 2019 11:57:40 +0200
Subject: [PATCH 1/2] ox-html.el: Wrap each line of a source block in a code
 element

* lisp/ox-html.el (org-html-do-format-code): Wrap each line of a source block
in a code element.

This makes it straightforward to add custom decorations to each line
using CSS :before and :after properties.

TINYCHANGE
---
 lisp/ox-html.el | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lisp/ox-html.el b/lisp/ox-html.el
index 4e7ff5c10..157905ed6 100644
--- a/lisp/ox-html.el
+++ b/lisp/ox-html.el
@@ -2255,7 +2255,7 @@ line of code."
 		(format "<span class=\"linenr\">%s</span>"
 			(format num-fmt line-num)))
 	      ;; Transcoded src line.
-	      loc
+	      (format "<code>%s</code>" loc)
 	      ;; Add label, if needed.
 	      (when (and ref retain-labels) (format " (%s)" ref))))
        ;; Mark transcoded line as an anchor, if needed.
-- 
2.21.0.windows.1


[-- Attachment #3: 0002-ox-html.el-Include-the-line-number-as-a-data-attribu.patch --]
[-- Type: application/octet-stream, Size: 1661 bytes --]

From e794c0b4c885faf66eba8055700f32bc7bcb2121 Mon Sep 17 00:00:00 2001
From: Nik Clayton <nik@ngo.org.uk>
Date: Tue, 4 Jun 2019 12:41:27 +0200
Subject: [PATCH 2/2] ox-html.el: Include the line number as a data attribute

* lisp/ox-html.el (org-html-do-format-code): If line numbers are enabled
then include a data-ox-html-linenr attribute that contains this line's
line number.

This allows you to have more control over line number formatting and
placement. For example, the following CSS hides the span that contains
the line number, and uses a CSS :before property to position and format
the line number with a border instead of a semi-colon separating content
and line number.

span.linenr { display: none; }

code[data-ox-html-linenr]:before {
  content: attr(data-ox-html-linenr);
  display: inline-block;
  border-right: 1px solid;
  width: 1rem;
  text-align: right;
}

TINYCHANGE
---
 lisp/ox-html.el | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/lisp/ox-html.el b/lisp/ox-html.el
index 157905ed6..f1c06e069 100644
--- a/lisp/ox-html.el
+++ b/lisp/ox-html.el
@@ -2255,7 +2255,11 @@ line of code."
 		(format "<span class=\"linenr\">%s</span>"
 			(format num-fmt line-num)))
 	      ;; Transcoded src line.
-	      (format "<code>%s</code>" loc)
+	      (format "<code%s>%s</code>"
+                      (if num-start
+                          (format " data-ox-html-linenr=\"%s\"" line-num)
+                        "")
+                      loc)
 	      ;; Add label, if needed.
 	      (when (and ref retain-labels) (format " (%s)" ref))))
        ;; Mark transcoded line as an anchor, if needed.
-- 
2.21.0.windows.1

Re: PATCHES: Wrap code in <code>, add an attribute for line number value

[Nicolas Goaziou]

Hello,

Nik Clayton <nik@ngo.org.uk> writes:

> Attached are two TINYCHANGE patches that provide an alternative way of
> displaying line numbers in generated HTML output.

Applied. Thank you.

Could you also provide an entry in ORG-NEWS?

Regards,

-- 
Nicolas Goaziou