将行号添加到呈现的 rmarkdown html 文档的文本内容

Question

我正在用 Rmarkdown 编写一份报告，该报告应在 html 中呈现，因为它包含 Rshiny 块。有什么办法可以在文件中添加行号吗？

重要的是，我需要文本的行号，不需要代码块的行号here。

我想知道是否可以添加一些 CSS 到下面的 .Rmd 文件，但我不知道该怎么做。

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


This R Markdown document is made interactive using Shiny. 
Unlike the more traditional workflow of creating static reports, you can now create documents that allow your 
readers to change the assumptions underlying your analysis and see the results immediately. 

## Inputs and Outputs

You can embed Shiny inputs and outputs in your document. Outputs are automatically updated whenever inputs change.  
This demonstrates how a standard R plot can be made interactive by wrapping it in the Shiny `renderPlot` function. 
The `selectInput` and `sliderInput` functions create the input widgets used to drive the plot.

非常感谢，

保罗

Answer 1

有趣的问题，因为我喜欢在 RMarkdown 文档中使用 JS 和 jQuery，所以我试了一下。

这个解决方案不是防弹的。它仅在 Firefox 上测试过。由于 jQuery 的跨浏览器兼容性一团糟，因此它可能只适用于 Firefox。

现在每一行都带有标签，包括普通段落、无序列表和有序列表、源代码和输出块。

完整的工作文档如下：

---
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: 0px 3px;
    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 height
        var 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)
```

您可以通过从行中删除相应的标签来排除某些部分

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

因此，如果您不想标记输出块和列表，请将其更改为

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

（与输出块不同，源代码块带有 class .r。）

正如我所说，对于复杂的文档，您可能会遇到一些错误。如果你这样做，请告诉我 ;)

将行号添加到呈现的 rmarkdown html 文档的文本内容

Add line numbers to text content of a rendered rmarkdown html document

html

javascript

css

r

r-markdown