[!NOTE]`, + replacement: `
Note
`, + }, + { + search: `
+[!TIP]`, + replacement: `
Tip
`, + }, + { + search: `
+[!IMPORTANT]`, + replacement: `
Important
`, + }, + { + search: `
+[!WARNING]`, + replacement: `
Warning
`, + }, + { + search: `
+[!CAUTION]`, + replacement: `
Caution
`, + }, + ]; + + return replacements.reduce((acc, { search, replacement }) => acc.replaceAll(search, replacement), content); + }, +}; + +module.exports = extension; diff --git a/src/Loader/PreprocessorFilters/markdown/index.js b/src/Loader/PreprocessorFilters/markdown/index.js new file mode 100644 index 00000000..69d1ee0a --- /dev/null +++ b/src/Loader/PreprocessorFilters/markdown/index.js @@ -0,0 +1,119 @@ +const adapter = require('../highlight/adapter'); +const { resolveModule } = require('../../Utils'); +const { deepMerge } = require('../../../Common/Helpers'); +const { loadNodeModuleException } = require('../Exeptions'); + +const GitHubAlertsExtension = require('./extensions/GitHubAlertsExtension'); + +/** + * @typedef {Object} MarkdownExtension + * @param {(function(options: Object): Object)} init Initialize MarkdownIt options. + * @param {(function(content: string): string)} beforeRender Calls before render markdown. + * @param {(function(content: string): string)} afterRender Calls after render markdown. + */ + +/** + * Embedded filter markdown. + * @singleton + */ +const filter = { + name: 'markdown', + moduleName: 'markdown-it', + module: null, + + /** + * Initialize the filter. + * + * @param {Object} options + * + * @public + * @api + */ + init(options = {}) { + const defaultOptions = { + highlight: { + use: { + // the name of a using highlight npm module. + module: 'prismjs', + options: { + // display in console warnings and loaded dependencies + verbose: true, + }, + }, + }, + }; + + // TODO: cache module by webpack compiler (pro config) + options = deepMerge(defaultOptions, options); + + let langPrefix = options.highlight.langPrefix; + let use = options.highlight.use; + const moduleFile = resolveModule(this.moduleName); + + if (!moduleFile) { + loadNodeModuleException(this.moduleName); + } + + const MarkdownIt = require(moduleFile); + + // Render custom markdown elements, e.g. GitHub alerts. + this.extensions = [GitHubAlertsExtension]; + + let markdownItOptions = { + // enable HTML tags in markdown source + html: true, + }; + + if (use) { + adapter.init(use); + + langPrefix = adapter.getLangPrefix(); + markdownItOptions.highlight = (text, lang) => { + return `
'; + }; + } + + markdownItOptions = this.tap('init', markdownItOptions); + + this.module = new MarkdownIt(markdownItOptions); + }, + + /** + * Apply the filter. + * + * @param {string} content + * @returns {string} + * @public + * @api + */ + apply(content) { + content = this.tap('beforeRender', content); + content = this.module.render(content); + content = this.tap('afterRender', content); + + return content; + }, + + /** + * Call the method of all registered extensions. + * + * @param {string} name The method name. + * @param {*} input The argument of callable method. If you have many arguments, use an object. + * @return {*} + */ + tap(name, input) { + let output = input; + + if (this.extensions) { + this.extensions.forEach((extension) => { + if (typeof extension[name] === 'function') { + output = extension[name](output); + } + }); + } + + return output; + }, +}; + +module.exports = filter; diff --git a/src/Loader/Preprocessors/Ejs/index.js b/src/Loader/Preprocessors/Ejs/index.js index c57a0782..baa96372 100644 --- a/src/Loader/Preprocessors/Ejs/index.js +++ b/src/Loader/Preprocessors/Ejs/index.js @@ -3,6 +3,8 @@ const path = require('path'); const { loadModule } = require('../../../Common/FileUtils'); const { stringifyJSON } = require('../../Utils'); +const MarkdownFilter = require('../../PreprocessorFilters/markdown'); + // replace the partial file and data to load nested included template via the Webpack loader // include("./file.html") => require("./file.eta")({...locals, ...{}}) // include('./file.html', { name: 'Siri' }) => require('./file.eta')({...locals, ...{name: 'Siri'}}) @@ -35,6 +37,29 @@ const preprocessor = (loaderContext, options) => { const Ejs = loadModule(moduleName); const { rootContext } = loaderContext; + const filterOption = { + highlight: { + use: { + module: 'prismjs', + options: { + verbose: true, // display loaded dependencies + }, + }, + }, + }; + + MarkdownFilter.init(filterOption); + + Ejs.fileLoader = (file) => { + const source = readFileSync(file, 'utf-8'); + + if (file.toLocaleLowerCase().endsWith('.md')) { + return MarkdownFilter.apply(source); + } + + return source; + }; + return { /** * Unique preprocessor ID as the module name. diff --git a/src/Loader/Preprocessors/Eta/index.js b/src/Loader/Preprocessors/Eta/index.js index 9181fb10..ab63c114 100644 --- a/src/Loader/Preprocessors/Eta/index.js +++ b/src/Loader/Preprocessors/Eta/index.js @@ -1,6 +1,8 @@ const path = require('path'); const { stringifyJSON } = require('../../Utils'); const { loadModule } = require('../../../Common/FileUtils'); +const { readFileSync } = require('fs'); +const MarkdownFilter = require('../../PreprocessorFilters/markdown'); // replace the partial file and data to load nested included template via the Webpack loader // include("./file.html") => require("./file.eta")({...it, ...{}}) @@ -22,6 +24,10 @@ const preprocessor = (loaderContext, options) => { const { rootContext } = loaderContext; let views = options.views; + // since eta v3 the `async` option is removed, but for compatibility, it is still used in this plugin + // defaults is false, when is true then must be used `await includeAsync()` + const async = options?.async === true; + if (!views) { views = rootContext; } else if (!path.isAbsolute(views)) { @@ -34,9 +40,28 @@ const preprocessor = (loaderContext, options) => { views, // directory that contains templates }); - // since eta v3 the `async` option is removed, but for compatibility, it is still used in this plugin - // defaults is false, when is true then must be used `await includeAsync()` - const async = options?.async === true; + const filterOption = { + highlight: { + use: { + module: 'prismjs', + options: { + verbose: true, // display loaded dependencies + }, + }, + }, + }; + + MarkdownFilter.init(filterOption); + + eta.readFile = (file) => { + const source = readFileSync(file, 'utf-8'); + + if (file.toLocaleLowerCase().endsWith('.md')) { + return MarkdownFilter.apply(source); + } + + return source; + }; return { /** diff --git a/src/Loader/Preprocessors/Handlebars/filters/markdown/index.js b/src/Loader/Preprocessors/Handlebars/filters/markdown/index.js new file mode 100644 index 00000000..1894e768 --- /dev/null +++ b/src/Loader/Preprocessors/Handlebars/filters/markdown/index.js @@ -0,0 +1,13 @@ +const markdown = require('../../../../PreprocessorFilters/markdown'); + +class Filter { + static init(options) { + markdown.init(options); + } + + static apply(content) { + return markdown.apply(content); + } +} + +module.exports = Filter; diff --git a/src/Loader/Preprocessors/Handlebars/helpers/include.js b/src/Loader/Preprocessors/Handlebars/helpers/include.js index 4caa1433..afc6fee8 100644 --- a/src/Loader/Preprocessors/Handlebars/helpers/include.js +++ b/src/Loader/Preprocessors/Handlebars/helpers/include.js @@ -1,5 +1,7 @@ const { resolveFile } = require('../../../../Common/FileUtils'); +const MarkdownFilter = require('../filters/markdown/index'); + /** @typedef {import('handlebars')} Handlebars */ /** @typedef {import('handlebars').HelperOptions} HelperOptions */ @@ -14,6 +16,19 @@ const { resolveFile } = require('../../../../Common/FileUtils'); * @return {function(filename: string, options: Object, args: Object): Handlebars.SafeString} */ module.exports = ({ Handlebars, fs, root, views = [], extensions = [] }) => { + const filterOption = { + highlight: { + use: { + module: 'prismjs', + options: { + verbose: true, // display loaded dependencies + }, + }, + }, + }; + + MarkdownFilter.init(filterOption); + /** * Include the partial file in a template. * @@ -30,11 +45,17 @@ module.exports = ({ Handlebars, fs, root, views = [], extensions = [] }) => { } const template = fs.readFileSync(file, 'utf8'); + let html; + + if (filename.toLocaleLowerCase().endsWith('.md')) { + html = MarkdownFilter.apply(template); + } else { + // pass the original data into sub-sub partials + const data = + options.name === 'include' ? { ...options?.hash, ...options.data?.root } : { ...options, ...args?.data?.root }; - // pass the original data into sub-sub partials - const data = - options.name === 'include' ? { ...options?.hash, ...options.data?.root } : { ...options, ...args?.data?.root }; - const html = Handlebars.compile(template)(data); + html = Handlebars.compile(template)(data); + } return new Handlebars.SafeString(html); }; diff --git a/src/Loader/Preprocessors/Pug/Utils.js b/src/Loader/Preprocessors/Pug/Utils.js index c347efec..2b66449e 100644 --- a/src/Loader/Preprocessors/Pug/Utils.js +++ b/src/Loader/Preprocessors/Pug/Utils.js @@ -1,13 +1,10 @@ -const { red, green, yellow } = require('ansis'); +const { labelInfo, labelWarn, labelError } = require('../../Utils'); -const loaderName = 'pug-loader'; -const labelInfo = (label) => `\n${green`[${loaderName}${label ? ':' + label : ''}]`}`; -const labelWarn = (label) => `\n${yellow`[${loaderName}${label ? ':' + label : ''}]`}`; -const labelError = (label) => `\n${red`[${loaderName}${label ? ':' + label : ''}]`}`; +const loaderName = 'html-bundler:preprocessor:pug'; module.exports = { loaderName, - labelInfo, - labelWarn, - labelError, + labelInfo: (label) => labelInfo(loaderName, label), + labelWarn: (label) => labelWarn(loaderName, label), + labelError: (label) => labelError(loaderName, label), }; diff --git a/src/Loader/Preprocessors/Pug/filters/highlight.js b/src/Loader/Preprocessors/Pug/filters/highlight.js index 1a29ddaf..636fe553 100644 --- a/src/Loader/Preprocessors/Pug/filters/highlight.js +++ b/src/Loader/Preprocessors/Pug/filters/highlight.js @@ -8,93 +8,16 @@ * Home */ -// Add the filter `highlight` in the options of pug loader: -// { -// test: /\.pug$/, -// loader: '@webdiscus/pug-loader', -// options: { -// embedFilters: { -// highlight: { -// verbose: true, // output process info in console -// use: '` + adapter.highlight(text, lang) + '', // currently is supported the `prismjs` only -// }, -// }, -// }, -// }, +const highlight = require('../../../PreprocessorFilters/highlight'); -const { green, cyan } = require('ansis'); -const { labelError } = require('../Utils'); -const adapter = require('./highlight/adapter'); +class Filter { + static init(options) { + highlight.init(options); + } -const filterName = 'highlight'; -const filterLabelError = labelError(filterName); + static apply(content, options) { + return highlight.apply(content, options); + } +} -// for usage the `[]` chars in pug inline filter, the chars must be written as HTML entity -// e,g. the `#[:highlight(js) const arr = [1, 2];]` must be as `#[:highlight(js) const arr = [1, 2];]`, -// but for tokenize is needed to decode HTML entities in normal chars -const reservedChars = /[|]/g; -const charReplacements = { - '[': '[', - ']': ']', -}; - -/** - * Embedded filter highlight. - * @singleton - */ -const filter = { - name: filterName, - verbose: false, - - /** - * Initialize the filter. - * - * @param {boolean} verbose Display in console warnings and highlighting info. - * When a code is not highlighted enable it to show possible warnings by using not supported languages. - * @param {string} use The name of a using highlight npm module. The module must be installed. - * @public - * @api - */ - init({ verbose, use: moduleName }) { - if (adapter.isInitialized()) return; - - this.verbose = verbose === true; - - if (!moduleName || !adapter.isSupported(moduleName)) { - const error = - `\n${filterLabelError} In webpack config is used unsupported highlight module ${cyan(moduleName)}.\n` + - `Supported modules: ` + - green(adapter.getNamesOfSupportedModules().join(', ')) + - '.'; - throw new Error(error); - } - - adapter.init({ - verbose: this.verbose, - use: moduleName, - }); - }, - - /** - * Apply the filter. - * - * @param {string} text - * @param {{language: {string}, value: {any}}} options - * @returns {string} - * @public - * @api - */ - apply(text, options) { - let [language] = Object.keys(options); - - // if first item of options is `filename` then no language was defined in filter - language = language !== 'filename' ? language.toLowerCase() : null; - - // supports for `[]` chars in pug inline filter - text = text.replace(reservedChars, (str) => charReplacements[str]); - - return language ? adapter.highlight(text, language) : adapter.highlightAll(text); - }, -}; - -module.exports = filter; +module.exports = Filter; diff --git a/src/Loader/Preprocessors/Pug/filters/markdown.js b/src/Loader/Preprocessors/Pug/filters/markdown.js index a099d735..9a447814 100644 --- a/src/Loader/Preprocessors/Pug/filters/markdown.js +++ b/src/Loader/Preprocessors/Pug/filters/markdown.js @@ -1,101 +1,13 @@ -const { resolveModule } = require('../../../Utils'); -const { loadNodeModuleException } = require('../Exeptions'); -const adapter = require('./highlight/adapter'); +const markdown = require('../../../PreprocessorFilters/markdown'); -/** - * Embedded filter markdown. - * @singleton - */ -const markdown = { - name: 'markdown', - moduleName: 'markdown-it', - module: null, - langPrefix: '', +class Filter { + static init(options) { + markdown.init(options); + } - /** - * Initialize the filter. - * - * @param {boolean} verbose Display in console warnings and highlighting info. - * When a code is not highlighted enable it to show possible warnings by using not supported languages. - * @param {{use: string, verbose: boolean} | null} highlight The name of a using highlight npm module. The module must be installed. - * @param {string} langPrefix CSS language prefix for fenced blocks of code. Can be useful for external highlighters. - * Use this option only if used external highlighters on frontend, in browser. - * If the option {highlight: {use: '...'}} is used then langPrefix is ignored. - * @param {boolean} github Apply github syntax styles. - * @public - * @api - */ - init({ highlight, langPrefix, github }) { - // TODO: cache module by webpack compiler (pro config) - //if (this.module != null) return; + static apply(content) { + return markdown.apply(content); + } +} - const moduleFile = resolveModule(this.moduleName); - - if (!moduleFile) { - loadNodeModuleException(this.moduleName); - } - - const MarkdownIt = require(moduleFile); - - this.github = github === true; - - let options = { - // enable HTML tags in markdown source - html: true, - }; - - if (highlight != null && highlight.use) { - adapter.init({ - verbose: highlight.verbose === true, - use: highlight.use, - }); - - langPrefix = adapter.getLangPrefix(); - options.highlight = (text, lang) => { - return ` '; - }; - } else if (langPrefix) { - options.highlight = (text, lang) => { - return `` + adapter.highlight(text, lang) + ''; - }; - } - - this.module = new MarkdownIt(options); - }, - - /** - * Apply the filter. - * - * @param {string} content - * @returns {string} - * @public - * @api - */ - apply(content) { - if (this.github) { - content = this.applyGithubSyntax(content); - } - - return this.module.render(content); - }, - - /** - * Apply github syntax styles for Note, Warning. - * - * @param {string} content - * @return {string} - */ - applyGithubSyntax(content) { - const match = /(\*\*Note\*\*|\*\*Warning\*\*)/g; - const replacements = { - '**Note**': - 'Note', - '**Warning**': - 'Warning', - }; - - return content.replace(match, (value) => replacements[value]); - }, -}; - -module.exports = markdown; +module.exports = Filter; diff --git a/src/Loader/Utils.js b/src/Loader/Utils.js index 6e88a0d1..176f7d3e 100644 --- a/src/Loader/Utils.js +++ b/src/Loader/Utils.js @@ -1,10 +1,15 @@ const path = require('path'); +const { green, yellow, red } = require('ansis'); // constants used for imported styles in JavaScript const baseUri = 'webpack://'; const urlPathPrefix = '/__HTML_BUNDLER_PLUGIN__/'; const cssLoaderName = 'HTMLBundlerCSSLoader'; +const labelInfo = (loaderName, label) => `\n${green`[${loaderName}${label ? ':' + label : ''}]`}`; +const labelWarn = (loaderName, label) => `\n${yellow`[${loaderName}${label ? ':' + label : ''}]`}`; +const labelError = (loaderName, label) => `\n${red`[${loaderName}${label ? ':' + label : ''}]`}`; + /** * Resolve absolute path to node module main file what can be dynamically required anywhere in code. * @@ -201,6 +206,9 @@ module.exports = { baseUri, urlPathPrefix, cssLoaderName, + labelInfo, + labelWarn, + labelError, hotUpdateFile: path.join(__dirname, 'Hmr/hot-update.js'), resolveModule, eachAsync, diff --git a/src/Loader/config.js b/src/Loader/config.js index 95f6fc35..eafde9ec 100644 --- a/src/Loader/config.js +++ b/src/Loader/config.js @@ -1,4 +1,4 @@ -const loaderName = 'html-bundler-webpack-loader'; +const loaderName = 'html-bundler:preprocessor'; module.exports = { loaderName, diff --git a/test/cases/_preprocessor/ejs-include-md/expected/code.html b/test/cases/_preprocessor/ejs-include-md/expected/code.html new file mode 100644 index 00000000..37064d49 --- /dev/null +++ b/test/cases/_preprocessor/ejs-include-md/expected/code.html @@ -0,0 +1,30 @@ + + + +` + text + 'Code + + + + + + + + + +Highlighting code blocks
+Highlight
+Rubycode:+```ruby +require 'redcarpet' +markdown = Redcarpet.new("Hello World!") +puts markdown.to_html +``` +This will display the code block with syntax highlighting:
++ +require 'redcarpet' +markdown = Redcarpet.new("Hello World!") +puts markdown.to_html +-= FOOTER =-+ + diff --git a/test/cases/_preprocessor/ejs-include-md/expected/demo.html b/test/cases/_preprocessor/ejs-include-md/expected/demo.html new file mode 100644 index 00000000..6baa600e --- /dev/null +++ b/test/cases/_preprocessor/ejs-include-md/expected/demo.html @@ -0,0 +1,172 @@ + + + +Demo + + + + + + + + + +Markdown demo
+h1 Heading
+h2 Heading
+h3 Heading
+h4 Heading
+h5 Heading
+h6 Heading
+Horizontal Rule
+
++--- +Emphasis
+This is bold text
++**This is bold text** +This is italic text
++_This is italic text_ ++
Strikethrough+~~Strikethrough~~ +Blockquotes
+++Blockquotes can also be nested...
+++...by using additional greater-than signs right next to each other...
+++...or with spaces between arrows.
+GitHub Alerts
+Alerts are a Markdown extension based on the blockquote syntax.
+Five types of alerts are available:
++> [!NOTE] +> Useful information that users should know, even when skimming content. + +> [!TIP] +> Helpful advice for doing things better or more easily. + +> [!IMPORTANT] +> Key information users need to know to achieve their goal. + +> [!WARNING] +> Urgent info that needs immediate user attention to avoid problems. + +> [!CAUTION] +> Advises about risks or negative outcomes of certain actions. +Here are the rendered alerts:
++Note
+Useful information that users should know, even when skimming content.
++Tip
+Helpful advice for doing things better or more easily.
++Important
+Key information users need to know to achieve their goal.
++Warning
+Urgent info that needs immediate user attention to avoid problems.
++Caution
+Advises about risks or negative outcomes of certain actions.
+Lists
+Unordered
++
+- Create a list by starting a line with
++,-, or*- Sub-lists are made by indenting 2 spaces: +
++
+- Marker character change forces new list start: +
++
+- Ac tristique libero volutpat at
++
+- Facilisis in pretium nisl aliquet
++
+- Nulla volutpat aliquam velit
+- Very easy!
+Ordered
++
+- Lorem ipsum dolor sit amet
+- Consectetur adipiscing elit
+- Integer molestie lorem at massa
+Start numbering with offset:
++
+- foo
+- bar
+Code
+Inline
+codeIndented code
++// Some comments +line 1 of code +line 2 of code +line 3 of code +Block code "fences"
++Sample text here... +Syntax highlighting
++var foo = function (bar) { + return bar++; +}; + +console.log(foo(5)); +To display triple backticks in a fenced code block, wrap them inside quadruple backticks
++``` +Look! You can see my backticks. +``` +Tables
++ +
++ + + +Left-aligned +Center-aligned +Right-aligned ++ +git status +git status +git status ++ + +git diff +git diff +git diff +Links
+ ++[link with title](ttps://github.com/webdiscus "title text!") +Images
+External image URL
++ ++
Local image path using Webpack alias
++ ++ +
-= FOOTER =-+ + diff --git a/test/cases/_preprocessor/ejs-include-md/expected/img/plumber.6c89dfc3.webp b/test/cases/_preprocessor/ejs-include-md/expected/img/plumber.6c89dfc3.webp new file mode 100644 index 00000000..e4bf5a44 Binary files /dev/null and b/test/cases/_preprocessor/ejs-include-md/expected/img/plumber.6c89dfc3.webp differ diff --git a/test/cases/_preprocessor/ejs-include-md/expected/style.css b/test/cases/_preprocessor/ejs-include-md/expected/style.css new file mode 100644 index 00000000..da6914e6 --- /dev/null +++ b/test/cases/_preprocessor/ejs-include-md/expected/style.css @@ -0,0 +1,17 @@ +/* The container styles of your rendered Markdown */ + +.markdown-body { + box-sizing: border-box; + min-width: 200px; + max-width: 980px; + margin: 0 auto; + padding: 45px; +} + +@media (max-width: 767px) { + .markdown-body { + padding: 15px; + } +} + +/* GitHub Alerts */ diff --git a/test/cases/_preprocessor/ejs-include-md/src/footer.html b/test/cases/_preprocessor/ejs-include-md/src/footer.html new file mode 100644 index 00000000..b0b09e57 --- /dev/null +++ b/test/cases/_preprocessor/ejs-include-md/src/footer.html @@ -0,0 +1 @@ +<%= footerText %>\ No newline at end of file diff --git a/test/cases/_preprocessor/ejs-include-md/src/index.ejs b/test/cases/_preprocessor/ejs-include-md/src/index.ejs new file mode 100644 index 00000000..b152a97e --- /dev/null +++ b/test/cases/_preprocessor/ejs-include-md/src/index.ejs @@ -0,0 +1,17 @@ + + + +<%= title %> + + + + + + + + + + <%- include(markdownFile); %> + <%- include('./footer.html', {footerText: '-= FOOTER =-'}); %> + + diff --git a/test/cases/_preprocessor/ejs-include-md/src/markdown/code.md b/test/cases/_preprocessor/ejs-include-md/src/markdown/code.md new file mode 100644 index 00000000..8f099b6a --- /dev/null +++ b/test/cases/_preprocessor/ejs-include-md/src/markdown/code.md @@ -0,0 +1,17 @@ +# Highlighting code blocks + +Highlight `Ruby` code: +```` +```ruby +require 'redcarpet' +markdown = Redcarpet.new("Hello World!") +puts markdown.to_html +``` +```` + +This will display the code block with syntax highlighting: +```ruby +require 'redcarpet' +markdown = Redcarpet.new("Hello World!") +puts markdown.to_html +``` diff --git a/test/cases/_preprocessor/ejs-include-md/src/markdown/demo.md b/test/cases/_preprocessor/ejs-include-md/src/markdown/demo.md new file mode 100644 index 00000000..9bafc5f2 --- /dev/null +++ b/test/cases/_preprocessor/ejs-include-md/src/markdown/demo.md @@ -0,0 +1,171 @@ +# Markdown demo + +# h1 Heading +## h2 Heading +### h3 Heading +#### h4 Heading +##### h5 Heading +###### h6 Heading + + +## Horizontal Rule + +--- +``` +--- +``` + +## Emphasis + +**This is bold text** +``` +**This is bold text** +``` + +_This is italic text_ +``` +_This is italic text_ +``` + +~~Strikethrough~~ +``` +~~Strikethrough~~ +``` + + +## Blockquotes + +> Blockquotes can also be nested... +>> ...by using additional greater-than signs right next to each other... +> > > ...or with spaces between arrows. + +## GitHub Alerts + +Alerts are a Markdown extension based on the blockquote syntax. + +Five types of alerts are available: +``` +> [!NOTE] +> Useful information that users should know, even when skimming content. + +> [!TIP] +> Helpful advice for doing things better or more easily. + +> [!IMPORTANT] +> Key information users need to know to achieve their goal. + +> [!WARNING] +> Urgent info that needs immediate user attention to avoid problems. + +> [!CAUTION] +> Advises about risks or negative outcomes of certain actions. +``` + +Here are the rendered alerts: + +> [!NOTE] +> Useful information that users should know, even when skimming content. + +> [!TIP] +> Helpful advice for doing things better or more easily. + +> [!IMPORTANT] +> Key information users need to know to achieve their goal. + +> [!WARNING] +> Urgent info that needs immediate user attention to avoid problems. + +> [!CAUTION] +> Advises about risks or negative outcomes of certain actions. + +## Lists + +Unordered + ++ Create a list by starting a line with `+`, `-`, or `*` ++ Sub-lists are made by indenting 2 spaces: + - Marker character change forces new list start: + * Ac tristique libero volutpat at + + Facilisis in pretium nisl aliquet + - Nulla volutpat aliquam velit ++ Very easy! + +Ordered + +1. Lorem ipsum dolor sit amet +2. Consectetur adipiscing elit +3. Integer molestie lorem at massa + +Start numbering with offset: + +57. foo +1. bar + + +## Code + +Inline `code` + +Indented code + + // Some comments + line 1 of code + line 2 of code + line 3 of code + + +Block code "fences" + +``` +Sample text here... +``` + +Syntax highlighting + +```js +var foo = function (bar) { + return bar++; +}; + +console.log(foo(5)); +``` + +To display triple backticks in a fenced code block, wrap them inside quadruple backticks +```` +``` +Look! You can see my backticks. +``` +```` + +## Tables + +| Left-aligned | Center-aligned | Right-aligned | +| :--- | :---: | ---: | +| git status | git status | git status | +| git diff | git diff | git diff | + +## Links + +[link with title](ttps://github.com/webdiscus "title text!") + +```md +[link with title](ttps://github.com/webdiscus "title text!") +``` + + +## Images + +External image URL + +```md + +``` + + +Local image path using Webpack alias + +```md + +``` + + diff --git a/test/cases/_preprocessor/ejs-include-md/src/style.css b/test/cases/_preprocessor/ejs-include-md/src/style.css new file mode 100644 index 00000000..da6914e6 --- /dev/null +++ b/test/cases/_preprocessor/ejs-include-md/src/style.css @@ -0,0 +1,17 @@ +/* The container styles of your rendered Markdown */ + +.markdown-body { + box-sizing: border-box; + min-width: 200px; + max-width: 980px; + margin: 0 auto; + padding: 45px; +} + +@media (max-width: 767px) { + .markdown-body { + padding: 15px; + } +} + +/* GitHub Alerts */ diff --git a/test/cases/_preprocessor/ejs-include-md/webpack.config.js b/test/cases/_preprocessor/ejs-include-md/webpack.config.js new file mode 100644 index 00000000..97cf0699 --- /dev/null +++ b/test/cases/_preprocessor/ejs-include-md/webpack.config.js @@ -0,0 +1,56 @@ +const path = require('path'); +const HtmlBundlerPlugin = require('@test/html-bundler-webpack-plugin'); + +module.exports = { + mode: 'production', + + output: { + path: path.join(__dirname, 'dist/'), + }, + + resolve: { + alias: { + '@images': path.join(__dirname, '../../../fixtures/images'), + }, + }, + + plugins: [ + new HtmlBundlerPlugin({ + entry: [ + { + import: 'src/index.ejs', + filename: 'demo.html', + data: { + title: 'Demo', + markdownFile: '/src/markdown/demo.md', // path relative to project directory + }, + }, + { + import: 'src/index.ejs', + filename: 'code.html', + data: { + title: 'Code', + markdownFile: '/src/markdown/code.md', // path relative to project directory + }, + }, + ], + preprocessor: 'ejs', + }), + ], + + module: { + rules: [ + { + test: /\.css$/, + use: ['css-loader'], + }, + { + test: /\.(png|svg|jpe?g|webp)$/i, + type: 'asset/resource', + generator: { + filename: 'img/[name].[hash:8][ext]', + }, + }, + ], + }, +}; diff --git a/test/cases/_preprocessor/eta-include-md/expected/code.html b/test/cases/_preprocessor/eta-include-md/expected/code.html new file mode 100644 index 00000000..e294b092 --- /dev/null +++ b/test/cases/_preprocessor/eta-include-md/expected/code.html @@ -0,0 +1,28 @@ + + + +Code + + + + + + + + + +Highlighting code blocks
+Highlight
+Rubycode:+```ruby +require 'redcarpet' +markdown = Redcarpet.new("Hello World!") +puts markdown.to_html +``` +This will display the code block with syntax highlighting:
++require 'redcarpet' +markdown = Redcarpet.new("Hello World!") +puts markdown.to_html +-= FOOTER =-+ \ No newline at end of file diff --git a/test/cases/_preprocessor/eta-include-md/expected/demo.html b/test/cases/_preprocessor/eta-include-md/expected/demo.html new file mode 100644 index 00000000..4e7b9963 --- /dev/null +++ b/test/cases/_preprocessor/eta-include-md/expected/demo.html @@ -0,0 +1,170 @@ + + + +Demo + + + + + + + + + +Markdown demo
+h1 Heading
+h2 Heading
+h3 Heading
+h4 Heading
+h5 Heading
+h6 Heading
+Horizontal Rule
+
++--- +Emphasis
+This is bold text
++**This is bold text** +This is italic text
++_This is italic text_ ++
Strikethrough+~~Strikethrough~~ +Blockquotes
+++Blockquotes can also be nested...
+++...by using additional greater-than signs right next to each other...
+++...or with spaces between arrows.
+GitHub Alerts
+Alerts are a Markdown extension based on the blockquote syntax.
+Five types of alerts are available:
++> [!NOTE] +> Useful information that users should know, even when skimming content. + +> [!TIP] +> Helpful advice for doing things better or more easily. + +> [!IMPORTANT] +> Key information users need to know to achieve their goal. + +> [!WARNING] +> Urgent info that needs immediate user attention to avoid problems. + +> [!CAUTION] +> Advises about risks or negative outcomes of certain actions. +Here are the rendered alerts:
++Note
+Useful information that users should know, even when skimming content.
++Tip
+Helpful advice for doing things better or more easily.
++Important
+Key information users need to know to achieve their goal.
++Warning
+Urgent info that needs immediate user attention to avoid problems.
++Caution
+Advises about risks or negative outcomes of certain actions.
+Lists
+Unordered
++
+- Create a list by starting a line with
++,-, or*- Sub-lists are made by indenting 2 spaces: +
++
+- Marker character change forces new list start: +
++
+- Ac tristique libero volutpat at
++
+- Facilisis in pretium nisl aliquet
++
+- Nulla volutpat aliquam velit
+- Very easy!
+Ordered
++
+- Lorem ipsum dolor sit amet
+- Consectetur adipiscing elit
+- Integer molestie lorem at massa
+Start numbering with offset:
++
+- foo
+- bar
+Code
+Inline
+codeIndented code
++// Some comments +line 1 of code +line 2 of code +line 3 of code +Block code "fences"
++Sample text here... +Syntax highlighting
++var foo = function (bar) { + return bar++; +}; + +console.log(foo(5)); +To display triple backticks in a fenced code block, wrap them inside quadruple backticks
++``` +Look! You can see my backticks. +``` +Tables
++ +
++ + + +Left-aligned +Center-aligned +Right-aligned ++ +git status +git status +git status ++ + +git diff +git diff +git diff +Links
+ ++[link with title](ttps://github.com/webdiscus "title text!") +Images
+External image URL
++ ++
Local image path using Webpack alias
++ ++
-= FOOTER =-+ \ No newline at end of file diff --git a/test/cases/_preprocessor/eta-include-md/expected/img/plumber.6c89dfc3.webp b/test/cases/_preprocessor/eta-include-md/expected/img/plumber.6c89dfc3.webp new file mode 100644 index 00000000..e4bf5a44 Binary files /dev/null and b/test/cases/_preprocessor/eta-include-md/expected/img/plumber.6c89dfc3.webp differ diff --git a/test/cases/_preprocessor/eta-include-md/expected/style.css b/test/cases/_preprocessor/eta-include-md/expected/style.css new file mode 100644 index 00000000..da6914e6 --- /dev/null +++ b/test/cases/_preprocessor/eta-include-md/expected/style.css @@ -0,0 +1,17 @@ +/* The container styles of your rendered Markdown */ + +.markdown-body { + box-sizing: border-box; + min-width: 200px; + max-width: 980px; + margin: 0 auto; + padding: 45px; +} + +@media (max-width: 767px) { + .markdown-body { + padding: 15px; + } +} + +/* GitHub Alerts */ diff --git a/test/cases/_preprocessor/eta-include-md/src/footer.html b/test/cases/_preprocessor/eta-include-md/src/footer.html new file mode 100644 index 00000000..b0b09e57 --- /dev/null +++ b/test/cases/_preprocessor/eta-include-md/src/footer.html @@ -0,0 +1 @@ +<%= footerText %>\ No newline at end of file diff --git a/test/cases/_preprocessor/eta-include-md/src/index.html b/test/cases/_preprocessor/eta-include-md/src/index.html new file mode 100644 index 00000000..e68ae3a7 --- /dev/null +++ b/test/cases/_preprocessor/eta-include-md/src/index.html @@ -0,0 +1,17 @@ + + + +<%= title %> + + + + + + + + + + <%~ include(markdownFile); %> + <%~ include('/src/footer.html', {footerText: '-= FOOTER =-'}); %> + + \ No newline at end of file diff --git a/test/cases/_preprocessor/eta-include-md/src/markdown/code.md b/test/cases/_preprocessor/eta-include-md/src/markdown/code.md new file mode 100644 index 00000000..8f099b6a --- /dev/null +++ b/test/cases/_preprocessor/eta-include-md/src/markdown/code.md @@ -0,0 +1,17 @@ +# Highlighting code blocks + +Highlight `Ruby` code: +```` +```ruby +require 'redcarpet' +markdown = Redcarpet.new("Hello World!") +puts markdown.to_html +``` +```` + +This will display the code block with syntax highlighting: +```ruby +require 'redcarpet' +markdown = Redcarpet.new("Hello World!") +puts markdown.to_html +``` diff --git a/test/cases/_preprocessor/eta-include-md/src/markdown/demo.md b/test/cases/_preprocessor/eta-include-md/src/markdown/demo.md new file mode 100644 index 00000000..9bafc5f2 --- /dev/null +++ b/test/cases/_preprocessor/eta-include-md/src/markdown/demo.md @@ -0,0 +1,171 @@ +# Markdown demo + +# h1 Heading +## h2 Heading +### h3 Heading +#### h4 Heading +##### h5 Heading +###### h6 Heading + + +## Horizontal Rule + +--- +``` +--- +``` + +## Emphasis + +**This is bold text** +``` +**This is bold text** +``` + +_This is italic text_ +``` +_This is italic text_ +``` + +~~Strikethrough~~ +``` +~~Strikethrough~~ +``` + + +## Blockquotes + +> Blockquotes can also be nested... +>> ...by using additional greater-than signs right next to each other... +> > > ...or with spaces between arrows. + +## GitHub Alerts + +Alerts are a Markdown extension based on the blockquote syntax. + +Five types of alerts are available: +``` +> [!NOTE] +> Useful information that users should know, even when skimming content. + +> [!TIP] +> Helpful advice for doing things better or more easily. + +> [!IMPORTANT] +> Key information users need to know to achieve their goal. + +> [!WARNING] +> Urgent info that needs immediate user attention to avoid problems. + +> [!CAUTION] +> Advises about risks or negative outcomes of certain actions. +``` + +Here are the rendered alerts: + +> [!NOTE] +> Useful information that users should know, even when skimming content. + +> [!TIP] +> Helpful advice for doing things better or more easily. + +> [!IMPORTANT] +> Key information users need to know to achieve their goal. + +> [!WARNING] +> Urgent info that needs immediate user attention to avoid problems. + +> [!CAUTION] +> Advises about risks or negative outcomes of certain actions. + +## Lists + +Unordered + ++ Create a list by starting a line with `+`, `-`, or `*` ++ Sub-lists are made by indenting 2 spaces: + - Marker character change forces new list start: + * Ac tristique libero volutpat at + + Facilisis in pretium nisl aliquet + - Nulla volutpat aliquam velit ++ Very easy! + +Ordered + +1. Lorem ipsum dolor sit amet +2. Consectetur adipiscing elit +3. Integer molestie lorem at massa + +Start numbering with offset: + +57. foo +1. bar + + +## Code + +Inline `code` + +Indented code + + // Some comments + line 1 of code + line 2 of code + line 3 of code + + +Block code "fences" + +``` +Sample text here... +``` + +Syntax highlighting + +```js +var foo = function (bar) { + return bar++; +}; + +console.log(foo(5)); +``` + +To display triple backticks in a fenced code block, wrap them inside quadruple backticks +```` +``` +Look! You can see my backticks. +``` +```` + +## Tables + +| Left-aligned | Center-aligned | Right-aligned | +| :--- | :---: | ---: | +| git status | git status | git status | +| git diff | git diff | git diff | + +## Links + +[link with title](ttps://github.com/webdiscus "title text!") + +```md +[link with title](ttps://github.com/webdiscus "title text!") +``` + + +## Images + +External image URL + +```md + +``` + + +Local image path using Webpack alias + +```md + +``` + + diff --git a/test/cases/_preprocessor/eta-include-md/src/style.css b/test/cases/_preprocessor/eta-include-md/src/style.css new file mode 100644 index 00000000..da6914e6 --- /dev/null +++ b/test/cases/_preprocessor/eta-include-md/src/style.css @@ -0,0 +1,17 @@ +/* The container styles of your rendered Markdown */ + +.markdown-body { + box-sizing: border-box; + min-width: 200px; + max-width: 980px; + margin: 0 auto; + padding: 45px; +} + +@media (max-width: 767px) { + .markdown-body { + padding: 15px; + } +} + +/* GitHub Alerts */ diff --git a/test/cases/_preprocessor/eta-include-md/webpack.config.js b/test/cases/_preprocessor/eta-include-md/webpack.config.js new file mode 100644 index 00000000..d072c222 --- /dev/null +++ b/test/cases/_preprocessor/eta-include-md/webpack.config.js @@ -0,0 +1,55 @@ +const path = require('path'); +const HtmlBundlerPlugin = require('@test/html-bundler-webpack-plugin'); + +module.exports = { + mode: 'production', + + output: { + path: path.join(__dirname, 'dist/'), + }, + + resolve: { + alias: { + '@images': path.join(__dirname, '../../../fixtures/images'), + }, + }, + + plugins: [ + new HtmlBundlerPlugin({ + entry: [ + { + import: 'src/index.html', + filename: 'demo.html', + data: { + title: 'Demo', + markdownFile: 'src/markdown/demo.md', // path relative to project directory + }, + }, + { + import: 'src/index.html', + filename: 'code.html', + data: { + title: 'Code', + markdownFile: 'src/markdown/code.md', // path relative to project directory + }, + }, + ], + }), + ], + + module: { + rules: [ + { + test: /\.css$/, + use: ['css-loader'], + }, + { + test: /\.(png|svg|jpe?g|webp)$/i, + type: 'asset/resource', + generator: { + filename: 'img/[name].[hash:8][ext]', + }, + }, + ], + }, +}; diff --git a/test/cases/_preprocessor/handlebars-include-md/expected/code.html b/test/cases/_preprocessor/handlebars-include-md/expected/code.html new file mode 100644 index 00000000..d85e19bf --- /dev/null +++ b/test/cases/_preprocessor/handlebars-include-md/expected/code.html @@ -0,0 +1,29 @@ + + + +Code + + + + + + + + + +Highlighting code blocks
+Highlight
+Rubycode:+```ruby +require 'redcarpet' +markdown = Redcarpet.new("Hello World!") +puts markdown.to_html +``` +This will display the code block with syntax highlighting:
++ + + diff --git a/test/cases/_preprocessor/handlebars-include-md/expected/demo.html b/test/cases/_preprocessor/handlebars-include-md/expected/demo.html new file mode 100644 index 00000000..9c691e98 --- /dev/null +++ b/test/cases/_preprocessor/handlebars-include-md/expected/demo.html @@ -0,0 +1,171 @@ + + + +require 'redcarpet' +markdown = Redcarpet.new("Hello World!") +puts markdown.to_html +Demo + + + + + + + + + +Markdown demo
+h1 Heading
+h2 Heading
+h3 Heading
+h4 Heading
+h5 Heading
+h6 Heading
+Horizontal Rule
+
++--- +Emphasis
+This is bold text
++**This is bold text** +This is italic text
++_This is italic text_ ++
Strikethrough+~~Strikethrough~~ +Blockquotes
+++Blockquotes can also be nested...
+++...by using additional greater-than signs right next to each other...
+++...or with spaces between arrows.
+GitHub Alerts
+Alerts are a Markdown extension based on the blockquote syntax.
+Five types of alerts are available:
++> [!NOTE] +> Useful information that users should know, even when skimming content. + +> [!TIP] +> Helpful advice for doing things better or more easily. + +> [!IMPORTANT] +> Key information users need to know to achieve their goal. + +> [!WARNING] +> Urgent info that needs immediate user attention to avoid problems. + +> [!CAUTION] +> Advises about risks or negative outcomes of certain actions. +Here are the rendered alerts:
++Note
+Useful information that users should know, even when skimming content.
++Tip
+Helpful advice for doing things better or more easily.
++Important
+Key information users need to know to achieve their goal.
++Warning
+Urgent info that needs immediate user attention to avoid problems.
++Caution
+Advises about risks or negative outcomes of certain actions.
+Lists
+Unordered
++
+- Create a list by starting a line with
++,-, or*- Sub-lists are made by indenting 2 spaces: +
++
+- Marker character change forces new list start: +
++
+- Ac tristique libero volutpat at
++
+- Facilisis in pretium nisl aliquet
++
+- Nulla volutpat aliquam velit
+- Very easy!
+Ordered
++
+- Lorem ipsum dolor sit amet
+- Consectetur adipiscing elit
+- Integer molestie lorem at massa
+Start numbering with offset:
++
+- foo
+- bar
+Code
+Inline
+codeIndented code
++// Some comments +line 1 of code +line 2 of code +line 3 of code +Block code "fences"
++Sample text here... +Syntax highlighting
++var foo = function (bar) { + return bar++; +}; + +console.log(foo(5)); +To display triple backticks in a fenced code block, wrap them inside quadruple backticks
++``` +Look! You can see my backticks. +``` +Tables
++ +
++ + + +Left-aligned +Center-aligned +Right-aligned ++ +git status +git status +git status ++ + +git diff +git diff +git diff +Links
+ ++[link with title](ttps://github.com/webdiscus "title text!") +Images
+External image URL
++ ++
Local image path using Webpack alias
++ ++ + + diff --git a/test/cases/_preprocessor/handlebars-include-md/expected/img/plumber.6c89dfc3.webp b/test/cases/_preprocessor/handlebars-include-md/expected/img/plumber.6c89dfc3.webp new file mode 100644 index 00000000..e4bf5a44 Binary files /dev/null and b/test/cases/_preprocessor/handlebars-include-md/expected/img/plumber.6c89dfc3.webp differ diff --git a/test/cases/_preprocessor/handlebars-include-md/expected/style.css b/test/cases/_preprocessor/handlebars-include-md/expected/style.css new file mode 100644 index 00000000..da6914e6 --- /dev/null +++ b/test/cases/_preprocessor/handlebars-include-md/expected/style.css @@ -0,0 +1,17 @@ +/* The container styles of your rendered Markdown */ + +.markdown-body { + box-sizing: border-box; + min-width: 200px; + max-width: 980px; + margin: 0 auto; + padding: 45px; +} + +@media (max-width: 767px) { + .markdown-body { + padding: 15px; + } +} + +/* GitHub Alerts */ diff --git a/test/cases/_preprocessor/handlebars-include-md/src/index.hbs b/test/cases/_preprocessor/handlebars-include-md/src/index.hbs new file mode 100644 index 00000000..027c1986 --- /dev/null +++ b/test/cases/_preprocessor/handlebars-include-md/src/index.hbs @@ -0,0 +1,16 @@ + + + +
{{title}} + + + + + + + + + + {{ include markdownFile }} + + diff --git a/test/cases/_preprocessor/handlebars-include-md/src/markdown/code.md b/test/cases/_preprocessor/handlebars-include-md/src/markdown/code.md new file mode 100644 index 00000000..8f099b6a --- /dev/null +++ b/test/cases/_preprocessor/handlebars-include-md/src/markdown/code.md @@ -0,0 +1,17 @@ +# Highlighting code blocks + +Highlight `Ruby` code: +```` +```ruby +require 'redcarpet' +markdown = Redcarpet.new("Hello World!") +puts markdown.to_html +``` +```` + +This will display the code block with syntax highlighting: +```ruby +require 'redcarpet' +markdown = Redcarpet.new("Hello World!") +puts markdown.to_html +``` diff --git a/test/cases/_preprocessor/handlebars-include-md/src/markdown/demo.md b/test/cases/_preprocessor/handlebars-include-md/src/markdown/demo.md new file mode 100644 index 00000000..9bafc5f2 --- /dev/null +++ b/test/cases/_preprocessor/handlebars-include-md/src/markdown/demo.md @@ -0,0 +1,171 @@ +# Markdown demo + +# h1 Heading +## h2 Heading +### h3 Heading +#### h4 Heading +##### h5 Heading +###### h6 Heading + + +## Horizontal Rule + +--- +``` +--- +``` + +## Emphasis + +**This is bold text** +``` +**This is bold text** +``` + +_This is italic text_ +``` +_This is italic text_ +``` + +~~Strikethrough~~ +``` +~~Strikethrough~~ +``` + + +## Blockquotes + +> Blockquotes can also be nested... +>> ...by using additional greater-than signs right next to each other... +> > > ...or with spaces between arrows. + +## GitHub Alerts + +Alerts are a Markdown extension based on the blockquote syntax. + +Five types of alerts are available: +``` +> [!NOTE] +> Useful information that users should know, even when skimming content. + +> [!TIP] +> Helpful advice for doing things better or more easily. + +> [!IMPORTANT] +> Key information users need to know to achieve their goal. + +> [!WARNING] +> Urgent info that needs immediate user attention to avoid problems. + +> [!CAUTION] +> Advises about risks or negative outcomes of certain actions. +``` + +Here are the rendered alerts: + +> [!NOTE] +> Useful information that users should know, even when skimming content. + +> [!TIP] +> Helpful advice for doing things better or more easily. + +> [!IMPORTANT] +> Key information users need to know to achieve their goal. + +> [!WARNING] +> Urgent info that needs immediate user attention to avoid problems. + +> [!CAUTION] +> Advises about risks or negative outcomes of certain actions. + +## Lists + +Unordered + ++ Create a list by starting a line with `+`, `-`, or `*` ++ Sub-lists are made by indenting 2 spaces: + - Marker character change forces new list start: + * Ac tristique libero volutpat at + + Facilisis in pretium nisl aliquet + - Nulla volutpat aliquam velit ++ Very easy! + +Ordered + +1. Lorem ipsum dolor sit amet +2. Consectetur adipiscing elit +3. Integer molestie lorem at massa + +Start numbering with offset: + +57. foo +1. bar + + +## Code + +Inline `code` + +Indented code + + // Some comments + line 1 of code + line 2 of code + line 3 of code + + +Block code "fences" + +``` +Sample text here... +``` + +Syntax highlighting + +```js +var foo = function (bar) { + return bar++; +}; + +console.log(foo(5)); +``` + +To display triple backticks in a fenced code block, wrap them inside quadruple backticks +```` +``` +Look! You can see my backticks. +``` +```` + +## Tables + +| Left-aligned | Center-aligned | Right-aligned | +| :--- | :---: | ---: | +| git status | git status | git status | +| git diff | git diff | git diff | + +## Links + +[link with title](ttps://github.com/webdiscus "title text!") + +```md +[link with title](ttps://github.com/webdiscus "title text!") +``` + + +## Images + +External image URL + +```md + +``` + + +Local image path using Webpack alias + +```md + +``` + + diff --git a/test/cases/_preprocessor/handlebars-include-md/src/style.css b/test/cases/_preprocessor/handlebars-include-md/src/style.css new file mode 100644 index 00000000..da6914e6 --- /dev/null +++ b/test/cases/_preprocessor/handlebars-include-md/src/style.css @@ -0,0 +1,17 @@ +/* The container styles of your rendered Markdown */ + +.markdown-body { + box-sizing: border-box; + min-width: 200px; + max-width: 980px; + margin: 0 auto; + padding: 45px; +} + +@media (max-width: 767px) { + .markdown-body { + padding: 15px; + } +} + +/* GitHub Alerts */ diff --git a/test/cases/_preprocessor/handlebars-include-md/webpack.config.js b/test/cases/_preprocessor/handlebars-include-md/webpack.config.js new file mode 100644 index 00000000..6a4d66a2 --- /dev/null +++ b/test/cases/_preprocessor/handlebars-include-md/webpack.config.js @@ -0,0 +1,63 @@ +const path = require('path'); +const HtmlBundlerPlugin = require('@test/html-bundler-webpack-plugin'); + +module.exports = { + mode: 'production', + + output: { + path: path.join(__dirname, 'dist/'), + clean: true, + }, + + resolve: { + alias: { + '@images': path.join(__dirname, '../../../fixtures/images'), + }, + }, + + plugins: [ + new HtmlBundlerPlugin({ + entry: [ + { + import: './src/index.hbs', + filename: 'demo.html', + data: { + title: 'Demo', + markdownFile: 'demo.md', // file relative to directory defined in `preprocessorOptions.views` option + }, + }, + { + import: './src/index.hbs', + filename: 'code.html', + data: { + title: 'Code', + markdownFile: path.join(__dirname, 'src/markdown/code.md'), // absolute file + }, + }, + ], + preprocessor: 'handlebars', + preprocessorOptions: { + views: [ + // path to the directory where *.md files will be searched + path.join(__dirname, 'src/markdown/'), + ], + }, + }), + ], + + module: { + rules: [ + { + test: /\.css$/, + use: ['css-loader'], + }, + { + test: /\.(png|svg|jpe?g|webp)$/i, + type: 'asset/resource', + generator: { + filename: 'img/[name].[hash:8][ext]', + }, + }, + ], + }, +}; diff --git a/test/cases/_pug/filter-highlight/webpack.config.js b/test/cases/_pug/filter-highlight/webpack.config.js index 181f4045..817d58de 100644 --- a/test/cases/_pug/filter-highlight/webpack.config.js +++ b/test/cases/_pug/filter-highlight/webpack.config.js @@ -18,8 +18,15 @@ module.exports = { preprocessorOptions: { embedFilters: { highlight: { - verbose: true, - use: 'prismjs', + //use: 'prismjs', + use: { + // the name of a using highlight npm module. + module: 'prismjs', + options: { + // display in console warnings and loaded dependencies + verbose: true, + }, + }, }, }, }, diff --git a/test/cases/_pug/filter-markdown/expected/output1/index.html b/test/cases/_pug/filter-markdown/expected/output1/index.html index 5d8e278c..cb5b290e 100644 --- a/test/cases/_pug/filter-markdown/expected/output1/index.html +++ b/test/cases/_pug/filter-markdown/expected/output1/index.html @@ -1,4 +1,4 @@ -Hello World!
+Hello World!
bold italic
@@ -11,19 +11,42 @@
Subtitle
The markdown text.
Use highlighting
HTML
---+Paragraph
-<!-- Comment --> +<div class="container"> + <p>Paragraph</p> +</div>JavaScript
-const arr = [1, 2, 'banana']; ++const arr = [1, 2, 'banana'];Ruby
++require 'redcarpet' +markdown = Redcarpet.new("Hello World!") +puts markdown.to_html +Blockquote
-Note -GitHub Note
+Note
+Useful information that users should know, even when skimming content.
-+Warning -GitHub Warning
+Warning
+Urgent info that needs immediate user attention to avoid problems.
+GitHub Alerts
++Note
+Useful information that users should know, even when skimming content.
++Tip
+Helpful advice for doing things better or more easily.
++Important
+Key information users need to know to achieve their goal.
++Warning
+Urgent info that needs immediate user attention to avoid problems.
++ \ No newline at end of file diff --git a/test/cases/_pug/filter-markdown/expected/output2/index.html b/test/cases/_pug/filter-markdown/expected/output2/index.html index 13de8e76..b2bbfa98 100644 --- a/test/cases/_pug/filter-markdown/expected/output2/index.html +++ b/test/cases/_pug/filter-markdown/expected/output2/index.html @@ -1,4 +1,4 @@ -Caution
+Advises about risks or negative outcomes of certain actions.
Hello World!
+Hello World!
bold italic
@@ -19,11 +19,34 @@
Use highlighting
JavaScript
+const arr = [1, 2, 'banana'];Ruby
++require 'redcarpet' +markdown = Redcarpet.new("Hello World!") +puts markdown.to_html +Blockquote
-Note -GitHub Note
+Note
+Useful information that users should know, even when skimming content.
-+Warning -GitHub Warning
+Warning
+Urgent info that needs immediate user attention to avoid problems.
+GitHub Alerts
++Note
+Useful information that users should know, even when skimming content.
++Tip
+Helpful advice for doing things better or more easily.
++Important
+Key information users need to know to achieve their goal.
++Warning
+Urgent info that needs immediate user attention to avoid problems.
++ \ No newline at end of file diff --git a/test/cases/_pug/filter-markdown/src/index.pug b/test/cases/_pug/filter-markdown/src/index.pug index 66c4aea0..53973661 100644 --- a/test/cases/_pug/filter-markdown/src/index.pug +++ b/test/cases/_pug/filter-markdown/src/index.pug @@ -1,12 +1,17 @@ -:markdown - # Hello World! - **bold** - _italic_ +html + head + link(href="https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/themes/prism.min.css" rel="stylesheet") + link(href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.8.1/github-markdown.min.css" rel="stylesheet") + body.markdown-body(style = "padding: 24pt") + :markdown + # Hello World! + **bold** + _italic_ - * one _thing_ has *em*phasis - * two __things__ are **bold** - * [link][1] + * one _thing_ has *em*phasis + * two __things__ are **bold** + * [link][1] - [1]: http://example.com + [1]: http://example.com -include:markdown readme.md + include:markdown readme.md diff --git a/test/cases/_pug/filter-markdown/src/readme.md b/test/cases/_pug/filter-markdown/src/readme.md index d6579ff5..c2456046 100644 --- a/test/cases/_pug/filter-markdown/src/readme.md +++ b/test/cases/_pug/filter-markdown/src/readme.md @@ -17,8 +17,37 @@ _JavaScript_ ```js const arr = [1, 2, 'banana']; ``` + +_Ruby_ +```ruby +require 'redcarpet' +markdown = Redcarpet.new("Hello World!") +puts markdown.to_html +``` + +## Blockquote + > **Note** -> GitHub Note +> +> Useful information that users should know, even when skimming content. > **Warning** -> GitHub Warning +> +> Urgent info that needs immediate user attention to avoid problems. + +## GitHub Alerts + +> [!NOTE] +> Useful information that users should know, even when skimming content. + +> [!TIP] +> Helpful advice for doing things better or more easily. + +> [!IMPORTANT] +> Key information users need to know to achieve their goal. + +> [!WARNING] +> Urgent info that needs immediate user attention to avoid problems. + +> [!CAUTION] +> Advises about risks or negative outcomes of certain actions. diff --git a/test/cases/_pug/filter-markdown/webpack.config.js b/test/cases/_pug/filter-markdown/webpack.config.js index 0af61930..6fdc3cbc 100644 --- a/test/cases/_pug/filter-markdown/webpack.config.js +++ b/test/cases/_pug/filter-markdown/webpack.config.js @@ -20,10 +20,9 @@ module.exports = [ // enable `:markdown` filter with additional options embedFilters: { markdown: { - // use css classname prefix for highlighting - langPrefix: 'lang-', - // don't use github syntax styles - github: false, + highlight: { + use: null, + }, }, }, }, @@ -49,15 +48,15 @@ module.exports = [ // enable `:markdown` filter with additional options embedFilters: { markdown: { - // use css classname prefix for highlighting - langPrefix: 'language-', - // enable highlighting in markdown + // TODO: change options in readme highlight: { - verbose: true, - use: 'prismjs', + use: { + module: 'prismjs', + options: { + verbose: true, + }, + }, }, - // use github syntax styles - github: true, }, }, }, diff --git a/test/cases/_pug/msg-exception-filter-highlight-unsupported-module/webpack.config.js b/test/cases/_pug/msg-exception-filter-highlight-unsupported-module/webpack.config.js index 2c21119d..3e021a4b 100644 --- a/test/cases/_pug/msg-exception-filter-highlight-unsupported-module/webpack.config.js +++ b/test/cases/_pug/msg-exception-filter-highlight-unsupported-module/webpack.config.js @@ -19,7 +19,15 @@ module.exports = { preprocessorOptions: { embedFilters: { highlight: { - use: 'unsupported-module', + //use: 'unsupported-module', + use: { + // the name of a using highlight npm module. + module: 'unsupported-module', + options: { + // display in console warnings and loaded dependencies + verbose: true, + }, + }, }, }, }, diff --git a/test/fixtures/images/octocats/baracktocat.webp b/test/fixtures/images/octocats/baracktocat.webp new file mode 100644 index 00000000..5cf8abe7 Binary files /dev/null and b/test/fixtures/images/octocats/baracktocat.webp differ diff --git a/test/fixtures/images/octocats/constructocat2.webp b/test/fixtures/images/octocats/constructocat2.webp new file mode 100644 index 00000000..2fa9ad7b Binary files /dev/null and b/test/fixtures/images/octocats/constructocat2.webp differ diff --git a/test/fixtures/images/octocats/filmtocat.png b/test/fixtures/images/octocats/filmtocat.png new file mode 100644 index 00000000..77d33f0f Binary files /dev/null and b/test/fixtures/images/octocats/filmtocat.png differ diff --git a/test/fixtures/images/octocats/hubot.webp b/test/fixtures/images/octocats/hubot.webp new file mode 100644 index 00000000..2a01bb4e Binary files /dev/null and b/test/fixtures/images/octocats/hubot.webp differ diff --git a/test/fixtures/images/octocats/inspectocat.webp b/test/fixtures/images/octocats/inspectocat.webp new file mode 100644 index 00000000..f76f1522 Binary files /dev/null and b/test/fixtures/images/octocats/inspectocat.webp differ diff --git a/test/fixtures/images/octocats/labtocat.webp b/test/fixtures/images/octocats/labtocat.webp new file mode 100644 index 00000000..38fe841d Binary files /dev/null and b/test/fixtures/images/octocats/labtocat.webp differ diff --git a/test/fixtures/images/octocats/megacat.webp b/test/fixtures/images/octocats/megacat.webp new file mode 100644 index 00000000..0dd23798 Binary files /dev/null and b/test/fixtures/images/octocats/megacat.webp differ diff --git a/test/fixtures/images/octocats/original.png b/test/fixtures/images/octocats/original.png new file mode 100644 index 00000000..c86113fe Binary files /dev/null and b/test/fixtures/images/octocats/original.png differ diff --git a/test/fixtures/images/octocats/plumber.webp b/test/fixtures/images/octocats/plumber.webp new file mode 100644 index 00000000..e4bf5a44 Binary files /dev/null and b/test/fixtures/images/octocats/plumber.webp differ diff --git a/test/fixtures/images/octocats/robotocat.webp b/test/fixtures/images/octocats/robotocat.webp new file mode 100644 index 00000000..13ca7e5d Binary files /dev/null and b/test/fixtures/images/octocats/robotocat.webp differ diff --git a/test/fixtures/images/octocats/setuptocat.webp b/test/fixtures/images/octocats/setuptocat.webp new file mode 100644 index 00000000..3bdcb492 Binary files /dev/null and b/test/fixtures/images/octocats/setuptocat.webp differ diff --git a/test/fixtures/images/octocats/socialite.webp b/test/fixtures/images/octocats/socialite.webp new file mode 100644 index 00000000..8c257d66 Binary files /dev/null and b/test/fixtures/images/octocats/socialite.webp differ diff --git a/test/integration-pug.test.js b/test/integration-pug.test.js index db414930..cc6dadc6 100644 --- a/test/integration-pug.test.js +++ b/test/integration-pug.test.js @@ -1,7 +1,5 @@ import { compareFiles, exceptionContain, watchCompareFiles } from './utils/helpers'; import { filterLoadException } from '../src/Loader/Preprocessors/Pug/Exeptions'; -import adapterHighlight from '../src/Loader/Preprocessors/Pug/filters/highlight/adapter'; -import filterHighlight from '../src/Loader/Preprocessors/Pug/filters/highlight'; import FugFilter from '../src/Loader/Preprocessors/Pug/Filter'; @@ -115,16 +113,6 @@ describe('embedded filters tests', () => { test(`:code`, () => compareFiles('_pug/filter-code')); test(`:code include files`, () => compareFiles('_pug/filter-code-include-files')); test(`:highlight`, () => compareFiles('_pug/filter-highlight')); - test(':highlight prismjs - isInitialized', (done) => { - const prismjs = require('../src/Loader/Preprocessors/Pug/filters/highlight/prismjs'); - // reset cached module - prismjs.module = null; - prismjs.init({}); - - const result = prismjs.isInitialized(); - expect(result).toBeTruthy(); - done(); - }); test(`:markdown`, () => compareFiles('_pug/filter-markdown')); }); @@ -170,18 +158,18 @@ describe('exceptions', () => { }); test('exception: filter :highlight - unsupported module', () => { - const filterHighlight = require('../src/Loader/Preprocessors/Pug/filters/highlight'); - const adapterHighlight = require('../src/Loader/Preprocessors/Pug/filters/highlight/adapter'); + const filterHighlight = require('../src/Loader/PreprocessorFilters/highlight'); + const adapterHighlight = require('../src/Loader/PreprocessorFilters/highlight/adapter'); // reset cached module adapterHighlight.module = null; filterHighlight.module = null; - const containString = `unsupported highlight module`; + const containString = `Used unsupported module`; return exceptionContain('_pug/msg-exception-filter-highlight-unsupported-module', containString); }); test('exception: filter :highlight adapter - unsupported module', (done) => { - const adapterHighlight = require('../src/Loader/Preprocessors/Pug/filters/highlight/adapter'); + const adapterHighlight = require('../src/Loader/PreprocessorFilters/highlight/adapter'); // reset cached module adapterHighlight.module = null; diff --git a/test/preprocessor.test.js b/test/preprocessor.test.js index 4423a8e5..ea686749 100644 --- a/test/preprocessor.test.js +++ b/test/preprocessor.test.js @@ -10,6 +10,7 @@ describe('Eta', () => { test('default', () => compareFiles('_preprocessor/eta-default')); test('option views', () => compareFiles('_preprocessor/eta-option-views')); test('option async', () => compareFiles('_preprocessor/eta-option-async')); + test('include md', () => compareFiles('_preprocessor/eta-include-md')); }); describe('EJS', () => { @@ -19,6 +20,7 @@ describe('EJS', () => { test('custom render', () => compareFiles('_preprocessor/ejs-custom-render')); test('require js', () => compareFiles('_preprocessor/ejs-require-js')); test('require json', () => compareFiles('_preprocessor/ejs-require-json')); + test('include md', () => compareFiles('_preprocessor/ejs-include-md')); // special cases test('Template with CRLF line separator', () => compareFiles('_preprocessor/ejs-template-clrf')); @@ -41,6 +43,8 @@ describe('handlebars', () => { test('build-in `block` helper', () => compareFiles('_preprocessor/handlebars-helper-block-buildIn')); test('override build-in helper', () => compareFiles('_preprocessor/handlebars-helper-block-user')); test('handlebars-layouts', () => compareFiles('_preprocessor/handlebars-helper-layouts')); + + test('include markdown', () => compareFiles('_preprocessor/handlebars-include-md')); }); describe('nunjucks', () => {Caution
+Advises about risks or negative outcomes of certain actions.
