将 CSS 类添加到 Markdown 中的锚链接Hugo

编程问答 2022-06-01

问题描述

我在 .markdown 文档中使用锚链接，如下所示：

# {#infrared}

这很好用，但我想实现以下 CSS，以便链接滚动到页面中间而不是顶部：

.anchor {
  position: absolute;
  transform: translateY(-50vh);
}

如何将 anchor 类添加到 Markdown 文档中的锚链接？

解决方法

基于这个答案 here，我们有：

根据 Goldmark 的 README 1，Markdown 处理器是 目前在 Hugo 中默认开启：

目前只有标题支持属性...

## heading ## {#id .className attrName=attrValue class="class1 class2"}
 
## heading {#id .className attrName=attrValue class="class1 class2"}
,

我认为整体 Markdown 支持 html 标签，例如你应该可以使用

<p class="anchor">text...</p>

但是无论哪种方式，如果它真的不起作用，您几乎没有其他选择。 例如“围栏代码属性”：

```{.red .numberLines startFrom="1"}
Here is a paragraph.

And another.
```

这实际上是从文档中复制的示例， 这里确实有更多选择： https://lifelongprogrammer.blogspot.com/2019/01/how-to-style-markdown-with-css.html

htmlhugo