{"id":25149539,"url":"https://github.com/lucsorel/markdown-image-loader","last_synced_at":"2025-04-28T15:35:19.457Z","repository":{"id":25701700,"uuid":"106009420","full_name":"lucsorel/markdown-image-loader","owner":"lucsorel","description":"Handles image references involved in markdown files during the webpack processing.","archived":false,"fork":false,"pushed_at":"2024-06-15T19:54:12.000Z","size":608,"stargazers_count":17,"open_issues_count":0,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-10T07:43:46.727Z","etag":null,"topics":["bundling","image","loader","markdown","remarkjs","revealjs","slideshow","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/lucsorel.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":"2017-10-06T13:45:14.000Z","updated_at":"2024-06-15T19:54:14.000Z","dependencies_parsed_at":"2024-06-07T10:30:21.820Z","dependency_job_id":"125f12da-0754-4eba-ba92-1b01303aa6c6","html_url":"https://github.com/lucsorel/markdown-image-loader","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucsorel%2Fmarkdown-image-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucsorel%2Fmarkdown-image-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucsorel%2Fmarkdown-image-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucsorel%2Fmarkdown-image-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lucsorel","download_url":"https://codeload.github.com/lucsorel/markdown-image-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251339350,"owners_count":21573714,"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":["bundling","image","loader","markdown","remarkjs","revealjs","slideshow","webpack","webpack-loader"],"created_at":"2025-02-08T21:29:24.528Z","updated_at":"2025-04-28T15:35:19.435Z","avatar_url":"https://github.com/lucsorel.png","language":"JavaScript","readme":"\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://en.wikipedia.org/wiki/Markdown\" target=\"_blank\"\u003e\n    \u003cimg width=\"208px\" height=\"128px\" alt=\"Markdown logo\" style=\"margin-bottom: 36px;\" vspace=\"36px\"\n      src=\"https://upload.wikimedia.org/wikipedia/commons/4/48/Markdown-mark.svg\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/webpack/webpack\" target=\"_blank\"\u003e\n    \u003cimg width=\"200px\" height=\"200px\" alt=\"Webpack logo\"\n      src=\"https://webpack.js.org/assets/icon-square-big.svg\" /\u003e\n  \u003c/a\u003e\n  \u003ch1\u003eMarkdown image loader\u003c/h1\u003e\n\u003c/div\u003e\n\n**Handles image references involved in markdown files during the webpack processing.**\n\nHighly inspired from the [Webpack: A simple loader](https://bocoup.com/blog/webpack-a-simple-loader) article by [Michael \"Z\" Goddard](http://zfighting.tumblr.com/tagged/I-MADE-DIS), rewritten with some ES6 flavor, use-case documentation and unit testing.\n\nAdditions:\n\n* the loader does not impact references to online images (eg: image path starting with `http://`, `https://` or `//`)\n* the loader handles markdown image references with a title\n\n# Installation\n\nInstall the `markdown-image-loader` along other webpack development dependencies:\n\n```bash\n# via yarn\nyarn add -D webpack file-loader markdown-image-loader\n\n# via npm\nnpm i -D webpack file-loader markdown-image-loader\n```\n\n# How it works\n\nIn the [webpack](https://webpack.js.org/) process, this loader extracts image references of markdown documents with a regular expression, then converts them into image file requirements so that the [file-loader](https://github.com/webpack-contrib/file-loader) can process them in your build chain.\n\n# Use cases\n\n## Web-based slideshows\n\nThis loader was originally designed to quickly setup web-based slideshows using [markdown](https://en.wikipedia.org/wiki/Markdown) to build the content, [webpack](https://webpack.js.org/) to produce the static files and [webpack-dev-server](https://github.com/webpack/webpack-dev-server) to display the slideshow with **live-reload**, which can be interesting **when editing the content while interacting with the audience**.\n\nTwo full setups are given in the `examples/` folder of this repository:\n\n* [RemarkJS-based slideshow](examples/remarkjs-slideshow/RemarkJS-webpack-setup.md): this use-case was inspired by [Sébastien Castiel](https://github.com/scastiel) (thanks!).\nThis example works with webpack 5\n* [RevealJS-based slideshow](examples/revealjs-slideshow/RevealJS-webpack-setup.md): this one is my initiative\nThis example works with webpack 4 and an older version of Reveal.js (pull request to update this example are welcome)\n\nBoth slideshow examples share the same philosophy, adapted to the technical choices of each framework:\n\nThe folder structure of such projects is:\n\n```\ndist // folder containing the static files generated by the webpack build (and served by webpack-dev-server)\nsrc\n┣ index.html\n┣ [your slideshow app name]-slideshow.js\n┣ slideshow.md\n┣ slides.css // your personal style additions\n┣ fonts // folder containing the fonts required in the slides.css file, if any\n┣ img // folder containing the images referenced in slideshow.md\n┃ ┗ markdown-logo.svg, webpack-logo.svg, etc.\nwebpack.config.js // involves this markdown-image-loader and the file-loader\npackage.json // devDependencies to make the slideshow framework and webpack work together\n```\n\n* `src/index.html`:\n\n```html\n\u003c!doctype html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"utf-8\"\u003e\n    \u003c!-- the title header can be dynamically set by bundled-app.js --\u003e\n    \u003ctitle\u003eMy slideshow\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003c!-- RemarkJS expects the markdown content to be included by the webapp this way --\u003e\n    \u003ctextarea id=\"source\" style=\"display: none\"\u003e\u003c/textarea\u003e\n    \u003c!-- RevealJS expects the markdown content to be included by the webapp this way --\u003e\n    \u003cdiv class=\"reveal\"\u003e\n      \u003cdiv class=\"slides\"\u003e\n        \u003c!-- horizontal and vertical separators are my choices, tune them as you want --\u003e\n        \u003csection data-markdown data-separator=\"^---\" data-separator-vertical=\"^--\"\u003e\n          \u003ctextarea id=\"source\" data-template\u003e\u003c/textarea\u003e\n        \u003c/section\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n\n    \u003c!-- the bundled webapp will be injected here by the html-webpack-plugin --\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n* `src/[slideshow app name]-slideshow.js`:\n\n```js\n// customize your CSS here\nrequire('./slides.css')\n\n// loads the markdown content with the markdown-image-loader (which processes its image references)\ndocument.getElementById('source').innerHTML = require('./slideshow.md')\n\n// starts the slideshow with a specific configuration object\nremark.create({ ... })\n// or\nReveal.initialize({ ... })\n```\n\n* `src/slideshow.md` (each slideshow engine has its specific syntax, see the slideshow.md files in the examples):\n\n```\n# Slide 1 with a jpg reference\n\n![test1](img/test1.jpg)\n\n---\n\n# Slide 2 with an inline png reference\n\nIn line ![test2](img/test2.png) image reference.\n```\n\n* `webpack.config.js`. Loaders defined in the `module.rules` section are called from bottom to top: the `file-loader` must be called after the `markdown-image-loader` produces new file requirements:\n:\n\n```js\nconst path = require('path')\n\nmodule.exports = {\n  entry: path.join(__dirname, 'src', '[slideshow app name]-slideshow.js'),\n  output: {\n    filename: 'bundled-app.js',\n    path: path.join(__dirname, 'dist')\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.(svg|png|jpg|gif)$/,\n        use: [\n          {\n            loader: 'file-loader',\n            options: {} // produces {hash}.[ext] files by default\n          }\n        ]\n      },\n      {\n        test: /\\.(md|markdown)$/,\n        use: 'markdown-image-loader'\n      }\n    ]\n  }\n}\n```\n\nUse the [file-loader options](https://webpack.js.org/loaders/file-loader/#options) to customize the way image files must be handled (file naming, output path, url prefix, etc.). \n\n* `package.json`. Use the `scripts.build` to produce the static files ready to be served in production, for which you must include these mandatory dependencies in your project: `webpack`, `file-loader` and `markdown-image-loader`. You can optionally include the `webpack-dev-server` to serve your slideshow with live-reload with the `scripts.start` command.\n\n```json\n{\n  \"scripts\": {\n    \"build\": \"rm -rf dist \u0026\u0026 webpack\",\n    \"start\": \"webpack-dev-server\",\n    \"lint\": \"standard\"\n  },\n  \"devDependencies\": {\n    \"file-loader\": \"...\",\n    \"markdown-image-loader\": \"...\",\n    \"webpack\": \"...\",\n    \"webpack-dev-server\": \"...\"\n  },\n}\n```\n\nThe outputs generated in the `dist` folder will be:\n\n* the `bundled-app.js` file, handling the markdown content as follows:\n\n```js\n// ...\n/* 0 */\n/***/ (function(module, exports, __webpack_require__) {\nmodule.exports = [\n\"# Slide 1 with a jpg reference\\n\\n\",\n\"![test1](\" + __webpack_require__(1) + \")\",\n\"\\n\\n---\\n\\n# Slide 2 with an inline png reference\\n\\nIn line \",\n\"![test2](\" + __webpack_require__(2) + \")\",\n\" image reference.\\n\"\n]\n/***/ }),\n/* 1 */\n/***/ (function(module, exports, __webpack_require__) {\nmodule.exports = __webpack_require__.p + \"05bf210f71dda8913b3e9ac296da171f.jpg\";\n/***/ }),\n/* 2 */\n/***/ (function(module, exports, __webpack_require__) {\nmodule.exports = __webpack_require__.p + \"e3989c3353cceb13f5bb1ecf343f22a6.png\";\n/***/ })\n```\n\n* the images referenced by the markdown content, processed by the `file-loader` plugin:\n  * the `dist/05bf210f71dda8913b3e9ac296da171f.jpg` file (referenced in slide 1)\n  * the `dist/e3989c3353cceb13f5bb1ecf343f22a6.png` file (referenced in slide 2)\n\n# Unit tests\n\nUnit tests can be run with the `npm test` command.\n\nDespite these efforts, should you find an issue or spot a vital feature, you are welcome to report bugs and submit code requests!\n\n# Change log\n\n* 3.0.**1**: [config] `loader-utils` is a production depndency, not a dev dependency; upgraded version of eslint and mocha\n* **3.0.0**: [config] dependencies update, for webpack 5.x\n* 2.0.**1**: [config] dependencies update, [doc] reference to the file loader options for image file customization\n* **2.0.0**: [config] dependencies update, for webpack 3.x and 4.x. Webpack configurations for [RemarkJS](examples/remarkjs-slideshow/RemarkJS-webpack-setup.md) and [RevealJS](examples/revealjs-slideshow/RevealJS-webpack-setup.md) slideshows in the `/examples` folder have been updated for Webpack 4.x support\n* 1.0.**5**: [feature] the loader handles image references with an optional title\n* 1.0.**4**: [doc] added sample slideshows for [RemarkJS](examples/remarkjs-slideshow/RemarkJS-webpack-setup.md) and [RevealJS](examples/revealjs-slideshow/RevealJS-webpack-setup.md) in the `/examples` folder\n* 1.0.**3**: [perf] made the loader outputs cacheable, [doc] added this change log section\n* 1.0.**2**: [fix] removed the comma surrounding image requirements in the exported module content\n* 1.0.**1**: [fix] the loader should not not require URLed-image references\n* **1.0.0**: initial release with unit-tests and documentation, for webpack 3.x\n\n\n# Contributions\n\n* [Luc Sorel-Giffo](https://github.com/lucsorel)\n* [Hardik Sukhadiya](https://github.com/hardiksukhadiya)\n* [Jake Harclerode](https://github.com/Yahkob)\n\nPull-requests are welcome and will be processed on a best-effort basis.\n\n# License\n\nUnless stated otherwise all works are licensed under the [MIT license](http://spdx.org/licenses/MIT.html), a copy of which is included [here](LICENSE).\n\nCopyright (c) 2017-2024 Luc Sorel-Giffo\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flucsorel%2Fmarkdown-image-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flucsorel%2Fmarkdown-image-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flucsorel%2Fmarkdown-image-loader/lists"}