have internal links into code looking blocks

Moo*_*per 9 javascript markdown r knitr r-markdown

I would like to place links inside of a block that would look like a code block.

I believe it's impossible to do it in a real code block (though it'd be nice), but I don't really need it as I don't need nor the evaluation nor the syntax highlighting (so please don't mark as duplicate of a post that asks for functional code blocks).

I just need it to look the same (ideally independently from theme choice but I can compromise).

This is what obviously doesn't work but gives you an idea of the desired effect.

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

### print {#print}

print prints its argument and returns it invisibly (via invisible(x)).
Run Code Online (Sandbox Code Playgroud)

The code will read print("hello world") and print will be clickable and take us to the section tagged with {#print}.

It needs to work with multiple lines of code.


Edit for bounty :

Current solution is really cool and deserves more visibility. However it will create a link for a sequence of character preceding a parenthesis. I would like now to have a link whenever a variable whose name is also the label of a ### header3 is found, with no trick using : #[]

So my markdown would only be the following, with the addition of js proposed in the solution, and clicking on print or summary in my code would link to the right section:

---
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.  
Run Code Online (Sandbox Code Playgroud)

Mar*_*zer 9

我想您只需要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.   
Run Code Online (Sandbox Code Playgroud)

在此处输入图片说明

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

<style>
code > a:link, a:visited, a:hover, a:active {
  color: black;
}
</style>
Run Code Online (Sandbox Code Playgroud)

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