With Gridsome's source-filesystem plugin in gridsome.config.js:
plugins: [
{
use: '@gridsome/source-filesystem',
options: {
path: 'docs/**/*.md',
typeName: 'Doc',
remark: {
plugins: ['@gridsome/remark-prismjs'],
autolinkHeadings: true
}
}
},
I am able to render my markdown headings correctly:
## Foo Bar
renders as:
<h2 id="foo-bar">
<a href=#foo-bar" aria-hidden="true">
<span class="icon icon-link"></span>
</a>
Foo Bar
</h2>
but nothing in the documentation for the plugin or under Gridsome mentions how to actually allow the link icon to be rendered or appended/how to modify aria-hidden
to false
.
In Gridsome how can I render markdown heading as clickable links with the span icon visible?
Under the transformers
section in gridsome.config.js
add autolinkClassName
key. The value added here would be persisted as a class
near the heading.
Example:
module.exports = {
...
transformers: {
remark: {
autolinkClassName: "fas fa-link mr-2",
...
}
}
}