
Security News
vlt Launches "reproduce": A New Tool Challenging the Limits of Package Provenance
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
axe-markdown-loader
Advanced tools
allows you to import md files as React components and easy creation of documentation
Allows you to import .md files directly into React.
Mainly targetted for easier generation of component documentation, but can also be used simply to import Markdown files.
Requirements:
- Webpack
- React 16.2.0 or greater
import SomeMarkdownFile from "./SomeMarkdownFile.md";
const YourReactComponent = () => (
<div>
<SomeMarkdownFile
propVar={3344}
propString="Ipsum lorem ;)"
propFunc={() => {
console.log('hello')}
}
/>
</div>
);
export default YourReactComponent;
npm install axe-markdown-loader --save-dev
or if you use yarn:
yarn add axe-markdown-loader --dev
And add it to your webpack module/rules configuration:
{
test: /\.md/ ,
loader: ['babel-loader', 'axe-markdown-loader'] ,
exclude: /node_modules/
}
module.exports = {
entry:'./src/entry',
output: {
path: path.resolve(__dirname, 'build'),
filename: '[name].js'
},
module: {
rules: [
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' },
{ test: /\.md/, exclude: /node_modules/, loader: ['babel-loader', 'axe-markdown-loader'] },
]
}
};
@import "~axe-markdown-loader/src/themes/dark.theme";
or use light theme:
@import "~axe-markdown-loader/src/themes/light.theme";
# A title
```jsx
<div className="the-best-class-ever">
Hello
</div>
``` .
Add "show-source" next to fence block language name:
# A title
```jsx show-source
<div>Hello</div>
``` .
---
imports:
'reduce': 'reduce-object'
'TestComponent': './TestComponent'
---
```jsx show-source
<TestComponent
someProp="lorem ipsum"
/>
``` .
Add "no-render" next to fence block:
---
imports:
'reduce': 'reduce-object'
'TestComponent': './TestComponent'
---
```jsx show-source no-render
<TestComponent
someProp="lorem ipsum"
/>
``` .
The following will turn the page's background red:
# Paint it red!
```scss show-source
body {
background: red;
}
``` .
Feel free to use SCSS syntax:
# Paint it red!
```scss show-source
body {
$bg-color: red;
background: $bg-color;
div {
background: $bg-color;
}
}
``` .
Add "no-render" if you don't want to apply your scss styles:
```scss show-source no-render
body {
background: red;
}
``` .
Use a "css" fence block:
```css show-source no-render
body {
background:red;
}
``` .
When writing markdown examples, use ~~~ to open/close your fence blocks:
# Writing markdown fence blocks
```md show-source
# Title
## The subtitle
~~~css
body {
background:red;
}
~~~
``` .
Add "no-line-numbers" if you don't want display the line numbers in the source code:
# A title
```jsx show-source no-line-numbers
<div className="the-best-class-ever">
Hello
</div>
``` .
MIT
FAQs
allows you to import md files as React components and easy creation of documentation
The npm package axe-markdown-loader receives a total of 0 weekly downloads. As such, axe-markdown-loader popularity was classified as not popular.
We found that axe-markdown-loader 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
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
Research
Security News
Socket researchers uncovered a malicious PyPI package exploiting Deezer’s API to enable coordinated music piracy through API abuse and C2 server control.
Research
The Socket Research Team discovered a malicious npm package, '@ton-wallet/create', stealing cryptocurrency wallet keys from developers and users in the TON ecosystem.