tomchentw / react-prism Goto Github PK

It'd be nice to not require Prism to be exposed globally. I tried doing:

$ npm install prismjs react-prism

and rendering some components, but no such luck.

i'm using version 1.2.1 and I'm getting the following error:

Uncaught ReferenceError: Prism is not defined PrismCode.js:29Uncaught Reference

Any ideas?

As the title says, are there any plans? I'm looking to use something like this to make a web builder for React components.

Is there a way I can highlight code in the React's dangerouslySetInnerHTML?
I tried it but it seams the Prism doesn't highlight the code that way...

I'm trying to use:

<PrismCode className="language-regex">{`/[a-z]{5}/g`}</PrismCode>

… which outputs:

<code class="  language-regex">/[a-z]{5}/g</code>

language-javascript, however, works perfectly. I know that prism has support for regex, so I'm trying to figure out why it wouldn't work here.

    "prismjs": "^1.20.0",

    "react-prism": "^4.3.2",

Is there anyway to change the color of the highlighting? I'm asking because I want it to match the style of the site.

Thank you for putting react-prism together! Is it possible to access the data-line attribute in prism? Here's an example from reactjs.org

I can't get visiblity on what actually goes in there.
I am unable to put this level of complexity into my project.
Do you have a bare bones static simple example?

Hi,

I think Prism override React? e.g.

// this.state = { code: "import React from 'react';" };
  render() {
    return (
      <div>
        <code className="language-jsx">
          <span className="token keyword">import</span> <a onClick={this.handleClick} data-foo="abc" > React </a> <span className="token keyword">from</span> <span className="token string">'react'</span><span className="token punctuation">;</span>
        </code>
        <PrismCode className="language-jsx">
          {this.state.code}
        </PrismCode>
      </div>
    );
  }

the onClick is gone after render.

<div data-reactroot="">
  <code class=" language-jsx">
    <span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
  </code>
  <code class="  language-jsx">
    <span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
  </code>
</div>

So the question is how can I remain onClick there?

Thanks

It would be nice if you support both React 0.13 and 0.14 as your peerDependencies. Since React 0.14 is fairly new and not all the projects have upgraded to 0.14.

As of npm 3.0.* peerDependencies are not automatically installed and running npm install gives warning in react-prism regarding React 0.14

Note: I am using React 0.13.3 in my project.

Trying the library and seeing the github example, every time a new PrismCode renders a request is made for the prism.js library.

Is there any way to load it only once?

Thanks

This is both here on Github and on NPM

Please drop the peer dependency on react-addons-pure-render-mixin in favour of React's PureComponent

Hi folks! 👋

Shameless plug, but you should consider using refractor! It provides syntax highlighting using Prism, but outputs a virtual DOM instead of HTML (so you don’t use dangerouslySetInnerHTML any more), plus it uses CommonJS instead of globals! If you’d switch, you wouldn’t have to ask people to include prism.js (fixing #30)

As an aside, I also maintain lowlight, which is like refractor but wraps highlight.js, and is used in react-syntax-highlighter!