Add Line Numbers To Text Content Of A Rendered Rmarkdown Html Document

I am writing a report in Rmarkdown which shall be rendered in html because it contains Rshiny chunks. Is there any way I can add line numbers to the file? Importantly I need line n

Solution 1:

Interesting question and since I like to play around with JS and jQuery inside of RMarkdown documents I gave it a shot.

This solution is not bulletproof. It is only tested with Firefox. Since cross-browser compatibility of jQuery is a mess it will probably only work with Firefox.

Every line is now labeled including normal paragraphs, unordered and ordered lists, source code and output chunks.

Here is the complete working document:

---
title: "Title"
author: "Yourname"
date: "June 16, 2016"
output: html_document
runtime: shiny
---

<style>/* Style the linenumber div */.linenumbers {
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #EBEBEB;
    text-align: center;
    padding: 0px3px;
    font-family: monospace;
    float: left;
    position: absolute;
    transform:translate(-125%);
    font-size: inherit !important;
  }

  .main-container {
    margin-left: 8%!important;
  }

  /* fixes the problem with inline code 
     that makes the line spacing bigger: */p > code {
    line-height: 90%!important;
  }
</style><script>var $elements = $('p:not(:has(>img)), pre,  ul, ol').slice(start=1);

  $(document).ready(function(){
    $elements.wrap('<numbering/>');
    $('numbering').prepend('<div class=\"linenumbers\"/>');

    updateLines = function(elmts) {
      var counter = 1; // counts total number of lines
      $(elmts).each(function() {       

        if($(this).is('pre')) {
          var $elmt = $(this).children('code');
          var styles = $(this).css([ "padding-top", "padding-bottom", "line-height"]);
          $(this).siblings('.linenumbers').css(styles);
        } else {
          var $elmt = $(this);
        }

        var h  = $elmt.outerHeight();  // get the heightvar nl = Math.round(h /parseFloat($elmt.css('line-height'))); 
        var text = '';
        for(var i=counter; i < counter + nl; ++i) {
          text += i + '</br>';
        }
        counter += nl;
        $(this).siblings('.linenumbers').html(text);
      });
    };
    updateLines($elements);

  });

  $(window).resize(function() {
    updateLines($elements);
  });
</script>

This R Markdown document has the ability to interactively number 
the lines of text content. It might not be perfect but it sure 
looks nice. If you find a bug or have a tip for how to further improve 
the code, please let me know. I am no professional JavaScript 
programmer so  this was made by an amateur ;)


What if I leave some space here?


## Inputs and Outputs

Here starts another paragraph. Look how the line numbers jump over to 
this one! This is amazing! For demonstrating purposes I have to write 
some more lines. So I bore you a bit more with my nonsense. NONSENSE! 
Ok let us try out some inline code and see whether the line numbers 
still align. `library(ggplot2)` And a second `time()`. Looks ok I 
guess. 
Here starts another paragraph. Look how the line numbers jump over to 
this one! This is amazing! For demonstrating purposes I have to write 
some more lines.    
So I bore you a bit more with my nonsense. NONSENSE! Ok let us try out 
some inline code and see whether the line numbers still align.
`library(ggplot2)` And a second `time()`. Looks ok I guess.

```{r}
x <- 1:5
B <- 'Martin'
head(mtcars)
```

```{r}
plot(1)
```

You can exclude certain parts by just removing the corresponding tag from the line

var $elements = $('p:not(:has(>img)), pre,  ul, ol').slice(start=1);

So if you do not want to label output chunks and lists, change it to

var $elements = $('p:not(:has(>img)), pre.r').slice(start=1);

(Unlike output chunks, source code chunks carry the class .r.)

As I said for complex documents you might stumble over some bugs. Let me know if you do ;)