Comments (26)
Just tried it out and seems all perfect, haven't seen the problem anymore!
Huge thanks man, I appreciate it!
from gatsby-remark-highlight-code.
@miguelgondu thx for the details. I was able to reproduce it, it seems to be an issue related to loading the languages within the web component.
Follow following issue I just opened π deckgo/deckdeckgo#1387
from gatsby-remark-highlight-code.
It works like a charm!
I love the plugin. Thank you for all the help.
from gatsby-remark-highlight-code.
Happy to hear you like the plugin!
It never happened to me before (I've the plugin implemented in https://daviddalbusco.com).
That said, we can try to find a solution ;)
Spontaneously I have the feeling that these Web Component underneath, for those without cards, doesn't seems to be loaded.
If you debug did you notice the shadow root in the DOM tree?
<deckdeckgo-highlight-code>
#shadow-root
If not, it is definitely a sign that the component is not loaded. If it is the case, in which component did you add the import?
import { defineCustomElements as deckDeckGoHighlightElement } from '@deckdeckgo/highlight-code/dist/loader';
deckDeckGoHighlightElement();
Finally, do you see any error in the debugger's console?
from gatsby-remark-highlight-code.
Hey!
So, yes i'm seeing the shadow root on the DOM tree and I can even see my code inside it.
As shown here - https://ibb.co/GMH74h0
I'm importing this on my layout component, and I'm executing the 'deckDeckGoHighlightElement()' inside a useEffect. Also tried doing this is another component and in a different way but I had the same problem.
Occasionally I'm seeing this error - https://ibb.co/5r7XVd8
Thanks for the quick reply!
from gatsby-remark-highlight-code.
Thank you for the feedback. Indeed it does looks like the component is correctly loaded.
Can you provide some code respectively not screenshot? Doing so I would be able to debug.
And with code I mean the piece of code, the slots, which are not rendered and what type of language=xxxx
did you set.
Thanks in advance for the details.
from gatsby-remark-highlight-code.
Sure!
This is one of the examples:
```html
<p>
The
<acronym title="World Wide Web Consortium">W3C</acronym>
is a community that works to develop standards for the World Wide Web.
</p>
If you want to, I've deployed this and this is one of the pages where this happens. But as I said, it's totally random - it may happen or not. https://agitated-booth-57253c.netlify.app/tips/post-124
from gatsby-remark-highlight-code.
Thx for all the details! Yes weird totally random, tried a couple of times and only faced the problem once...weird
I'll have a look again later on tonight (UTC+2 here).
from gatsby-remark-highlight-code.
Seems that time to time the following mistake is throw by unpkg when the component tries to fetch the html language:
The resource from βhttps://unpkg.com/[email protected]/components/prism-html.jsβ was blocked due to MIME type (βtext/plainβ) mismatch (X-Content-Type-Options: nosniff).
Which makes sense because there isn't such language to download.
In the component I wrap a try/catch around the fetch to ignore the error if it happens, not sure why then time to time it isn't displayed
from gatsby-remark-highlight-code.
Ok I think I can reproduce the error not randomly
- Load the article https://agitated-booth-57253c.netlify.app/tips/post-132
- Click on "Home"
- Then click on "About"
- Then on "tips"
- Then open the article again
My guess is that doing so the component aren't reloaded and somehow because of the fetch error it doesn't display anything...
from gatsby-remark-highlight-code.
Gotcha! Wait for it :)
from gatsby-remark-highlight-code.
@nixton9 update @deckdeckgo/highlight-code
in your project (v1.0.4) and it should solve the issue.
let me know if it works out or not, if not of course I'll be happy to reopen the issue.
thx for your time and for using the plugin!
from gatsby-remark-highlight-code.
Awesome, thx for the feedback and your help!
from gatsby-remark-highlight-code.
I'm using v2.0.0 and am having the same issue.
If I had to guess it has something to do with how the service worker is caching JS data.
- If I load directly onto the page with the code block it wont work.
- Refreshing the cache and hard reloading will work
- Navigating from another page to the page with code will work.
Solution
Instead of having the init code -
import { defineCustomElements as deckDeckGoHighlightElement } from '@deckdeckgo/highlight-code/dist/loader';
deckDeckGoHighlightElement();
in my index.js at the top, I have instead moved it into my Layout.js and put the deckDeckGoHighlightElement();
line in my constructor of the Layout Class.
// Layout.js
...
import { defineCustomElements as deckDeckGoHighlightElement } from '@deckdeckgo/highlight-code/dist/loader';
class Layout extends React.Component {
constructor(props) {
super(props);
this.state = { width: 0, height: 0 };
this.updateWindowDimensions = this.updateWindowDimensions.bind(this);
deckDeckGoHighlightElement();
}
...
from gatsby-remark-highlight-code.
@matthewmullin01 your repo is open source, can I give it a try? If yes, can you also explains me how to reproduce the issue?
For sure if we can manage to reproduce it, happy to reopen this one or to open a new bug.
Thanks in advance for your help.
from gatsby-remark-highlight-code.
Hi @peterpeterparker, I'm facing the same issue in my blog at the moment. Sometimes it loads, and sometimes I have to refresh a couple of times before the code loads. When it doesn't, I get the following error in the navigator's console:
and some of the code snippets look like this:
Here's a link to the blogpost in question, and to its source .mdx
.
I implemented @matthewmullin01 's solution in my layout and it still doesn't work. You can find the layout here, my blog is open-source. I'm using v3.0.1 for gatsby-remark-highlight-code
and v3.3.1 for @deckdeckgo/highlight-code
.
Thanks!
from gatsby-remark-highlight-code.
@miguelgondu I was not able to reproduce the issue, what browser + version are you using when you are facing the issue?
do you face the issue when developing locally or while using the production build?
which language is used in the code blocks that generates the error?
have you try to reproduce the error with last version of the @deckdeckgo/highlight-code
web component (v3.4.2 currently)?
from gatsby-remark-highlight-code.
I'm using Chrome 95.0.4638.69 (Official Build) (x86_64). I face this issue both when developing locally and in the production build (which is the blogpost I sent). The language is tsx
.
I will update to the newest @deckdeckgo/highlight-code
one and keep you posted. Thanks for the help!
from gatsby-remark-highlight-code.
Still facing the same issue. Some of the content doesn't load up automatically. I'm facing the same problem in Safari, but not in Firefox it seems.
from gatsby-remark-highlight-code.
Thanks!, it means a lot. Great work with the plugin. It's super good.
from gatsby-remark-highlight-code.
@miguelgondu just published a fix to npm, can you give a try to @deckdeckgo/[email protected]
and let me know if it solves the issue?
of course if not, happy to have a look at it again.
from gatsby-remark-highlight-code.
Thanks for the fix!, but after updating with npm install @deckdeckgo/[email protected]
, I still get this error on first load:
from gatsby-remark-highlight-code.
sh*t my bad, sorry, forgot something if multiple languages are used in the same page. if you don't mind can you try @deckdeckgo/[email protected]
@miguelgondu ?
from gatsby-remark-highlight-code.
Really weird: I'm still getting the exact same mistake (even after updating to 3.4.4
). The error is exactly the same: grammar
seems to be undefined in deckgo-highligh-code.entry.js:745
.
from gatsby-remark-highlight-code.
@miguelgondu @deckdeckgo/[email protected]
solves the issue, tested with your website.
I also bumped the plugin [email protected]
to set this new version as required dependency.
Thanks for your help π
from gatsby-remark-highlight-code.
Awesome! Thanks for the feedback π₯³
from gatsby-remark-highlight-code.
Related Issues (20)
- Syntax highlighting not working on deployed site HOT 7
- Configuration does not take effect afterwards HOT 9
- Unable to display code if language is not supported HOT 3
- Support for highlightLines attribute HOT 10
- Unable to highlight a single line using the current parseLanguageAndHighlightedLines implementation HOT 5
- couldnt get this to work HOT 11
- No highlights by default? HOT 7
- Hide the colored balls in Carbon theme HOT 1
- Highlight-lines does not work anymore
- It looks like language mermaid is not supported HOT 6
- How do I override inlineCode? HOT 7
- Hiding the header? HOT 1
- Overflow: scroll HOT 1
- Disabling wordwrap / enabling overflow:scroll? HOT 1
- Config for prismjs? HOT 3
- Support for gatsby 4? HOT 7
- Rerendering deckgo-highlight-code compontent on state change HOT 3
- My code doesn't highlight. HOT 1
- Support for gatsby 5? HOT 7
- Plugin doesnt work in gatsby v5 HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from gatsby-remark-highlight-code.