feat: add support the Markdown *.md files in the template

webdiscus · Dec 3, 2024 · b3ff1bd · b3ff1bd
1 parent f8ad5c9
commit b3ff1bd
Show file tree

Hide file tree

Showing 82 changed files with 7,606 additions and 274 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,23 @@
 # Change log
 
+## 4.6.0 (2024-12-03)
+
+- feat: add support the Markdown `*.md` files in the template engines: `eta`, `ejs`, `handlebars`, `pug`.
+  The markdown file can be included in the HTML template, e.g. `Eta`:
+  ```html
+  <html>
+  <head>
+    <!-- Load Markdown and Highlighting styles -->
+    <link href="github-markdown-css/github-markdown-light.css" rel="stylesheet" />
+    <link href="prismjs/themes/prism.min.css" rel="stylesheet" />
+  </head>
+  <body class="markdown-body">
+    <!-- Load Markdown file -->
+    <%~ include('readme.md') %>
+  </body>
+  </html>
+  ```
+
 ## 4.5.3 (2024-11-28)
 
 - fix: issue by HMR when CSS contains Tailwind-like style names with backslashes
@@ -12,12 +30,12 @@
 ## 4.5.1 (2024-11-28)
 
 - fix: if used `splitChunks.chunks` option then this options will be removed and will be displayed a warning
-  This option make no sense, because we will split only scripts.
+  This option makes no sense, because we will split only scripts.
 - docs: update readme
 
 ## 4.5.0 (2024-11-25)
 
-- feat: add limited support the HMR for styles imported in JavaScript files
+- feat: add support the HMR for styles imported in JavaScript files
 - feat: add new `css.hot` option to enable HMR for styles
 
 ## 4.4.3 (2024-11-23)
@@ -26,7 +44,7 @@
 
 ## 4.4.2 (2024-11-18)
 
-- fix: add Exception when used `splitChunks` and occurs the error: Can't resolve a CSS file in template.
+- fix: add Exception when used `splitChunks` and occurs the error: Can't resolve a CSS file in template
 - fix: correct Exception message when a source CSS file is not found 
 
 ## 4.4.1 (2024-11-05)

diff --git a/README.md b/README.md
@@ -34,6 +34,7 @@ Advanced alternative to [html-webpack-plugin](https://github.com/jantimon/html-w
 - **Renders** the [template engines](#template-engine) "out of the box":
   [Eta](#using-template-eta), [EJS](#using-template-ejs), [Handlebars](#using-template-handlebars), [Nunjucks](#using-template-nunjucks), [Pug](#using-template-pug), [Tempura](#using-template-tempura), [TwigJS](#using-template-twig), [LiquidJS](#using-template-liquidjs).
   It is very easy to add support for any template engine.
+- Supports including of Markdown `*.md` files in the template.
 - **Source files** of [`script`](#option-js) and [`style`](#option-css) can be specified directly in HTML:
   - `<link href="./style.scss" rel="stylesheet">`\
   No longer need to define source style files in Webpack entry or import styles in JavaScript.
@@ -209,6 +210,7 @@ If you have discovered a bug or have a feature suggestion, feel free to create a
 
 ## 🔆 What's New in v4
 
+- **NEW** including of Markdown `*.md` files in the template. (since `v4.6.0`).
 - **NEW** added supports the [HMR for CSS](#option-css-hot) (since `v4.5.0`).
 - **NEW** added supports the [multiple configurations](https://webpack.js.org/configuration/configuration-types/#exporting-multiple-configurations).
 - **SUPPORTS** Webpack version `5.96+` (since `v4.2.0`).

diff --git a/examples/markdown-to-html/README.md b/examples/markdown-to-html/README.md
@@ -0,0 +1,29 @@
+# Markdown to HTML
+
+Use the [HTML Builder Plugin](https://github.com/webdiscus/html-bundler-webpack-plugin) for Webpack to render Markdown files `*.md` to HTML.
+
+Required to install additional dependencies:
+
+- markdown-it (render Markdown)
+- prismjs (highlighting)
+- parse5 (highlighting dependency)
+- github-markdown-css (GitHub styles)
+- handlebars (optional, if not used default template engine `eta`)
+
+> **Note**
+> 
+> The template engines supports Markdown: `eta`, `ejs`, `handlebars`, `pug`.
+> This example uses the `handlebars` template engine to load the markdown file.
+
+## View and edit in browser
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/edit/markdown-to-html?file=webpack.config.js)
+
+## How to use
+
+```sh
+git clone https://github.com/webdiscus/html-bundler-webpack-plugin.git
+cd examples/markdown-to-html/
+npm install
+npm run view
+```