具有指向代码查找块的内部链接

have internal links into code looking blocks

我想将 links 放在一个块中,该块 看起来 就像一个代码块。

我相信在真正的代码块中不可能做到这一点(虽然它会很好),但我真的不需要它,因为我不需要评估或语法突出显示(所以请不要将要求功能代码块的 post 标记为副本。

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

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

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

它需要使用多行代码。


赏金编辑:

当前的解决方案非常棒,值得更多关注。但是,它会为括号前的字符序列创建一个 link。我现在想要一个 link 每当找到一个名称也是 ### header3 标签的变量时,没有任何技巧使用:#[]

所以我的markdown只会是下面的,加上方案中提出的js,点击我代码中的printsummary会link到右边部分:

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

我想您只需要 HTML 输出。那么这是我的尝试:

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

  2. 我们使用JavaScript(和JQuery)来select所有代码块(所有<code>元素)。对于每个块,我们得到 HTML 内容,按行拆分并保存为 old_str.

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

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

使用的正则表达式似乎适用于嵌套函数。标记行中的所有函数名称都是 linked.

这是 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="#"></a>');
      } 
    }
    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.   

如您所见,linked 函数名称在输出文档中显示为蓝色。 如果您不希望 link 为蓝色,您可以使用相应的 CSS:

调整 link 的每个状态
<style>
code > a:link, a:visited, a:hover, a:active {
  color: black;
}
</style>

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