search

PrismJS / prism

Lightweight, robust, elegant syntax highlighting.
https://prismjs.com
MIT License
12.31k stars 1.3k forks source link

Typescript React (tsx) component does not work. #2119

Closed pat-son closed 4 years ago

pat-son commented 4 years ago

Information:

Description See the Code Sandbox link below for an example.

The Typescript and JSX components work, but the TSX component does not. If you check Prism.languages at runtime, Prism.languages.tsx is undefined.

Example https://codesandbox.io/s/zealous-ptolemy-8yi7w

RunDevelopment commented 4 years ago

The problem was dependencies. TSX depends on both JSX and Typescript to be loaded. I fixed your example accordingly.

You could also use the Autoloader plugin to load languages as needed, so don't have to worry about which languages to load and what dependencies they might have.

pat-son commented 4 years ago

Oh, I thought importing just the TSX would import the others for me. Thanks.

shoaibsharif commented 4 years ago

@RunDevelopment How could I implement that in reactjs? Is there any way I can do this on react?

RunDevelopment commented 4 years ago

Sorry but I'm not familiar with React and what you have to do to get Prism working there.

I was only able to fix the example because the author forgot the import the dependencies of Prism's TSX language definition. Usually, you don't have to worry about this because we have ways for managing dependencies (Download page, Autoloader, and the babel plugin will all handle dependencies for you).

Also, I'm not quite sure what you mean with "that" and "this" (accursed pronouns!).

shoaibsharif commented 4 years ago

My apologies for the confusion. I actually meant to import the language grammer component automatically when needed with autoloader but I couldn't figure it out, because as mentioned in website documentation I can't use loadLanguages from "prismjs/components/" (Webpack was giving me error). when I was trying to use autoloader plugins it keeps trying to look the components folder from public folder (it keeps requesting at http://localhost/components/prism*.js), I also have mentioned languages_path but still no luck. But I have found an another way to import the plugins dynamically with the help of prism.languages[lang]

RunDevelopment commented 4 years ago

Autoloader + webpack is quite interesting. Unfortunately, I'm not familiar with webpack either.

@mAAdhaTTah is this viable? From my perspective, all you have to do is to load both Prism Core and Autoloader and configure the languages_path to point to some CDN.

But I have found an another way to import the plugins dynamically with the help of prism.languages[lang]

If you mean this, then you should use our loadLanguages API for that. We guarantee that loadLanguages works and that it will continue to work in future versions.