htmlcssemacsline-numbers

In Emacs, how to add line number for src block by CSS?

In the following src block example:

#+begin_src python -r -n :results output :exports both
print("Hello")
print("I need line number for these code")
print("But I don't need line number when I copy code")
#+end_src

the corresponding exported html result looks like:

enter image description here

when I select, copy these code and paste to IDE to run it, I have to delete all line number. I want to ommit the line number when I copy them.

I try to use CSS to solve these problem:

pre {
   margin-top: 5px;
   margin-bottom: 20px;
   border: #66c 1px solid;
   padding: 0.5em;
   white-space: pre;
   /* background: #bce;
   background: transparent url("images/bg.jpg") repeat fixed; */
   background: #FFF;
   color: black;
   text-align: left;
   counter-reset: line; 
}

if I remove -n parameter in src block, then

pre .linenr::before {
    content: counter(line);
    counter-increment: line;
    padding-right: 1em;
    color: #999;
    border-right: 1px solid #ddd;
    margin-right: 1em;
    display: inline-block;
}

Now, the exported html looks like this:

enter image description here

Can anyone please help me solve this problem?

Solution

  • I roughly solved part of the problem using the following CSS.

    pre {
   margin-top: 5px;
   margin-bottom: 20px;
   border: #66c 1px solid;
   padding: 0.5em;
   white-space: pre-wrap; 
   background: #FFF;
   color: black;
   text-align: left;
   counter-reset: line; 
}

pre .linenr:not(.org-src-container) {
    content: counter(line);
    counter-increment: line;
    padding-right: 1em;
    color: #999;
    color: #20b2aa;
    border-right: 1px solid #ddd;
    border-right: 1px dashed #66cdaa;
    margin-right: 1em;
    display: inline;
}

pre .linenr.org-src-container {
    display: none;
}

.src .linenr {
    user-select: none; 
}