
Research
Malicious fezbox npm Package Steals Browser Passwords from Cookies via Innovative QR Code Steganographic Technique
A malicious package uses a QR code as steganography in an innovative technique.
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.
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.
Research
A malicious package uses a QR code as steganography in an innovative technique.
Research
/Security News
Socket identified 80 fake candidates targeting engineering roles, including suspected North Korean operators, exposing the new reality of hiring as a security function.
Application Security
/Research
/Security News
Socket detected multiple compromised CrowdStrike npm packages, continuing the "Shai-Hulud" supply chain attack that has now impacted nearly 500 packages.