emacs-orgmode@gnu.org archives
 help / color / mirror / code / Atom feed
From: Nik Clayton <nik@ngo.org.uk>
To: emacs-orgmode <emacs-orgmode@gnu.org>
Subject: PATCHES: Wrap code in <code>, add an attribute for line number value
Date: Tue, 4 Jun 2019 15:56:25 +0200	[thread overview]
Message-ID: <CAKJTzL5VE8E_noQGtRYx3jGJsXdtz3du4XYaq6RRQV8w8SNm9A@mail.gmail.com> (raw)


[-- 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


             reply	other threads:[~2019-06-04 13:56 UTC|newest]

Thread overview: 2+ messages / expand[flat|nested]  mbox.gz  Atom feed  top
2019-06-04 13:56 Nik Clayton [this message]
2019-06-07 21:33 ` PATCHES: Wrap code in <code>, add an attribute for line number value Nicolas Goaziou

Reply instructions:

You may reply publicly to this message via plain-text email
using any one of the following methods:

* Save the following mbox file, import it into your mail client,
  and reply-to-all from there: mbox

  Avoid top-posting and favor interleaved quoting:
  https://en.wikipedia.org/wiki/Posting_style#Interleaved_style

  List information: https://www.orgmode.org/

* Reply using the --to, --cc, and --in-reply-to
  switches of git-send-email(1):

  git send-email \
    --in-reply-to=CAKJTzL5VE8E_noQGtRYx3jGJsXdtz3du4XYaq6RRQV8w8SNm9A@mail.gmail.com \
    --to=nik@ngo.org.uk \
    --cc=emacs-orgmode@gnu.org \
    /path/to/YOUR_REPLY

  https://kernel.org/pub/software/scm/git/docs/git-send-email.html

* If your mail client supports setting the In-Reply-To header
  via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line before the message body.
Code repositories for project(s) associated with this public inbox

	https://git.savannah.gnu.org/cgit/emacs/org-mode.git

This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox;
as well as URLs for read-only IMAP folder(s) and NNTP newsgroup(s).