Variables in Markdown?

[vinayan3]

Summary

Is there a way to have variables in the markdown pages which will get replaced with values? I am writing documentation about a service which as a URL. The URL is in a couple of markdown files and I'd like to not have to find and replace incase it changes.

Is my best option to add in a custom component in Markdown? It seems heavy handed for this.

[DSchau]

You can write a little custom helper for this (or use something like lodash.template https://lodash.com/docs/4.17.11#template)

Here's a quick and dirty solution:

Given a markdown file sample.md with the following contents:

---
title: Sample
---

## Hello World

This is a [link](%URL%/sub-path), and so is [this](%URL%/sub-path)

You can create a file (let's call it src/utils/template.js) and write something like this

export default function template(content, data) {
  return content.replace(/%(.+)%/g, (match, key) => {
    const value = data[key]
    if (typeof value !== 'undefined') {
      return value
    }
    return match // guards against some unintentional prefix
  });
}

Now wiring it all together, you'll just need to use this template function to replace your content. The data object can be whatever you want and can be pulled from wherever (e.g. graphql, some constants file, environment variables, etc.).

import React from 'react'

import template from '../utils/template';

const URL = 'https://google.com'; // this can be from wherever

export default function SomeMarkdownPage({ data }) {
  // data is from GraphQL, presume the parent is data.markdown
  return (
    <div dangerouslySetInnerHTML={{
      __html: template(data.markdown.html, {
        URL
      })
    }} />
  )
}

Does this make sense? This could be a fairly useful gatsby-remark- plugin as well, but I'm not sure that exists! If you have any interest in writing that, that'd be cool, but for now, this will certainly work for your use case!

Going to close this as answered, but please feel free to re-open if any of us can help further. Thanks for using Gatsby!