sliver-md-loader
v1.0.7
Published
a webpack loader to transform markdown to jsx
Downloads
390
Readme
sliver-md-loader
a webpack loader to parse markdown file to html or reactComponent
Install
yarn add sliver-md-loader --dev
or
npm install sliver-md-loader --save-devUsage
Now you have a file example.md:
#### 示例
**这是一个示例**
```html
<!DOCTYPE html>
<title>Title</title>
<style>
body {
width: 500px;
}
</style>
<script type="application/javascript">
function $init() {
return true;
}
</script>
<body>
<p checked class="title" id="title">Title</p>
<!-- here goes the rest of the page -->
</body>
```
其他内容。。。To Html
config your webpack:
//webpack.config.js
module.exports = {
//...
module: {
rule: [
{
test: /\.md$/,
exclude: /node_modules/,
use: [
{
loader: 'sliver-md-loader',
options: {
mode: 'html'
}
}
]
}
]
}
};then you can import markdown file in your project, just like this:
//index.js
import md from 'path/to/md-file';
const ele = document.createElement('div');
ele.innerHTML = md;To React Component
To use react ,you have to install
@babe/coreand@babel/preset-reactfirst. Get more information about Babel
change the mode option for sliver-md-loader:
//webpack.config.js
module.exports = {
//...
module: {
rule: [
{
test: /\.md$/,
exclude: /node_modules/,
use: [
{
loader: 'sliver-md-loader',
options: {
mode: 'react'
}
}
]
}
]
}
};and :
//app.js
import React from 'react';
import './app.scss';
import Md from './assets/text.md';
import 'highlight.js/styles/dracula.css';
function App() {
return (
<div className="app">
<Md />
</div>
);
}
export default React.memo(App);HighLight Your Code Block
Syntax highlighting was built-in , but you should import css theme file first to enable it. See more information about hightlight.js
import 'highlight.js/styles/dracula.css';Options
mode:string
default: 'html'
Choose 'react' or 'html' to get the right result for your project.
rootElement:string
default:'section'
The html element which wrappered the result
rootClass:string
default:'markdown'
The class name of rootElement
markdown:object
Markdown-It options ：
// full options list (defaults)
var md = require('markdown-it')({
html: false, // Enable HTML tags in source
xhtmlOut: false, // Use '/' to close single tags (<br />).
// This is only for full CommonMark compatibility.
breaks: false, // Convert '\n' in paragraphs into <br>
langPrefix: 'language-', // CSS language prefix for fenced blocks. Can be
// useful for external highlighters.
linkify: false, // Autoconvert URL-like text to links
// Enable some language-neutral replacement + quotes beautification
typographer: false,
// Double + single quotes replacement pairs, when typographer enabled,
// and smartquotes on. Could be either a String or an Array.
//
// For example, you can use '«»„“' for Russian, '„“‚‘' for German,
// and ['«\xA0', '\xA0»', '‹\xA0', '\xA0›'] for French (including nbsp).
quotes: '“”‘’',
// Highlighter function. Should return escaped HTML,
// or '' if the source string is not changed and should be escaped externally.
// If result starts with <pre... internal wrapper is skipped.
highlight: function (/*str, lang*/) {
return '';
}
});