gpt4 book ai didi

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

转载 作者:太空狗 更新时间:2023-10-29 14:57:15 25 4
gpt4 key购买 nike

我正在用 Rmarkdown 编写一份报告,该报告应以 html 格式呈现,因为它包含 Rshiny block 。有什么方法可以将行号添加到文件中吗?

重要的是,我需要文本的行号,不需要代码块,如所要求的here .

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

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

非常感谢,

保罗

最佳答案

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

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

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

完整的工作文档如下:

---
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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

<script>
$(document).ready(function(){
var $elements = $('p:not(:has(>img)), pre, ul, ol');
$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');

所以如果你不想标记输出 block 和列表,把它改成

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

(与输出 block 不同,源代码块携带类 .r。)

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

enter image description here

关于javascript - 将行号添加到呈现的 rmarkdown html 文档的文本内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37866549/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com