Modify footnote backref link content with remark-rehype

[starise]

I'm using remark-gfm for footnotes. I was able to easily customize the label with footnoteBackLabel but I haven't found an option to change the backlink itself, i mean the content of the backlink. In my case I want to change from «↩» (emoji) to «↩︎» (text). Is there a way?

[wooorm]

In my case I want to change from «↩» (emoji) to «↩︎» (text).

I don’t think there’s anything specifying that it should render as an emoji btw. This is up to the host environment as far as I understand.
A different example is a snowman, which is often rendered as text, except when followed by VS 16 (U+FE0F), in which case an emoji is preferred. Some more info: https://mts.io/2015/04/21/unicode-symbol-render-text-emoji/.
In your example, the “text one” has a VS 15 (prefer text representation).

I haven't found an option to change the backlink [text] itself

Correct, there is no such feature.

I’m a bit worried about adding another option for this, there are so many for them already.
And, is there really a use case for setting arbitrary strings there?
But, an option to just switch between “maybe emoji”, “emoji” (add VS 16), and “text” (add VS 15) feels also oddly specific.

If you’re interested in working on it, a PR would go to here: https://github.com/syntax-tree/mdast-util-to-hast/blob/7d20e86fbb0d8517497a0651dfcb229a6091a0c7/lib/footer.js#L51. Then it would be pulled through up to remark-rehype.

[therealvio]

I know this thread is a bit old, but I didn't want to make a new thread since this question was already asked. I ran into a similar concern too where the emoji is being rendered and I wanted to opt in for using a plaintext alternative like a caret, or even removing it at all.

What is the recommended way to do this, if there is any nowadays?

[wooorm]

There are options for this. Depends which project you are using. But see their readmes for an Options heading. And cmd+f for “footnote”

What to use exactly depends on what you want, too. Browser eventually choose what to display. Different browsers are going to display different things.

[therealvio]

🤦 I didn't quite decipher what you meant until I realised this Q&A section is for the whole remarkjs project. I was referring to remark-gfm when I was commenting. This was my fault. Realising this, it all clicked together in my head.

For others that ran into this by Googling, or searching the Q&A section:

Changing the content of the footnote

As @wooorm indicates in replying to me, and in the accepted answer, depending on the environment an emoji is displayed in place of the text - the accepted answer includes a helpful link to include a suffix to force the display of the text.

My particular use case involved the use of remarkRehype to convert markdown to HTML. There is a property within the Options class called footnoteBackContent that can be used to change the default content ↩︎ (the text, not the emoji) to your specification.

For example, this is my markdownToHtml.ts file that does my processing:

import { unified } from "unified"
import rehypeRaw from "rehype-raw"
import rehypeStringify from "rehype-stringify"
import remarkGfm from "remark-gfm"
import remarkParse from "remark-parse"
import remarkRehype from "remark-rehype"

export default async function markdownToHtml(markdown: string) {
  const result = await unified()
    .use(remarkParse)
    .use(remarkGfm)
    .use(remarkRehype, {
      allowDangerousHtml: true,
      footnoteBackContent: "↩\u{FE0E}", // Set this value. The example depicted here ensures that the back arrow is rendered as text
    })
    .use(rehypeRaw)
    .use(rehypeStringify, { allowDangerousHtml: true })
    .process(markdown)

  return result.toString()
}

Another example using CSS

I also found I could control this through the font-family by explicitly setting up one that doesn't include the emoji font family. I use TailwindCSS, so I just set this to font-mono to my markdown-styles.module.css to verify this and it worked. So, I imagine this is similar in principle in regular CSS.

Two examples are below!

Plain old CSS:

.data-footnote-backref a {
 /* From this */
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 /* To this, note the exclusion of the Emoji fonts being removed */
font-family: ui-sans-serif, system-ui, sans-serif, "Segoe UI Symbol",

}

markdown-styles.module.css (using Tailwindcss):

.markdown a[class="data-footnote-backref"] {
  @apply no-underline after:content-none font-mono /*Or setup your own font family above for tailwindCSS*/
}

Note: Setting up custom font-family in TailwindCSS