GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → jlengstorf → gatsby-remark-numbered-footnotes

jlengstorf / gatsby-remark-numbered-footnotes

Licence: other
A small plugin to change named footnotes to numbered footnotes in your Gatsby pages using Markdown.

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

remarkgatsbygatsbyjsgatsby-plugin

Projects that are alternatives of or similar to gatsby-remark-numbered-footnotes

gatsby-remark-highlight-code
Adds stylish cards and syntax highlighting to code blocks in markdown files
Stars: ✭ 63 (+320%)
Mutual labels:  gatsbyjs, gatsby-plugin
gatsby-remark-emojis
🚀 Processes emoji in markdown and inlines <img> tags with the corresponding base64 representation of the image.
Stars: ✭ 28 (+86.67%)
Mutual labels:  gatsbyjs, gatsby-plugin
gatsby-plugin-lunr
Gatsby plugin for full text search implementation based on lunr client-side index. Supports multilanguage search.
Stars: ✭ 69 (+360%)
Mutual labels:  gatsbyjs, gatsby-plugin
gatsby-plugin-intercom-spa
Gatsby plugin to add intercom onto a site
Stars: ✭ 23 (+53.33%)
Mutual labels:  gatsbyjs, gatsby-plugin
gatsby-remark-design-system-example
Example page for "gatsby-remark-design-system"
Stars: ✭ 13 (-13.33%)
Mutual labels:  remark, gatsby-plugin
gatsby-attila-theme-ghost
A Gatsby theme plugin for creating blogs from headless Ghost CMS.
Stars: ✭ 16 (+6.67%)
Mutual labels:  gatsbyjs, gatsby-plugin
gatsby-plugin-apollo-client
📡Inject a Shopify Apollo Client into the browser.
Stars: ✭ 20 (+33.33%)
Mutual labels:  gatsbyjs, gatsby-plugin
gatsby-transformer-remark-frontmatter
Allows querying frontmatter fields as markdown with gatsby
Stars: ✭ 13 (-13.33%)
Mutual labels:  gatsbyjs, gatsby-plugin
gatsby-theme-deck-n-blog
Create a deck (with mdx-deck) and a blog post from the same MDX
Stars: ✭ 17 (+13.33%)
Mutual labels:  gatsbyjs, gatsby-plugin
gatsby-plugin-dynamic-routes
Creating dynamic routes based on your environment and/or renaming existing routes
Stars: ✭ 14 (-6.67%)
Mutual labels:  gatsbyjs, gatsby-plugin
gatsby-graphcms-example
Example of Gatsby source plugin for GraphCMS
Stars: ✭ 32 (+113.33%)
Mutual labels:  gatsbyjs, gatsby-plugin
gatsby-remark-embedded-codesandbox
A Gatsby Remark plugin for embedding Codesandbox given a folder of files
Stars: ✭ 31 (+106.67%)
Mutual labels:  gatsbyjs, gatsby-plugin
gatsby-source-rss-feed
Gatsby source plugin for rss feed.
Stars: ✭ 24 (+60%)
Mutual labels:  gatsbyjs, gatsby-plugin
gatsby-source-stripe
Gatsby source plugin for building websites using Stripe as a data source
Stars: ✭ 71 (+373.33%)
Mutual labels:  gatsbyjs, gatsby-plugin
gatsby-plugin-scroll-indicator
A visual indicator of page scroll on Gatsby websites
Stars: ✭ 14 (-6.67%)
Mutual labels:  gatsbyjs, gatsby-plugin
gatsby-plugin-prettier-build
prettify gatsby build output
Stars: ✭ 30 (+100%)
Mutual labels:  gatsbyjs, gatsby-plugin
gatsby-plugin-disqus
💬 A plugin for adding Disqus comments to GatsbyJS
Stars: ✭ 40 (+166.67%)
Mutual labels:  gatsbyjs, gatsby-plugin
gatsby-remark-images-anywhere
Handle images with relative, absolute & remote path for gatsby-transformer-remark & gatsby-plugin-mdx
Stars: ✭ 22 (+46.67%)
Mutual labels:  remark, gatsby-plugin
gatsby-plugin-matomo
🥂 Gatsby plugin to add Matomo (formerly Piwik) onto a site.
Stars: ✭ 56 (+273.33%)
Mutual labels:  gatsbyjs, gatsby-plugin
Mdx
Markdown for the component era
Stars: ✭ 11,948 (+79553.33%)
Mutual labels:  remark
View All Similar Projects ➔

gatsby-remark-numbered-footnotes

This is a plugin for gatsby-transformer-remark that converts footnote reference links to sequential numbers.

It’s a lightweight wrapper around remark-numbered-footnotes to make it work with Gatsby.

Installation

yarn add gatsby-remark-numbered-footnotes

In gatsby-config.js, add:

  module.exports = {
    plugins: [
      {
        resolve: 'gatsby-transformer-remark',
        options: {
+         plugins: [
+           'gatsby-remark-numbered-footnotes',
+         ],
        },
      },
    ],
  };

Example Output

In Remark, it’s possible to add footnotes in Markdown like this:

This is normal body copy.[^also] It includes a couple footnotes.[^thing]

[^also]:
  This is a footnote.

[^thing]:
  This is another footnote.

By default, this will generate the following HTML:

<p>
  This is normal body copy.
  <sup id="fnref-also">
    <a href="#fn-also" class="footnote-ref">also</a>
  </sup>
  It includes a couple footnotes.
  <sup id="fnref-thing">
    <a href="#fn-thing" class="footnote-ref">thing</a>
  </sup>
</p>
<div class="footnotes">
  <hr>
  <ol>
    <li id="fn-also">
      <p>This is a footnote.</p>
      <a href="#fnref-also" class="footnote-backref">↩</a>
    </li>
    <li id="fn-thing">
      <p>This is another footnote.</p>
      <a href="#fnref-thing" class="footnote-backref">↩</a>
    </li>
  </ol>
</div>

With gatsby-remark-numbered-footnotes, the markup will change to:

  <p>
    This is normal body copy.
-   <sup id="fnref-also">
+   <sup id="fnref-1">
-     <a  class="footnote-ref">also</a>
+     <a  class="footnote-ref">1</a>
    </sup>
    It includes a couple footnotes.
-   <sup id="fnref-thing">
+   <sup id="fnref-2">
-     <a  class="footnote-ref">thing</a>
+     <a  class="footnote-ref">2</a>
    </sup>
  </p>
  <div class="footnotes">
    <hr>
    <ol>
-     <li id="fn-also">
+     <li id="fn-1">
        <p>This is a footnote.</p>
-       <a  class="footnote-backref">↩</a>
+       <a  class="footnote-backref">↩</a>
      </li>
-     <li id="fn-thing">
+     <li id="fn-2">
        <p>This is another footnote.</p>
-       <a  class="footnote-backref">↩</a>
+       <a  class="footnote-backref">↩</a>
      </li>
    </ol>
  </div>
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].