markdowngridsomegridsome-plugingridsome-source-filesystem

Gridsome how to render link icon in markdown with source-filesystem?


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?


Solution

  • 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",
          ...
        }
      }
    }