{"id":17320394,"url":"https://github.com/alexgrozav/markdown-complete-loader","last_synced_at":"2026-04-11T00:15:15.818Z","repository":{"id":95699417,"uuid":"123554059","full_name":"alexgrozav/markdown-complete-loader","owner":"alexgrozav","description":"A Webpack loader for Markdown rendering using markdown-it.","archived":false,"fork":false,"pushed_at":"2018-03-16T11:22:37.000Z","size":15,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-02T05:51:40.143Z","etag":null,"topics":["commonmark","markdown","markdown-it","vue","webpack","webpack-loader"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alexgrozav.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-03-02T08:43:21.000Z","updated_at":"2018-03-16T11:22:38.000Z","dependencies_parsed_at":null,"dependency_job_id":"79e92251-0ce6-4701-a563-88664cefe3a1","html_url":"https://github.com/alexgrozav/markdown-complete-loader","commit_stats":{"total_commits":22,"total_committers":2,"mean_commits":11.0,"dds":0.2272727272727273,"last_synced_commit":"4cb9149a639ee5de1d8adfa8c13d9d1b5038e36b"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexgrozav%2Fmarkdown-complete-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexgrozav%2Fmarkdown-complete-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexgrozav%2Fmarkdown-complete-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexgrozav%2Fmarkdown-complete-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alexgrozav","download_url":"https://codeload.github.com/alexgrozav/markdown-complete-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245773180,"owners_count":20669719,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["commonmark","markdown","markdown-it","vue","webpack","webpack-loader"],"created_at":"2024-10-15T13:30:51.712Z","updated_at":"2025-12-30T23:23:06.798Z","avatar_url":"https://github.com/alexgrozav.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# markdown-complete-loader\nA Webpack loader for Markdown rendering using [markdown-it](https://github.com/markdown-it/markdown-it).\n\n[![](https://img.shields.io/npm/v/markdown-complete-loader.svg)](https://www.npmjs.com/package/markdown-complete-loader)\n[![](https://img.shields.io/npm/dm/markdown-complete-loader.svg)](https://www.npmjs.com/package/markdown-complete-loader)\n[![Dependency Status](https://david-dm.org/peerigon/markdown-complete-loader.svg)](https://david-dm.org/alexgrozav/markdown-complete-loader)\n\n\n## Installation\n~~~\nnpm install --save-dev markdown-complete-loader\n~~~\n\n## Usage\nUse the following loader configuration in your `webpack.config.js` file (webpack 2.x and later):\n\n~~~\nmodule.exports = {\n    module: {\n        rules: [\n            {\n                test: /\\.md$/,\n                loader: \"markdown-complete-loader\"\n            }\n        ]\n    }\n};\n~~~\n\n## Options\n\nAll markdown-it options are available, together with some loader specific options.\n\n- **configFile**: optionally, you can specify path to a JS or JSON file that will serve as loader options.\n- **wrapper**: a html node such as `\u003csection\u003e` to be used for wrapping the rendered output. This feature is provided for integration with single file components, such as Vue's.\n- **preset**: the markdown-it initialization preset to use. Can be `'commonmark'`, `'default'`, or `'zero'`\n- **html**: if `true`, it enables HTML tags to be used in the source\n- **xhtmlOut**: if `true`, it uses '/' to close single tags (\u003cbr /\u003e). This is only for full CommonMark compatibility.\n- **breaks**: if `true`, it converts '\\n' in paragraphs into \u003cbr\u003e\n- **langPrefix**: a string such as `'language-'` used for CSS language prefix for fenced blocks. Can be useful for external highlighters.\n- **linkify**: if `true`, it autoconverts URL-like text to links\n- **typographer**: if `true`, it enables some language-neutral replacement + quotes beautification\n- **quotes**: a string such as `'“”‘’'`, specifying 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).\n- **plugins**: an array of plugins that can be used for markdownIt.\n- **onInit**: a callback function that allows you to manipulate the markdown-it instance after it has been initialized.\n- **onRender**: a callback function that allows you to manipulate the returned HTML string after it has been rendered.\n- **highlight**: a highlighter function. Should return escaped HTML, or '' if the source string is not changed and should be escaped externally. f result starts with `\u003cpre...` internal wrapper is skipped.\n\n~~~js\nmodule.exports = {\n    module: {\n        rules: [\n            {\n                test: /\\.md$/,\n                loader: \"markdown-complete-loader\",\n                options: {\n                    configFile: 'path/to/config.js'\n                    wrapper: '\u003csection\u003e',\n                    html: false,\n                    xhtmlOut: false,\n                    breaks: false,\n                    langPrefix: 'language-',\n                    linkify: false,\n                    typographer: false,\n                    quotes: '“”‘’',\n                    plugins: [],\n                    onInit: function (md) {\n                      return md;\n                    },\n                    onRender: function (result) {\n                      return result;\n                    },\n                    highlight: function (str, lang) {\n                      return '';\n                    }\n                }\n            }\n        ]\n    }\n};\n~~~\n\n\n#### Plugins\nYou can specify what markdownIt plugins to use inside your loader options object or config file.\n\n~~~js\nmodule.exports = {\n    module: {\n        rules: [\n            {\n                test: /\\.md$/,\n                loader: \"markdown-complete-loader\",\n                options: {\n                    plugins: [\n                        require('markdown-it-attrs')\n                    ]\n                }\n            }\n        ]\n    }\n};\n~~~\n\n#### Config File\nInside your configuration file you can use all of the loader options specified above. Specify a config file path using the `configFile` loader option.\n\n~~~js\nmodule.exports = {\n    wrapper: '\u003csection\u003e',\n    html: false,\n    xhtmlOut: false,\n    breaks: false,\n    langPrefix: 'language-',\n    linkify: false,\n    typographer: false,\n    quotes: '“”‘’',\n    plugins: [\n      require('markdown-it-attrs')\n    ],\n    onInit: function (md) {\n      return md;\n    },\n    onRender: function (result) {\n      return result;\n    },\n    highlight: function (str, lang) {\n      return '';\n    }\n};\n~~~\n\n### Vue Loader Usage\n\nTo use it as a Vue template language `\u003ctemplate lang='md'\u003e`, provide the following configuration for your vue loaders:\n\n~~~\nloaders['md'] = {\n    loader: \"markdown-complete-loader\",\n    options: {}\n};\n~~~\n\n## License\nMIT (http://www.opensource.org/licenses/mit-license.php)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexgrozav%2Fmarkdown-complete-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexgrozav%2Fmarkdown-complete-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexgrozav%2Fmarkdown-complete-loader/lists"}