├── .gitignore ├── test ├── assets │ ├── index.js │ └── markdown.md ├── markdown-renderer.js ├── markdown-options.js └── index.test.js ├── .travis.yml ├── example ├── index.js ├── README.md ├── index.html ├── package.json ├── webpack.config.js ├── github.css └── markdown.css ├── .npmignore ├── .jshintignore ├── .editorconfig ├── index.js ├── CHANGELOG.md ├── package.json ├── README.md └── .jshintrc /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | node_modules 3 | -------------------------------------------------------------------------------- /test/assets/index.js: -------------------------------------------------------------------------------- 1 | require("./markdown.md"); 2 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | os: 2 | - linux 3 | language: node_js 4 | node_js: 5 | - "4" 6 | - "5" 7 | - "7" 8 | 9 | script: 10 | - npm test 11 | -------------------------------------------------------------------------------- /example/index.js: -------------------------------------------------------------------------------- 1 | var html = require("./README.md"); 2 | var container = document.getElementById("container"); 3 | 4 | container.innerHTML = html; 5 | -------------------------------------------------------------------------------- /test/markdown-renderer.js: -------------------------------------------------------------------------------- 1 | /* globals escape */ 2 | var marked = require("marked"); 3 | var renderer = new marked.Renderer(); 4 | 5 | module.exports = renderer; 6 | -------------------------------------------------------------------------------- /test/assets/markdown.md: -------------------------------------------------------------------------------- 1 | # heading 1 2 | 3 | - buy pineapple 4 | 5 | ## heading 2 6 | 7 | _italic_ is the new __bold__ 8 | 9 | ```javascript 10 | const i = 100; 11 | ``` 12 | -------------------------------------------------------------------------------- /example/README.md: -------------------------------------------------------------------------------- 1 | # Markdown-loader-example 2 | 3 | * first 4 | * `npm install` 5 | * second 6 | * `npm start` 7 | * third 8 | * open chrome with url `localhost:4000` 9 | 10 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | lib-cov 2 | *.seed 3 | *.log 4 | *.csv 5 | *.dat 6 | *.out 7 | *.pid 8 | *.gz 9 | 10 | pids 11 | logs 12 | results 13 | 14 | npm-debug.log 15 | node_modules 16 | coverage 17 | examples 18 | .idea -------------------------------------------------------------------------------- /.jshintignore: -------------------------------------------------------------------------------- 1 | lib-cov 2 | *.seed 3 | *.log 4 | *.csv 5 | *.dat 6 | *.out 7 | *.pid 8 | *.gz 9 | 10 | pids 11 | logs 12 | results 13 | 14 | npm-debug.log 15 | node_modules 16 | coverage 17 | examples 18 | .idea -------------------------------------------------------------------------------- /test/markdown-options.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | renderer: require("./markdown-renderer"), 3 | highlight: function(code) { 4 | return require("highlight.js").highlightAuto(code).value; 5 | }, 6 | sanitize: false 7 | }; 8 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # This file is for unifying the coding style for different editors and IDEs. 2 | # More information at http://EditorConfig.org 3 | 4 | # No .editorconfig files above the root directory 5 | root = true 6 | 7 | [*] 8 | indent_style = space 9 | indent_size = 4 10 | charset = utf-8 11 | trim_trailing_whitespace = true 12 | insert_final_newline = true -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const marked = require("marked"); 4 | const loaderUtils = require("loader-utils"); 5 | 6 | module.exports = function (markdown) { 7 | // merge params and default config 8 | const options = loaderUtils.getOptions(this); 9 | 10 | this.cacheable(); 11 | 12 | marked.setOptions(options); 13 | 14 | return marked(markdown); 15 | }; 16 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | Changelog 2 | --------- 3 | 4 | ### 2.0.2 5 | - Update dependencies 6 | - marked@0.3.9 (@xuopled) 7 | 8 | ### 2.0.1 9 | - Update dependencies 10 | - loader-utils@1.1.0 (@kommander) 11 | 12 | ### 2.0.0 13 | - **Breaking:** Drop Node.js 0.12 support 14 | - **Breaking:** Drop support for custom config key (webpack 1) 15 | - Update documentation for webpack 2 16 | - Add tests 17 | - Update dependencies 18 | - marked@0.3.6 19 | -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | markdown-loader-example 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "markdown-loader-example", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "start": "webpack-dev-server --port 4000" 9 | }, 10 | "author": "qiuyuntao", 11 | "license": "ISC", 12 | "dependencies": { 13 | "html-loader": "^0.4.4", 14 | "markdown-loader": "^0.2.0", 15 | "marked": "^0.3.6", 16 | "webpack": "^2.2.1", 17 | "webpack-dev-server": "^2.3.0" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /example/webpack.config.js: -------------------------------------------------------------------------------- 1 | var webpack = require("webpack"); 2 | 3 | // markdown conver to html 4 | var marked = require("marked"); 5 | var renderer = new marked.Renderer(); 6 | 7 | module.exports = { 8 | entry: './index.js', 9 | output: { 10 | filename: 'bundle.js' 11 | }, 12 | module: { 13 | rules: [{ 14 | test: /\.md$/, 15 | use: [ 16 | { 17 | loader: "html-loader" 18 | }, 19 | { 20 | loader: require.resolve("../index.js"), 21 | options: { 22 | renderer 23 | } 24 | } 25 | ] 26 | }] 27 | } 28 | }; 29 | 30 | 31 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "markdown-loader", 3 | "version": "2.0.2", 4 | "description": "markdown-loader for webpack", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "ava test/*.test.js" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/peerigon/markdown-loader" 12 | }, 13 | "keywords": [ 14 | "webpack", 15 | "plugin", 16 | "markdown", 17 | "html" 18 | ], 19 | "author": "peerigon ", 20 | "license": "MIT", 21 | "bugs": { 22 | "url": "https://github.com/peerigon/markdown-loader/issues" 23 | }, 24 | "homepage": "https://github.com/peerigon/markdown-loader", 25 | "dependencies": { 26 | "loader-utils": "^1.1.0", 27 | "marked": "^0.3.9" 28 | }, 29 | "devDependencies": { 30 | "ava": "^0.18.0", 31 | "highlight.js": "^9.9.0", 32 | "html-loader": "^0.4.4", 33 | "webpack": "^2.2.1" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /test/index.test.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | import test from "ava"; 4 | import webpack from "webpack"; 5 | import path from "path"; 6 | import fs from "fs"; 7 | import marked from "marked"; 8 | import markdownOptions from "./markdown-options"; 9 | 10 | test.cb(t => { 11 | webpack({ 12 | entry: path.resolve(__dirname, "./assets/markdown.md"), 13 | module: { 14 | rules: [{ 15 | test: /\.md$/, 16 | use: [ 17 | { 18 | loader: "html-loader" 19 | }, 20 | { 21 | loader: require.resolve("../index.js"), 22 | options: markdownOptions 23 | } 24 | ] 25 | }] 26 | }, 27 | output: { 28 | libraryTarget: "commonjs2", 29 | path: __dirname + "/output", 30 | filename: "bundle.js" 31 | } 32 | }, function onCompilationFinished(err, stats) { 33 | if (err) { 34 | return t.end(err); 35 | } 36 | if (stats.hasErrors()) { 37 | return t.end(stats.compilation.errors[0]); 38 | } 39 | if (stats.hasWarnings()) { 40 | return t.end(stats.compilation.warnings[0]); 41 | } 42 | 43 | const bundle = require("./output/bundle"); 44 | t.is(bundle, '

heading 1

\n\n

heading 2

\n

italic is the new bold

\n
const i = 100;\n
\n'); 45 | 46 | t.end(); 47 | }); 48 | }); 49 | 50 | 51 | -------------------------------------------------------------------------------- /example/github.css: -------------------------------------------------------------------------------- 1 | /*--------------------------------------------------- 2 | LESS Elements 0.9 3 | --------------------------------------------------- 4 | A set of useful LESS mixins 5 | More info at: http://lesselements.com 6 | ---------------------------------------------------*/ 7 | /** 8 | * https://github.com/rhiokim/markdown-css 9 | * solarized-light style 10 | * made by rhio.kim 11 | * powered by http://ethanschoonover.com/solarized 12 | */ 13 | .github { 14 | padding: 20px; 15 | font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", "STHeiti", "SimSun", "Segoe UI", AppleSDGothicNeo-Medium, 'Malgun Gothic', Arial, freesans, sans-serif; 16 | font-size: 15px; 17 | background: #ffffff; 18 | line-height: 1.6; 19 | -webkit-font-smoothing: antialiased; 20 | } 21 | .github a { 22 | color: #3269a0; 23 | } 24 | .github a:hover { 25 | color: #4183c4; 26 | } 27 | .github h2 { 28 | border-bottom: 1px solid #e6e6e6; 29 | line-height: 1.6; 30 | } 31 | .github h6 { 32 | color: #777; 33 | } 34 | .github hr { 35 | border: 1px solid #e6e6e6; 36 | } 37 | .github pre > code { 38 | font-size: .9em; 39 | font-family: Consolas, Inconsolata, Courier, monospace; 40 | } 41 | .github p > code, 42 | .github li > code, 43 | .github td > code, 44 | .github h1 > code, 45 | .github h2 > code, 46 | .github h3 > code, 47 | .github h4 > code, 48 | .github h5 > code, 49 | .github h6 > code, 50 | .github blockquote > code { 51 | background-color: rgba(0, 0, 0, 0.07); 52 | font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; 53 | font-size: 85%; 54 | padding: 0.2em 0.5em; 55 | border: 0; 56 | } 57 | .github blockquote { 58 | border-left: 4px solid #e6e6e6; 59 | padding: 0 15px; 60 | font-style: italic; 61 | } 62 | .github table { 63 | background-color: #fafafa; 64 | } 65 | .github table tr th, 66 | .github table tr td { 67 | border: 1px solid #e6e6e6; 68 | } 69 | .github table tr:nth-child(2n) { 70 | background-color: #f2f2f2; 71 | } 72 | /** 73 | * after less 74 | */ 75 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | markdown-loader 2 | =============== 3 | 4 | markdown-loader for webpack using [marked](https://github.com/chjj/marked). 5 | 6 | [![](https://img.shields.io/npm/v/markdown-loader.svg)](https://www.npmjs.com/package/markdown-loader) 7 | [![](https://img.shields.io/npm/dm/markdown-loader.svg)](https://www.npmjs.com/package/markdown-loader) 8 | [![Dependency Status](https://david-dm.org/peerigon/markdown-loader.svg)](https://david-dm.org/peerigon/markdown-loader) 9 | [![Build Status](https://travis-ci.org/peerigon/markdown-loader.svg?branch=master)](https://travis-ci.org/peerigon/markdown-loader) 10 | 11 | ## Installation 12 | 13 | `npm install markdown-loader` 14 | 15 | ## Usage 16 | 17 | Since marked's output is HTML, it's best served in conjunction with the [html-loader](https://github.com/webpack/html-loader). 18 | 19 | ### Webpack 2 20 | 21 | ```javascript 22 | { 23 | module: { 24 | rules: [{ 25 | test: /\.md$/, 26 | use: [ 27 | { 28 | loader: "html-loader" 29 | }, 30 | { 31 | loader: "markdown-loader", 32 | options: { 33 | /* your options here */ 34 | } 35 | } 36 | ] 37 | }] 38 | } 39 | } 40 | ``` 41 | 42 | ### Options 43 | 44 | Simply pass your marked [options](https://marked.js.org/#/USING_ADVANCED.md#options) as shown above. 45 | In order to specify [custom renderers](https://github.com/peerigon/markdown-loader/issues/5), simply set the `options.renderer`-option on your webpack options. 46 | 47 | ```javascript 48 | // webpack.config.js 49 | 50 | const marked = require("marked"); 51 | const renderer = new marked.Renderer(); 52 | 53 | return { 54 | module: { 55 | rules: [{ 56 | test: /\.md$/, 57 | use: [ 58 | { 59 | loader: "html-loader" 60 | }, 61 | { 62 | loader: "markdown-loader", 63 | options: { 64 | pedantic: true, 65 | renderer 66 | } 67 | } 68 | ] 69 | }] 70 | } 71 | } 72 | ``` 73 | ## License 74 | 75 | MIT (http://www.opensource.org/licenses/mit-license.php) 76 | 77 | ## Sponsors 78 | 79 | [](https://peerigon.com) 80 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "browser": false, 3 | "node": true, 4 | "expr": true, 5 | "predef": [ // Extra globals. 6 | "describe", 7 | "it", 8 | "before", 9 | "after", 10 | "beforeEach", 11 | "afterEach" 12 | ], 13 | 14 | "curly": true, // Require {} for every new block or scope. 15 | "eqeqeq": true, // Require triple equals i.e. `===`. 16 | "forin": true, // Tolerate `for in` loops without `hasOwnPrototype`. 17 | "immed": true, // Require immediate invocations to be wrapped in parens e.g. `( function(){}() );` 18 | "latedef": false, // Prohibit variable use before definition. 19 | "newcap": false, // Require capitalization of all constructor functions e.g. `new F()`. 20 | "noempty": true, // Prohibit use of empty blocks. 21 | "nonew": false, // Prohibit use of constructors for side-effects. 22 | "plusplus": false, // Prohibit use of `++` & `--`. 23 | "undef": true, // Require all non-global variables be declared before they are used. 24 | "strict": true, // Require `use strict` pragma in every file. 25 | "trailing": true, // Prohibit trailing whitespaces. 26 | 27 | "asi": false, // Tolerate Automatic Semicolon Insertion (no semicolons). 28 | "boss": false, // Tolerate assignments inside if, for & while. Usually conditions & loops are for comparison, not assignments. 29 | "debug": false, // Allow debugger statements e.g. browser breakpoints. 30 | "eqnull": false, // Tolerate use of `== null`. 31 | "esnext": false, // Allow ES.next specific features such as `const` and `let`. 32 | "evil": false, // Tolerate use of `eval`. 33 | "funcscope": false, // Tolerate declarations of variables inside of control structures while accessing them later from the outside. 34 | "globalstrict": false, // Allow global "use strict" (also enables 'strict'). 35 | "iterator": false, // Allow usage of __iterator__ property. 36 | "lastsemic": false, // Tolerat missing semicolons when the it is omitted for the last statement in a one-line block. 37 | "laxbreak": false, // Tolerate unsafe line breaks e.g. `return [\n] x` without semicolons. 38 | "laxcomma": false, // Suppress warnings about comma-first coding style. 39 | "loopfunc": false, // Allow functions to be defined within loops. 40 | "multistr": false, // Tolerate multi-line strings. 41 | "proto": false, // Tolerate __proto__ property. This property is deprecated. 42 | "scripturl": false, // Tolerate script-targeted URLs. 43 | "smarttabs": false, // Tolerate mixed tabs and spaces when the latter are used for alignmnent only. 44 | "shadow": false, // Allows re-define variables later in code e.g. `var x=1; x=2;`. 45 | "sub": true, // Tolerate all forms of subscript notation besides dot notation e.g. `dict['key']` instead of `dict.key`. 46 | "supernew": false, // Tolerate `new function () { ... };` and `new Object;`. 47 | "validthis": false // Tolerate strict violations when the code is running in strict mode and you use this in a non-constructor function 48 | } 49 | -------------------------------------------------------------------------------- /example/markdown.css: -------------------------------------------------------------------------------- 1 | /** 2 | * standard markdown style 3 | */ 4 | .markdown { 5 | font-family: "Hiragino Sans GB", "Microsoft YaHei", "STHeiti", "SimSun", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", 'Segoe UI', AppleSDGothicNeo-Medium, 'Malgun Gothic', Verdana, Tahoma, sans-serif; 6 | padding: 20px; 7 | } 8 | .markdown a { 9 | text-decoration: none; 10 | vertical-align: baseline; 11 | } 12 | .markdown a:hover { 13 | text-decoration: underline; 14 | } 15 | .markdown h1 { 16 | font-size: 2.2em; 17 | font-weight: bold; 18 | margin: 1.5em 0 1em 0; 19 | } 20 | .markdown h2 { 21 | font-size: 1.8em; 22 | font-weight: bold; 23 | margin: 1.275em 0 0.85em 0; 24 | } 25 | .markdown h3 { 26 | font-size: 1.6em; 27 | font-weight: bold; 28 | margin: 1.125em 0 0.75em 0; 29 | } 30 | .markdown h4 { 31 | font-size: 1.4em; 32 | font-weight: bold; 33 | margin: 0.99em 0 0.66em 0; 34 | } 35 | .markdown h5 { 36 | font-size: 1.2em; 37 | font-weight: bold; 38 | margin: 0.855em 0 0.57em 0; 39 | } 40 | .markdown h6 { 41 | font-size: 1em; 42 | font-weight: bold; 43 | margin: 0.75em 0 0.5em 0; 44 | } 45 | .markdown h1:first-child, 46 | .markdown h2:first-child, 47 | .markdown h3:first-child, 48 | .markdown h4:first-child, 49 | .markdown h5:first-child, 50 | .markdown h6:first-child { 51 | margin-top: 0; 52 | } 53 | .markdown h1 + p, 54 | .markdown h2 + p, 55 | .markdown h3 + p, 56 | .markdown h4 + p, 57 | .markdown h5 + p, 58 | .markdown h6 + p { 59 | margin-top: 0; 60 | } 61 | .markdown hr { 62 | border: 1px solid #cccccc; 63 | } 64 | .markdown p { 65 | margin: 1em 0; 66 | word-wrap: break-word; 67 | } 68 | .markdown ol { 69 | list-style-type: decimal; 70 | } 71 | .markdown li { 72 | display: list-item; 73 | line-height: 1.4em; 74 | } 75 | .markdown blockquote { 76 | margin: 1em 20px; 77 | } 78 | .markdown blockquote > :first-child { 79 | margin-top: 0; 80 | } 81 | .markdown blockquote > :last-child { 82 | margin-bottom: 0; 83 | } 84 | .markdown blockquote cite:before { 85 | content: '\2014 \00A0'; 86 | } 87 | .markdown .code { 88 | border-radius: 3px; 89 | word-wrap: break-word; 90 | } 91 | .markdown pre { 92 | border-radius: 3px; 93 | word-wrap: break-word; 94 | border: 1px solid #cccccc; 95 | overflow: auto; 96 | padding: .5em; 97 | } 98 | .markdown pre code { 99 | border: 0; 100 | display: block; 101 | } 102 | .markdown pre > code { 103 | font-family: Consolas, Inconsolata, Courier, monospace; 104 | font-weight: bold; 105 | white-space: pre; 106 | margin: 0; 107 | } 108 | .markdown code { 109 | border-radius: 3px; 110 | word-wrap: break-word; 111 | border: 1px solid #cccccc; 112 | padding: 0 5px; 113 | margin: 0 2px; 114 | } 115 | .markdown img { 116 | max-width: 100%; 117 | } 118 | .markdown mark { 119 | color: #000; 120 | background-color: #fcf8e3; 121 | } 122 | .markdown table { 123 | padding: 0; 124 | border-collapse: collapse; 125 | border-spacing: 0; 126 | margin-bottom: 16px; 127 | } 128 | .markdown table tr th, 129 | .markdown table tr td { 130 | border: 1px solid #cccccc; 131 | margin: 0; 132 | padding: 6px 13px; 133 | } 134 | .markdown table tr th { 135 | font-weight: bold; 136 | } 137 | .markdown table tr th > :first-child { 138 | margin-top: 0; 139 | } 140 | .markdown table tr th > :last-child { 141 | margin-bottom: 0; 142 | } 143 | .markdown table tr td > :first-child { 144 | margin-top: 0; 145 | } 146 | .markdown table tr td > :last-child { 147 | margin-bottom: 0; 148 | } 149 | --------------------------------------------------------------------------------