有内部链接到代码看块

Question

我想将链接放在 看起来 的块中，就像代码块一样。

我认为在真正的代码块中做到这一点是不可能的（虽然它很好），但我并不需要它，因为我不需要也不需要评估或语法突出显示（因此请不要将其标记为要求功能代码块的帖子的副本）。

我只是需要它看起来一样（理想情况下独立于主题选择，但我可以妥协）。

这显然不起作用，但可以让您了解所需的效果。

```{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}的部分。

它需要使用多行代码。

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>

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