Thank you for the great package,
I have noticed that Prismjs has v 1.23 is marked as hight vulnerability,

This was patched in v1.24 can the react-code-blocks be updated to use the latest prism version ? thank you

Version: [email protected]
React Version: [email protected]
Browser: Chrome/79.0.3945.88 (Mac OS 10.15)

First of all, great project - exactly what I was looking for!

Unfortunately, when setting showLineNumbers={true} on a CopyBlock, the whole block gets knocked down to below the line numbers.

Code used (after using create-react-app and removing most of the default css styles):

//App.css
.App {
  width: 800px;
  margin: 0 auto;
  margin-top: 30px;
}

//App.js
import React from 'react';
import './App.css';
import { CopyBlock, dracula } from 'react-code-blocks'

const javascriptSnippet = `function toBe() {
  if (Math.random() < 0.5) {
    return true;
  } else {
    return false;
  }
}`;

function App() {
  return (
    <div className="App">
      <CopyBlock
        language='javascript'
        showLineNumbers={true}
        text={javascriptSnippet}
        theme={dracula}
      />
    </div>
  );
}

export default App;

Hi
I saw the shell is supported in this page:
https://github.com/rajinwonderland/react-code-blocks/blob/master/LANGUAGES.md

But it gave me this error

Unhandled Rejection (Error): Language shell not supported

"bash" is working ok.
Would it be a typo in the document?
Where is the gold source of all supported language list?

Thanks in advanced

I tried creating a CopyBlock with the language set to shell but I get this error (in dev and prod): Uncaught (in promise) Error: Language shell not supported
I saw in the supported languages there is the shell language so I think this is a bug.

Problem statement

Seems like theme is undefined. This is the error received when trying to use the component:

<CopyBlock
    text={...}
    language={"typescript"}
    theme={dracula}
    showLineNumbers
    codeBlock
/>

The C# code is not highlighted with csharp. Rest are working fine.
Tried on an older Firefox browser and csharp code looked fine on it
Using it with React 17

Hello,

Thank you for the hard work that has been put into this library.

The library has an MIT license on GitHub, but on the npm is listed as having no license. As a result this is causing our internal tooling to reject onboarding this library for consumption in our organisation. Can you kindly address this?

Thank you!

Hi. Is it possible to add an actual clickable link to the code string?

const code = const instagram = 'https://www.instagram.com/didemk95/'; const a = <a href=\"http://www.example.com\">here</a>

I want them to be clickable

Hey @rajinwonderland
So I've been using your component in my Gatsby/MDX project and I love it.
I would love to contribute to the gatsby and how to use it section.

thanks for your awesome repo, I really appreciate it

Can you make a props component please. I am building something similar to material-ui. I want a Props component to display the props of the component.

I've observed an issue regarding the wrapping of content to the next line, tried by using both wrapLines & wrapLongLines but it didn't solved that.
What I found: The Span inside the CodeBlock div have a property (white-space: pre;) which is not updating to (white-space: normal;).

🎉 Just for your information, I had decided to use your package in Next Right Now and it's what's been featuring code examples for a few months already 😉

Demo: https://nrn-v2-mst-aptd-at-lcz-sty-c1.vercel.app/fr/examples/built-in-utilities/hocs

https://github.com/UnlyEd/next-right-now

When using showLineNumbers={true} the word wraps before it should be like it does in the image in line no. 11 and 12.

I tried to overwrite the existing styles with tailwindcss like this

.react-syntax-highlighter-line-number {
  @apply text-[#607B96];
}

code .token {
  @apply text-[#607B96] !important;
}

.efofCE {
  @apply bg-transparent p-0 !important;
}

.efofCE span {
  @apply bg-transparent !important;
}

.sc-bcXHqe.kBPKLM {
  @apply hidden !important;
}

And this is the result in develop.

This is the result in production (vercel).

how to fix this?

Netlify demo example on README.md return not found for https://app.netlify.com/sites/react-code-blocks/deploys

This is an awesome project, thanks for making it. Just wanted to give you a heads up the codesandbox demo is broken, you just need to change package.json to point to a more recent version of react. (I changed it to 16.8 for example and it worked)

Line numbers don't extend the entire code block when there is a script tag in a HTML code block.

in demo code: https://codesandbox.io/s/react-code-blocks-xgjrr?fontsize=14&file=/src/index.js
i just changed line 44 language to 'xml' and it faces error : language xml is not supported.
do i need to change anything else?

Cool library! Wanted to point out that the codesandbox example is broken due to an export syntax error.

Hi, react-code-blocks is very nice! However, it would be useful if there was a way to only load the required languages, as currently the bundle is very large and in most cases will be loading many more languages than the client likely needs.

I am trying to use a code block with html (which is supported according to supported languages), but it gives me the following error:

async-syntax-highlighter.js:110 Uncaught (in promise) Error: Language html not supported
at Function._callee$ (async-syntax-highlighter.js:110)
at tryCatch (runtime.js:45)
at Generator.invoke [as _invoke] (runtime.js:274)
at Generator.prototype. [as next] (runtime.js:97)
at asyncGeneratorStep (asyncToGenerator.js:3)
at _next (asyncToGenerator.js:25)
at asyncToGenerator.js:32
at new Promise ()
at Function. (asyncToGenerator.js:21)
at Function.loadLanguage (async-syntax-highlighter.js:121)
at ReactAsyncHighlighter.loadLanguage (async-syntax-highlighter.js:67)
at ReactAsyncHighlighter.componentDidMount (async-syntax-highlighter.js:53)
at commitLifeCycles (react-dom.development.js:19814)
at commitLayoutEffects (react-dom.development.js:22803)
at HTMLUnknownElement.callCallback (react-dom.development.js:188)
at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
at invokeGuardedCallback (react-dom.development.js:292)
at commitRootImpl (react-dom.development.js:22541)
at unstable_runWithPriority (scheduler.development.js:653)
at runWithPriority$1 (react-dom.development.js:11039)
at commitRoot (react-dom.development.js:22381)
at finishSyncRender (react-dom.development.js:21807)
at performSyncWorkOnRoot (react-dom.development.js:21793)
at react-dom.development.js:11089
at unstable_runWithPriority (scheduler.development.js:653)
at runWithPriority$1 (react-dom.development.js:11039)
at flushSyncCallbackQueueImpl (react-dom.development.js:11084)
at flushSyncCallbackQueue (react-dom.development.js:11072)
at flushPassiveEffectsImpl (react-dom.development.js:22883)
at unstable_runWithPriority (scheduler.development.js:653)
at runWithPriority$1 (react-dom.development.js:11039)
at flushPassiveEffects (react-dom.development.js:22820)
at react-dom.development.js:22699
at workLoop (scheduler.development.js:597)
at flushWork (scheduler.development.js:552)
at MessagePort.performWorkUntilDeadline (scheduler.development.js:164)

here is my implementation

<CopyBlock text={code} language="html" showLineNumbers={true} theme={dracula} wrapLines codeBlock />

[email protected]

Downloaded this library because it looked great for the project I'm working on. Unfortunately ran into this error:

For now I can use the language 'jsx' for what I need to do but it would be nice to have 'html' available. I tried 'html5' and 'HTML' just incase it was a name thing or something but nothing worked.

Would be great if we could pass in a custom component if the icon that's used by default doesn't suit the design. :)

Hi, it'll be good if I can soft-wrap long code in a line by passing in a parameter like softWrap={true}.

Currently I need to write custom css to implement soft-wrap. It works but nice to add in this feature.

code {
  max-width: 90%;
  overflow-wrap: break-word;
}

I am not getting any Error message after adding the packages .
`
npm WARN deprecated [email protected]: Version no longer supported. Upgrade to @latest

added 28 packages, and audited 1137 packages in 9s

176 packages are looking for funding
run npm fund for details

6 vulnerabilities (5 moderate, 1 high)

Some issues need review, and may require choosing
a different dependency.
`

into code file.

`

`

It is available in the demo but not in the list of languages.

When we are using Bootstrap and react-code-blocks then the theme changes quite a bit

The above image shows the dracula theme. Is there any way to fix that?

Hello and thanks for the library :)

I need to write long ugly one line script and it gets overlaid by copy button. Maybe it would make sense to add option to break code before reaching copy button or moving button outside of container. I solved this using padding in customStyle but I find that to be hacky and I think this is legit concern for long lines as rare as they are (should be).

Edge of one line also overflowed outside of container.

I do not know what the cause is here as last span does not seem to actually overflow. Here with white background:

When building a react project with react-code-blocks, the build output includes a build file for each supported language even if one language is used.

This doesn't occur if directly importing for react-syntax-highlighter.

Expected Behavior:
Only include build file for languages being used in project.

I'm using @vercel to ship a pretty simple .tsx app and for some reason, it renders as inline instead of code block. Here's my code:

const toggleCodeTheme = (window.innerWidth) < 1000 ? hybrid : github;
<CopyBlock language="javascript" text={iterative} codeBlock theme={toggleCodeTheme} showLineNumbers={false} />

By default it appears that it expands to the code snippet's entire length. This is not ideal for large snippets of code you need to place inside a block while still making the webpage look nice.

I tried to import the package and straight off it didn't work :(

it is currently under dependencies, but should only be needed for dev (as far as i understand).

currently since it is a normal dependency of the package it is messing my project's dependency tree since the project is using typescript 4 while the installed [email protected] requires typescript@^2.5.2 || ^3.0.

core.js:221
Uncaught ReferenceError: global is not defined
at capture (core.js:221:28)
at node_modules/react-code-blocks/node_modules/refractor/core.js (core.js:5:15)
at __require2 (chunk-62VDRKYJ.js?v=20a5b317:19:50)
at prism-light.js:2:23

I see it says html is a supported language, but I'm getting an error when trying to use it with a CopyBlock

Seems to happen when I have improper syntax in the code block. Test with the following (missing quote)

<a href="https://google.com>Hello World</a>

Node v10.8.0
[email protected]
react ^16.12.0

Issue:
The Themed Components are exported at the package level but do not include typed props. TS throws compile errors because we are accessing "unsafe/undefined" properties of the components.

I want to use this code block component with my custom background. How to remove the built-in bg wrapper for the code block?

Error when trying to use the solution described here.

Error message:
TypeError: Cannot read properties of undefined (reading 'toString')

I copy-pasted the component exactly as is from here, installed the required library and included the import in the code, but can't make this to work as per error above.

Hello! Love the component and especially the highlight feature. However, when using the highlight prop, text becomes not selectable.

Works fine with the normal component:

However, I cannot select any text when highlighting a line:

Would be amazing to see a fix for this.

I used the below code. I tried both language csharp and cs. There is an error in the dev version but the style is still applied for the code block.
In the build production version, the error is still there but there is no style for code. How can I fix this?

<CopyBlock
   language='csharp'
   text={codeString}
   wrapLines
   showLineNumbers
   theme={sunburst}
   codeBlock
 ></CopyBlock>

I m using react code blocks to display a json and some values in there are hyperlinks is it possible to make them clickable?
code sandbox

Hi there, I just noticed there's error pops up when language is xml. However xml is a supported language listed here, can anyone help with this? Thank you!

Hi, I have an issue with line numbers.

It is probably a bug.

<CopyBlock
  text={'var a = 10;\nconsole.log(a);'}
  language="javascript"
  theme="dracula"
  wrapLines
  codeBlock
/>

<span linenumbercontainerstyle="[object Object]"></span>

Warning: React does not recognize the lineNumberContainerStyle prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase linenumbercontainerstyle instead. If you accidentally passed it from a parent component, remove it from the DOM element.

This is how the UI is looking

Below is my code I used

      text={`function toBe() {
            if (Math.random() < 0.5) {
              return true;
            } else {
              return false;
            }
            }`}
      showLineNumbers={true}
      codeBlock
      language="text"
      theme={a11yDark}
      customStyle={{
        height: "250px",
        width: "100%",
        overflowY: "scroll",
        borderRadius: "5px",
        boxShadow: "1px 2px 3px rgba(0,0,0,0.35)",
        fontSize: "3.75rem",
        margin: "0px 0.75rem",
      }}
    />```


**I tried changing themes and tried in custom styles also but it didn't work**

I would like to have support for prop types for components such as CodeBlock and CopyBlock using TypeScript. Is there any way to provide types for these components?

I want to implement like this:

type Props = CodeBlockProps;
const Example: React.FC<Props> = (props: Props) => {
 return (
  <CodeBlock {...props} language="jsx" />
  );
}

this not properly working with my react native app he got error in my android application "s.default.button is not a function. (In 's.default.button(k(),(function(e){return e.theme.backgroundColor}),(function(e){return e.copied?1:.5}))', 's.default.button' is undefined)"

I want to use the soft wrap long lines feature that is implemented back in June but not published to npm.

Could you please publish a new version with the latest changes?