有到代码查找块的内部链接

Question

我想将链接放在一个看起来像代码块的块内。

我相信不可能在真正的代码块中做到这一点（虽然它会很好），但我并不需要它，因为我不需要评估或语法突出显示（所以请不要' t 标记为请求功能代码块的帖子的副本）。

我只需要它看起来一样（最好独立于主题选择，但我可以妥协）。

这显然是行不通的，但可以让您了解所需的效果。

```{r,echo=TRUE, eval=FALSE} 
[print](#print)("hello world")
```

### print {#print}

print prints its argument and returns it invisibly (via invisible(x)).

代码将显示为print("hello world")，print 将是可点击的，并将我们带到标记为{#print} 的部分。

它需要处理多行代码。

---

编辑赏金：

当前的解决方案非常酷，值得更多关注。但是，它将为括号前面的字符序列创建一个链接。我现在想在找到名称也是### header3 的标签的变量时有一个链接，使用没有技巧：#[]

所以我的降价只有以下，在解决方案中添加了 js，点击我的代码中的print 或summary 将链接到正确的部分：

---
title: "Untitled"
output: html_document
---

```{r, eval = FALSE}
mod <- lm(mpg ~ hp, data = mtcars)
summary(lm(mpg ~ hp, data = mtcars))
summary(mtcars)
```

### lm

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.   


### summary

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.  

Answer 1

我认为您只需要 HTML 输出。然后这是我的尝试：

1. 我们通过在行尾添加注释来标记要链接函数名称的代码行：#[]。这保证了代码仍然可以被评估。

2. 我们使用 JavaScript（带有 JQuery）来选择所有代码块（所有 <code> 元素）。对于每个块，我们获取 HTML 内容，将其逐行拆分并保存为 old_str。

3. 现在我们遍历这个代码行数组并检查我们的标记#[] 是否出现。如果是这样，我们将其删除并相应地替换该行的其他部分，包括我们的超链接。

4. 最后我们插入new_str作为该块的新HTML内容。

使用的正则表达式似乎适用于嵌套函数。标记行内的所有函数名称都已链接。

这是 MRE 及其输出：

---
title: "Untitled"
output: html_document
---

<script>
$(document).ready(function() {
  $chks = $('code');
  $chks.each(function() {
    var old_str = $(this).html().match(/[^\r\n]+/g);
    for( i = 0; i < old_str.length; i++ ) {
      if(old_str[i].includes("#[]")) {
        old_str[i] = old_str[i].replace(/#\[\]/g, '');
        old_str[i] = old_str[i].replace(/([a-zA-Z0-9\.\_]*)(\()/g, '<a href="#$1">$1</a>$2');
      } 
    }
    var new_str = old_str.join('\n');
    $(this).html(new_str);
  });
});
</script>

```{r, eval = T} 
print("hello world")#[]
```   

```{r, eval = F}
mod <- lm(mpg ~ hp, data = mtcars) #[]
summary(lm(mpg ~ hp, data = mtcars))#[]
summary(mtcars) #[]
```

### print {#print}

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.   


### Summary {#summary}

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.   

如您所见，链接的函数名称在输出文档中出现蓝色。 如果您不希望链接为蓝色，您可以使用相应的 CSS 调整链接的每个状态：

<style>
code > a:link, a:visited, a:hover, a:active {
  color: black;
}
</style>

这里我们将所有状态的字体设置为黑色。