iamskok
commented
5 years ago @ar-stackrox Do you mind sending a full gatsby-config.js file?
Closed alanonthegit closed 5 years ago
iamskok
commented
5 years ago @ar-stackrox Do you mind sending a full gatsby-config.js file?
luisduenas
commented
5 years ago same issue here, this is my gatsby-config.js
module.exports = {
siteMetadata: {
...
},
},
mapping: {
"Mdx.frontmatter.contributors": "ContributorYaml",
},
plugins: [
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/../source/data`,
name: `data`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/../source/docs/assets/images`,
name: `images`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/../source/content`,
name: `content`,
},
},
`gatsby-transformer-yaml`,
{
resolve: `gatsby-mdx`,
options: {
extensions: [".mdx", ".md"],
gatsbyRemarkPlugins: [
{
resolve: "gatsby-remark-code-buttons",
},
{
resolve: "gatsby-remark-images",
options: {
maxWidth: 1035,
sizeByPixelDensity: true,
showCaptions: true,
linkImagesToOriginal: false,
},
},
{
resolve: `gatsby-remark-prismjs`,
options: {
classPrefix: "language-",
inlineCodeMarker: null,
aliases: {},
},
},
{
resolve: "gatsby-remark-external-links",
options: {
target: null,
rel: "nofollow noopener noreferrer external",
},
},
{
resolve: `gatsby-remark-slug`,
},
],
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: "gatsby-plugin-web-font-loader",
options: {
google: {
families: ["Open Sans"],
},
},
},
{
resolve: `gatsby-plugin-google-analytics`,
},
`gatsby-plugin-react-helmet`,
],
}
alanonthegit
commented
5 years ago Sure, here it is. Trying to use it with gatsby-remark-vscode instead of prism, but I'm loading your plugin before remark-vscode. The build works fine when I remove the code-buttons plugin. I removed the metadata
module.exports = {
siteMetadata: {
...
},
},
plugins: [
{
resolve: `gatsby-plugin-layout`,
options: {
component: require.resolve(`./src/layouts/index.tsx`)
}
},
"gatsby-transformer-sharp",
"gatsby-plugin-sharp",
"gatsby-plugin-typescript",
// Add static assets before markdown files
{
resolve: `gatsby-source-filesystem`,
options: {
name: `uploads`,
path: `${__dirname}/src/images`
}
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `pages`,
path: `${__dirname}/src/pages/`
}
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `content`,
path: `${__dirname}/src/content/`
}
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `files`,
path: `${__dirname}/src/files/`
}
},
{
resolve: `gatsby-mdx`,
options: {
extensions: [".mdx", ".md", ".html"],
// defaultLayouts: {
// posts: require.resolve("./src/templates/post.js"),
// default: require.resolve("./src/templates/page.js")
// },
gatsbyRemarkPlugins: [
{
resolve: 'gatsby-remark-code-buttons'
},
// gatsby-remark-relative-images must
// go before gatsby-remark-images
{
resolve: `gatsby-remark-relative-images`
},
{
resolve: "gatsby-remark-images",
options: {
maxWidth: 860,
linkImagesToOriginal: false,
showCaptions: true,
quality: 85,
withWebp: true
}
},
{
resolve: "gatsby-remark-copy-linked-files",
options: {
destinationDir: "files"
}
},
{
resolve: "gatsby-remark-external-links",
options: {
target: "_self",
rel: "nofollow"
}
},
{
resolve: `gatsby-remark-figure-caption`,
options: { figureClassName: "md-figure" }
},
{
resolve: "gatsby-remark-code-titles"
},
{
resolve: "gatsby-remark-smartypants"
},
{
resolve: "gatsby-remark-embed-video",
options: {
width: 640,
ratio: 1.77, // Optional: Defaults to 16/9 = 1.77
height: 640, // Optional: Overrides optional.ratio
related: false, //Optional: Will remove related videos from the end of an embedded YouTube video.
noIframeBorder: true //Optional: Disable insertion of <style> border: 0
}
},
{
resolve: "gatsby-remark-autolink-headers"
},
{
resolve: `gatsby-remark-vscode`,
// All options are optional. Defaults shown here.
options: {
colorTheme: 'Dark+ (default dark)', // Read on for list of included themes. Also accepts object and function forms.
wrapperClassName: '', // Additional class put on 'pre' tag
injectStyles: true, // Injects (minimal) additional CSS for layout and scrolling
extensions: [{
identifier: 'silvenon.mdx',
version: '0.1.0'
}], // Extensions to download from the marketplace to provide more languages and themes
languageAliases: {}, // Map of custom/unknown language codes to standard/known language codes
getLineClassName: ({ // Function allowing dynamic setting of additional class names on individual lines
content, // - the string content of the line
index, // - the zero-based index of the line within the code fence
language, // - the language specified for the code fence
codeFenceOptions // - any options set on the code fence alongside the language (more on this later)
}) => ''
}
}
]
}
},
{
resolve: "gatsby-plugin-svgr",
options: {
prettier: true, // use prettier to format JS code output (default)
svgo: true, // use svgo to optimize SVGs (default)
svgoConfig: {
plugins: {
removeViewBox: false,
cleanupIDs: false
}
}
}
},
"gatsby-plugin-react-helmet",
"gatsby-plugin-catch-links",
"gatsby-plugin-lodash",
"gatsby-plugin-sitemap",
},
"gatsby-plugin-postcss",
{
resolve: `gatsby-plugin-nprogress`,
options: {
// Setting a color is optional.
color: `tomato`,
// Disable the loading spinner.
showSpinner: false
}
},
{
resolve: `@gatsby-contrib/gatsby-plugin-elasticlunr-search`,
options: {
// Fields to index
fields: [`title`, `description`, `tags`],
// How to resolve each field`s value for a supported node type
resolvers: {
// For any node of type MarkdownRemark, list how to resolve the fields` values
Mdx: {
title: node => node.frontmatter.title,
description: node => node.frontmatter.description,
tags: node => node.frontmatter.tags,
published: node => node.frontmatter.published,
path: node => node.fields.slug
}
}
}
},
"gatsby-plugin-meta-redirect",
"gatsby-plugin-remove-serviceworker"
]
};@ar-stackrox Thanks for providing your gatsby-config.js. I'm currently away from the computer, can you do me a favor and replace gatsby-remark-code-buttons with gatsby-remark-code-titles plugin and tell me if you will be getting the same error?
@luisduenas I will try to look into this issue tomorrow morning.
alanonthegit
commented
5 years ago @iamskok No problem! I'm actually already using that plugin and it works fine -
iamskok
commented
5 years ago @ar-stackrox What I meant is if you could comment out gatsby-remark-code-buttons and paste gatsby-remark-code-titles on its place (from my experience the order of the plugins might sometimes matter) and see if we have any errors. I’m trying to understand if this issue is specific to this plugin or other plugins are affected as well. gatsby-remark-code-titles is a good candidate for this test bc these plugins are very similar with each other.
And I also forgot to ask you for a copy of your package.json @ar-stackrox @luisduenas @jmolivas Sent with GitHawk
luisduenas
commented
5 years ago here's my packages.json, i removed gatsby-remark-code-button for now but everything else it's the same
{
"name": "gatsby-starter-blog",
"private": true,
"description": "A starter for a blog powered by Gatsby and Markdown",
"version": "0.1.0",
"author": "Kyle Mathews <mathews.kyle@gmail.com>",
"bugs": {
"url": "https://github.com/gatsbyjs/gatsby/issues"
},
"dependencies": {
"@mdx-js/mdx": "^1.0.18",
"@mdx-js/react": "^1.0.16",
"date-fns": "^1.30.1",
"dotenv": "^6.2.0",
"gatsby": "^2.1.31",
"gatsby-image": "^2.0.33",
"gatsby-mdx": "^0.6.3",
"gatsby-plugin-feed": "^2.0.15",
"gatsby-plugin-google-analytics": "^2.0.17",
"gatsby-plugin-manifest": "^2.0.24",
"gatsby-plugin-react-helmet": "^3.0.9",
"gatsby-plugin-sharp": "^2.0.28",
"gatsby-plugin-web-font-loader": "^1.0.4",
"gatsby-remark-external-links": "0.0.4",
"gatsby-remark-images": "^2.0.6",
"gatsby-remark-prismjs": "^3.2.5",
"gatsby-remark-responsive-iframe": "^2.0.10",
"gatsby-remark-slug": "^0.1.0",
"gatsby-source-filesystem": "^2.0.24",
"gatsby-transformer-json": "^2.1.11",
"gatsby-transformer-remark": "^2.3.2",
"gatsby-transformer-sharp": "^2.1.17",
"gatsby-transformer-yaml": "^2.1.10",
"prismjs": "^1.15.0",
"react": "^16.8.4",
"react-dom": "^16.8.4",
"react-helmet": "^5.2.0",
"remove": "^0.1.5",
"tocbot": "^4.6.0"
},
"devDependencies": {
"prettier": "^1.16.4"
},
"homepage": "https://github.com/gatsbyjs/gatsby-starter-blog#readme",
"keywords": [
"gatsby"
],
"license": "MIT",
"main": "n/a",
"repository": {
"type": "git",
"url": "git+https://github.com/gatsbyjs/gatsby-starter-blog.git"
},
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"format": "prettier --write src/**/*.{js,jsx}",
"start": "npm run develop",
"serve": "gatsby serve",
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\""
}
}oh, and i forgot to say, i installed gatsby-remark-code-titles and worked fine, i think the problem is in markdownAST
iamskok
commented
5 years ago @luisduenas Thank you. I started looking at it this morning but didn't have enough time to figure it out. Will try to spend more time in the next couple of days.
iamskok
commented
5 years ago @ar-stackrox @luisduenas I tried reproducing this issue by cloning gatsby-mdx example and installing gatsby-remark-code-buttons
My build was clean however the copy button wasn't working bc onClick="copyToClipboard('code block content to copy...')" wasn't populated.
iamskok
commented
5 years ago gatsby-remark-code-buttons doesn’t work with MDX. For more information on MDX implementation please reference to the issue above.
Sent with GitHawk
arinker
commented
4 years ago @iamskok: Thank your for your plugin!
I am trying to let "gatsby-plugin-mdx", "gatsby-remark-code-buttons" and _ "gatsby-remark-prismjs" play together.
Everything but "gatsby-remark-code-buttons" works as expected:
It would be nice if you could me help out to fix it. Please find my code below:
{
"name": "fluency-framework",
"version": "0.1.0",
"description": "Build responsive, mobile-first projects on the web with the world’s most advanced front-end component library.",
"private": true,
"author": "Arno Rinker <arinker@byteyard.de>",
"browserslist": [
"ie >= 11",
"last 3 edge versions",
"last 3 firefox major versions",
"last 3 chrome versions",
"last 3 safari versions",
"last 3 opera versions"
],
"dependencies": {
"@deckdeckgo/highlight-code": "^1.0.0-rc.2-1",
"@fortawesome/fontawesome-svg-core": "^1.2.25",
"@fortawesome/free-brands-svg-icons": "^5.11.2",
"@fortawesome/free-solid-svg-icons": "^5.11.2",
"@fortawesome/pro-light-svg-icons": "^5.11.2",
"@fortawesome/react-fontawesome": "^0.1.7",
"@mdx-js/mdx": "^1.5.3",
"@mdx-js/react": "^1.5.3",
"babel-plugin-styled-components": "^1.10.6",
"gatsby": "^2.18.21",
"gatsby-image": "^2.2.30",
"gatsby-plugin-manifest": "^2.2.25",
"gatsby-plugin-mdx": "^1.0.67",
"gatsby-plugin-offline": "^3.0.17",
"gatsby-plugin-postcss-sass": "^1.0.22",
"gatsby-plugin-react-helmet": "^3.1.13",
"gatsby-plugin-sass": "^2.1.20",
"gatsby-plugin-sharp": "^2.2.34",
"gatsby-plugin-styled-components": "^3.1.13",
"gatsby-remark-code-buttons": "^2.0.4",
"gatsby-remark-prismjs": "^3.3.30",
"gatsby-source-filesystem": "^2.1.35",
"gatsby-transformer-remark": "^2.6.48",
"gatsby-transformer-sharp": "^2.3.1",
"prop-types": "^15.7.2",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-helmet": "^5.2.1",
"sass": "^1.23.3",
"styled-components": "^4.4.1"
},
"devDependencies": {
"prettier": "^1.18.2"
},
"keywords": [
"fluency"
],
"license": "MIT",
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"format": "prettier --write \"**/*.{js,jsx,json,md}\"",
"start": "npm run develop",
"serve": "gatsby serve",
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/arinker/fluency"
},
"bugs": {
"url": "https://github.com/arinker/fluency/issues"
}
}module.exports = {
siteMetadata: {
title: `fluency`,
description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
author: `@gatsbyjs`,
menuLinks: [{…}]
},
plugins: [
`gatsby-plugin-react-helmet`, {
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`
}
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
`gatsby-plugin-styled-components`, {
resolve: `gatsby-plugin-mdx`,
options: {
gatsbyRemarkPlugins: [{
resolve: 'gatsby-remark-code-buttons',
options: {
buttonText: `<p>Copy to Clipboard</p>`,
svgIcon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M336 64h-88.6c.4-2.6.6-5.3.6-8 0-30.9-25.1-56-56-56s-56 25.1-56 56c0 2.7.2 5.4.6 8H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 32c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm160 432c0 8.8-7.2 16-16 16H48c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16h48v20c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12V96h48c8.8 0 16 7.2 16 16z"></path></svg>`,
tooltipText: `Copy to Clipboard`,
toasterText: 'Copied to Clipboard',
toasterDuration: 5000
}
}, {
resolve: `gatsby-remark-prismjs`
}]
}
}, {
resolve: `gatsby-plugin-manifest`,
options: {
name: `gatsby-starter-default`,
short_name: `starter`,
start_url: `/`,
background_color: `#663399`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
}
}, {
resolve: `gatsby-plugin-sass`,
options: {
implementation: require("sass")
}
}
// this (optional) plugin enables Progressive Web App + Offline functionality To
// learn more, visit: https://gatsby.dev/offline `gatsby-plugin-offline`,
]
}import './src/styles/documentation.scss';
require("prismjs/themes/prism-okaidia.css")
require("prismjs/plugins/line-numbers/prism-line-numbers.css")import React from "react"
import Layout from "../components/layout"
import SEO from "../components/seo"
import GetStarted from '../docs/get-started.mdx'
const IndexPage = () => (
<Layout>
<SEO title="Get Started"/>
<section class={`documentation`}>
<GetStarted/>
</section>
<div>
<p>Hallo</p>
</div>
</Layout>
)
export default IndexPage# Get started with fluency
```html
<html lang="en" dir="ltr">
<head><!-- Your head goes here --></head>
<body id="fluency" class="no-js">
<div id="mq"></div>
<div id="screen" class="">
<script>
function setMediaQuery() {
var element = document.getElementById('mq');
var target = document.getElementById('screen');
var style = getComputedStyle(element);
var mq = style['zIndex'];
target.className = ('mq' + mq);
}
(function() { setMediaQuery(); })();
window.addEventListener("resize", function(){ setMediaQuery(); });
</script>
<div id="overlays">
<!-- Your Overlays go here -->
</div>
<div id="page-and-offcanvas">
<div id="offcanvas-left" class="offcanvas left closed">
<!-- Your Left Offcanvas goes here -->
</div>
<div id="page">
<div id="page-background">
<!-- Your Page Background goes here -->
</div>
<div id="page-border-wrapper">
<div id="header-and-main">
<header id="header">
<!-- Your Header goes here -->
</header>
<main id="main">
<!-- Your Main Content goes here -->
</main>
</div>
<footer id="footer">
<!-- Your Footer Content goes here -->
</footer>
</div>
</div>
<div id="offcanvas-right" class="offcanvas right closed">
<!-- Your Right Offcanvas goes here -->
</div>
</div>
</div>
<!-- Your Body Scripts go here -->
</body>
</html>index.js:2177 Warning: Expected `onClick` listener to be a function, instead got a value of `string` type.
in div (created by MDXCreateElement)
in MDXCreateElement (at get-started.mdx:24)
in wrapper (created by MDXCreateElement)
in MDXCreateElement (at get-started.mdx:21)
in MDXContent (at pages/index.js:11)
in section (at pages/index.js:10)
in section (at layout.js:182)
in div (at layout.js:180)
in div (at layout.js:179)
in div (at layout.js:177)
in div (at layout.js:175)
in div (at layout.js:173)
in div (at layout.js:171)
in div (created by Context.Consumer)
in StyledComponent (created by layout__AppMain)
in layout__AppMain (at layout.js:170)
in div (created by Context.Consumer)
in StyledComponent (created by layout__AppHeaderAndMain)
in layout__AppHeaderAndMain (at layout.js:164)
in div (created by Context.Consumer)
in StyledComponent (created by layout__AppPage)
in layout__AppPage (at layout.js:162)
in div (created by Context.Consumer)
in StyledComponent (created by layout__AppPageAndOffcanvas)
in layout__AppPageAndOffcanvas (at layout.js:156)
in div (created by Context.Consumer)
in StyledComponent (created by layout__App)
in layout__App (at layout.js:154)
in Layout (at pages/index.js:8)
in IndexPage (created by HotExportedIndexPage)
in AppContainer (created by HotExportedIndexPage)
in HotExportedIndexPage (created by PageRenderer)
in PageRenderer (at query-result-store.js:86)
in PageQueryStore (at root.js:51)
in RouteHandler (at root.js:73)
in div (created by FocusHandlerImpl)
in FocusHandlerImpl (created by Context.Consumer)
in FocusHandler (created by RouterImpl)
in RouterImpl (created by Context.Consumer)
in Location (created by Context.Consumer)
in Router (created by EnsureResources)
in ScrollContext (at root.js:64)
in RouteUpdates (at root.js:63)
in EnsureResources (at root.js:61)
in LocationHandler (at root.js:119)
in LocationProvider (created by Context.Consumer)
in Location (at root.js:118)
in Root (at root.js:126)
in MDXProvider (at wrap-root-element.js:65)
in MDXScopeProvider (at wrap-root-element.js:64)
in Unknown
in Unknown (at wrap-root-element.js:72)
in StaticQueryStore (at root.js:133)
in _default (at app.js:67)
__stack_frame_overlay_proxy_console__ @ index.js:2177
warningWithoutStack @ react-dom.development.js:531
warning @ react-dom.development.js:1019
warnForInvalidEventListener @ react-dom.development.js:7652
setInitialDOMProperties @ react-dom.development.js:7741
setInitialProperties @ react-dom.development.js:7951
finalizeInitialChildren @ react-dom.development.js:9479
completeWork @ react-dom.development.js:21094
completeUnitOfWork @ react-dom.development.js:24729
performUnitOfWork @ react-dom.development.js:24705
workLoopSync @ react-dom.development.js:24670
performSyncWorkOnRoot @ react-dom.development.js:24269
scheduleUpdateOnFiber @ react-dom.development.js:23697
updateContainer @ react-dom.development.js:27102
(anonymous) @ react-dom.development.js:27527
unbatchedUpdates @ react-dom.development.js:24432
legacyRenderSubtreeIntoContainer @ react-dom.development.js:27526
render @ react-dom.development.js:27607
(anonymous) @ app.js:67
setTimeout (async)
(anonymous) @ ready.js:32
(anonymous) @ app.js:66
Promise.then (async)
(anonymous) @ app.js:59
Promise.then (async)
(anonymous) @ app.js:23
./.cache/app.js @ app.js:16
__webpack_require__ @ bootstrap:726
fn @ bootstrap:100
0 @ documentation.scss?3e0d:45
__webpack_require__ @ bootstrap:726
(anonymous) @ bootstrap:793
(anonymous) @ bootstrap:793Uncaught Error: Expected `onClick` listener to be a function, instead got a value of `string` type.
at getListener (react-dom.development.js:846)
at listenerAtPhase (react-dom.development.js:4743)
at accumulateDirectionalDispatches (react-dom.development.js:4768)
at traverseTwoPhase (react-dom.development.js:4673)
at accumulateTwoPhaseDispatchesSingle (react-dom.development.js:4786)
at forEachAccumulated (react-dom.development.js:695)
at accumulateTwoPhaseDispatches (react-dom.development.js:4821)
at Object.extractEvents (react-dom.development.js:5681)
at extractPluginEvents (react-dom.development.js:868)
at runExtractedPluginEventsInBatch (react-dom.development.js:880)
at handleTopLevel (react-dom.development.js:5804)
at batchedEventUpdates$1 (react-dom.development.js:24400)
at batchedEventUpdates (react-dom.development.js:1416)
at dispatchEventForPluginEventSystem (react-dom.development.js:5895)
at attemptToDispatchEvent (react-dom.development.js:6011)
at dispatchEvent (react-dom.development.js:5915)
at unstable_runWithPriority (scheduler.development.js:697)
at runWithPriority$2 (react-dom.development.js:12150)
at discreteUpdates$1 (react-dom.development.js:24416)
at discreteUpdates (react-dom.development.js:1439)
at dispatchDiscreteEvent (react-dom.development.js:5882)
getListener @ react-dom.development.js:846
listenerAtPhase @ react-dom.development.js:4743
accumulateDirectionalDispatches @ react-dom.development.js:4768
traverseTwoPhase @ react-dom.development.js:4673
accumulateTwoPhaseDispatchesSingle @ react-dom.development.js:4786
forEachAccumulated @ react-dom.development.js:695
accumulateTwoPhaseDispatches @ react-dom.development.js:4821
extractEvents @ react-dom.development.js:5681
extractPluginEvents @ react-dom.development.js:868
runExtractedPluginEventsInBatch @ react-dom.development.js:880
handleTopLevel @ react-dom.development.js:5804
batchedEventUpdates$1 @ react-dom.development.js:24400
batchedEventUpdates @ react-dom.development.js:1416
dispatchEventForPluginEventSystem @ react-dom.development.js:5895
attemptToDispatchEvent @ react-dom.development.js:6011
dispatchEvent @ react-dom.development.js:5915
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12150
discreteUpdates$1 @ react-dom.development.js:24416
discreteUpdates @ react-dom.development.js:1439
dispatchDiscreteEvent @ react-dom.development.js:5882@arinker thanks for your detailed issue! This plugin doesn't support MDX, but you are more than welcome to submit a PR and I will try to help you along the way. Let me know if you would like to reopen this issue?
arinker
commented
4 years ago @iamskok Thank you for your quick reply and offer to help! Unfortunately we do not have the resources to go deeper into your plugin. Thus we cannot submit a PR and have to live without the plugin for the time being.
davidkartuzinski
commented
4 years ago @arinker thanks for your detailed issue! This plugin doesn't support MDX, but you are more than welcome to submit a PR and I will try to help you along the way. Let me know if you would like to reopen this issue?
Does this mean in order to use the plugin we must only use it with .md files? Is that how the main gatsby site works? What about https://github.com/iamskok/gatsby-mdx-remark-code-buttons-example (I could not get it to work btw)?
If the button will not work with MDX, could you please unequivocally add that to the docs/readme. I literally spent the last five hours trying to get it to work :(
I tried so many things.
Anyway, thank you I will use it on my .md sites, I just can't use it today.
-DK
ps. if you'd like to take a look at how I was trying to get it to work: https://github.com/davidkartuzinski/gatsby-theme-naked-core/tree/code-copy-link
Thanks again.
iamskok
commented
4 years ago @davidkartuzinski thanks, David! The docs were updated. Now there is a link for MDX copy button example as well.
davidkartuzinski
commented
4 years ago @iamskok Thank you for your answer. I am a little confused. I read the docs on gatsby and I don't see any changes or anything about using gatsy-remark-code-buttons with MDX.
I looked at the readme. The readme seems to say that this will NOT work with MDX.
This example repo https://github.com/iamskok/gatsby-mdx-remark-code-buttons-example - does not work.
Does the button work with MDX?
Thank you for your attention, I would love to use your hard work to help my readers.
Thank you.
-DK
iamskok
commented
4 years ago @davidkartuzinski this plugin it’s not working with MDX, but I have referenced an example from Gatsby’s website on how to add a copy button with MDX. https://github.com/gatsbyjs/gatsby/pull/15834
davidkartuzinski
commented
4 years ago @iamskok Thank you! Now I understand. I can now try to figure it out. I really appreciate it. Thank you.
After NPM install and adding it to the gatsby-config, the following errors are displayed.
Has also been verified by others.