
Security News
/Research
Wallet-Draining npm Package Impersonates Nodemailer to Hijack Crypto Transactions
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.
react-prism-code-block
Advanced tools
I made this simple react component to have out-of-the-box styling for a code block, using `prism` for syntax highlighting.
I made this simple react component to have out-of-the-box styling for a code block, using prism
for syntax highlighting.
The goal of this component is absolute simplicity. Just plug and play. So here are the constraints on this component:
!important
hacks to target the button)npm install the-react-prism-code-block
The basic codeblock syntax is like so:
<div>
<pre>
<code className="language-javascript">
{`const foo = 'bar';`}
</code>
</pre>
</div>
And this is how the component is used:
import { PrismCodeBlock } from 'the-react-prism-code-block';
const App = () => {
return (
<PrismCodeBlock language="javascript">
function bruh() {
console.log('bruh');
}
</PrismCodeBlock>
);
};
The <PrismCodeBlock />
component takes in a language
prop, which is a string that can be one of the supported languages above. If the language is invalid, there won't be any language-specific styling.
Since this component is just a <div>
wrapping the code, you can use any props that a <div>
has. For example, you can add a className
prop to the component to add your own styling.
<PrismCodeBlock language="javascript" className="my-custom-class">
function bruh() {
console.log('bruh');
}
</PrismCodeBlock>
FAQs
I made this simple react component to have out-of-the-box styling for a code block, using `prism` for syntax highlighting.
The npm package react-prism-code-block receives a total of 0 weekly downloads. As such, react-prism-code-block popularity was classified as not popular.
We found that react-prism-code-block demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
/Research
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.
Security News
This episode explores the hard problem of reachability analysis, from static analysis limits to handling dynamic languages and massive dependency trees.
Security News
/Research
Malicious Nx npm versions stole secrets and wallet info using AI CLI tools; Socket’s AI scanner detected the supply chain attack and flagged the malware.