sommark 1.0.0 → 1.1.0

package/CHANGELOG.md

@@ -0,0 +1,31 @@
+# Changelog
+
+## 1.0.0 (2026-01-04)
+- Initial release
+- Supports HTML, MD, MDX output
+- CLI ready
+- Lightweight 61 KB package
+
+## 1.1.0 (2026-01-08)
+
+### Features
+
+- **Highlight.js Integration**:
+    - Added support for highlight.js themes.
+    - Added `codeThemes` and `selectedTheme` to Mapper configuration.
+    - Default theme for HTML output is now `atom-one-dark`.
+    - Added `helpers/loadStyle.js` to dynamically load theme CSS (isomorphic: supports both Node.js via `fs` and browser via `fetch`).
+    - Automatically injects selected theme CSS into HTML output when code blocks are present.
+
+- **Mappers**:
+    - Added `includesId(id)` helper method to `Mapper` class for checking output mapping existence.
+
+### Bug Fixes
+
+- **Core/Parser**: Fixed a critical issue where global state variables (`block_stack`, `line`, etc.) were not reset between parse calls, causing errors on subsequent runs.
+- **Core/Transpiler**: Removed leftover debug `console.log` calls.
+- **Mappers/Markdown**: Fixed `Heading` block ignoring inner content (text/comments) in MD/MDX output. Now appends nested content after the heading.
+- **Security**: Refactored HTML escaping architecture.
+    - **Transpiler**: `AtBlock` content is now **escaped by default** in the transpiler to prevent XSS.
+    - **Mapper**: Added `options` to `Mapper.create` (e.g., `{ escape: false }`) to allow specific blocks (like `Code`, `List`, `Table`) to opt-out of automatic escaping when they handle raw content safely or require it for parsing.
+    - **Parser**: Removed manual escaping from Parser to support the new transpiler-based architecture.

package/cli/cli.mjs

@@ -22,7 +22,7 @@ function getHelp(unknown_option = true) {
 		"{N}  <$green:-v or --version$>   <$cyan: show version information$>",
 		"{N}  <$green:--html$>            <$cyan: transpile to html$>",
 		"{N}  <$green:--md$>              <$cyan: transpile to markdown$>",
-		"{N}  <$green:--mdx>              <$cyan: transpile to mdx>"
+		"{N}  <$green:--mdx$>             <$cyan: transpile to mdx$>"
 	].join("");
 	const help_msg = formatMessage(msg);
 	if (!options.includes(process.argv[2]) && unknown_option) {

package/core/parser.js

@@ -78,7 +78,7 @@ let block_stack = [];
 let end_stack = [];
 let tokens_stack = [];
 let line = 1,
-	start = 1,	
+	start = 1,
 	end = 1,
 	value = "";
 
@@ -430,6 +430,13 @@ function parseNode(tokens, i) {
 }
 
 function parser(tokens) {
+	block_stack = [];
+	end_stack = [];
+	tokens_stack = [];
+	line = 1;
+	start = 1;
+	end = 1;
+	value = "";
 	let ast = [];
 	for (let i = 0; i < tokens.length; i++) {
 		let [nodes, nextIndex] = parseNode(tokens, i);
@@ -455,4 +462,4 @@ function parser(tokens) {
 	return ast;
 }
 
-export default parser;
+export default parser;

package/core/transpiler.js

@@ -1,9 +1,10 @@
 import PREDEFINED_IDS from "./ids.js";
 import { BLOCK, TEXT, INLINE, ATBLOCK, COMMENT, NEWLINE } from "./names.js";
+import escapeHTML from "../helpers/escapeHTML.js";
 import { transpilerError } from "./validator.js";
 
-const formats = { html: "html", md: "md", mdx: "mdx" };
-const { html, md, mdx } = formats;
+const formats = { htmlFormat: "html", markdownFormat: "md", mdxFormat: "mdx" };
+const { htmlFormat, markdownFormat, mdxFormat } = formats;
 
 // Extracting target identifier
 function matchedValue(outputs, targetId) {
@@ -29,15 +30,15 @@ function matchedValue(outputs, targetId) {
 function generateOutput(ast, i, format, file) {
 	const node = Array.isArray(ast) ? ast[i] : ast;
 	let result = "";
+	let context = "";
 	let target = matchedValue(file.outputs, node.id);
 	if (target) {
 		result +=
-			format === html || format === mdx
+			format === htmlFormat || format === mdxFormat
 				? (node.depth > 1 ? " ".repeat(node.depth) : "") +
-					target.render({ args: node.args, content: "\n<%smark>" + (node.depth > 1 ? " ".repeat(node.depth) : "") }) +
-					"\n"
+				target.render({ args: node.args, content: "\n<%smark>" + (node.depth > 1 ? " ".repeat(node.depth) : "") }) +
+				"\n"
 				: target.render({ args: node.args, content: "" });
-		let context = "";
 		for (const body_node of node.body) {
 			switch (body_node.type) {
 				case TEXT:
@@ -48,11 +49,7 @@ function generateOutput(ast, i, format, file) {
 							body_node.text = body_node.text.slice(1, body_node.text.length - 1);
 						}
 					}
-					if (format === html) {
-						context += " ".repeat(body_node.depth) + `<p>${body_node.text}</p>`;
-					} else {
-						context += body_node.text;
-					}
+					context += (format === htmlFormat || format === mdxFormat) ? escapeHTML(body_node.text) : body_node.text;
 					break;
 				case INLINE:
 					target = matchedValue(file.outputs, body_node.id);
@@ -64,15 +61,15 @@ function generateOutput(ast, i, format, file) {
 									metadata.push(body_node.data);
 								}
 								if (body_node.hasOwnProperty("title")) {
-									if (format === html) body_node.title = body_node.title.replaceAll('"', "");
+									if (format === htmlFormat) body_node.title = body_node.title.replaceAll('"', "");
 									metadata.push(body_node.title);
 								}
 								break;
 							}
 						}
 						context +=
-							(format === html || format === mdx ? "\n" : "") +
-							target.render({ args: metadata.length > 0 ? metadata : "", content: body_node.value });
+							(format === htmlFormat || format === mdxFormat ? "\n" : "") +
+							target.render({ args: metadata.length > 0 ? metadata : "", content: (format === htmlFormat || format === mdxFormat) ? escapeHTML(body_node.value) : body_node.value });
 					}
 					break;
 				case NEWLINE:
@@ -81,17 +78,24 @@ function generateOutput(ast, i, format, file) {
 				case ATBLOCK:
 					target = matchedValue(file.outputs, body_node.id);
 					if (target) {
+						const shouldEscape = target.options?.escape ?? true;
 						let content = "";
 						for (let v = 0; v < body_node.content.length; v++) {
 							let value = body_node.content[v];
+							if (shouldEscape) {
+								value = escapeHTML(value);
+							}
 							content += v === 0 ? value : "\n" + value;
 						}
 						context += target.render({ args: body_node.args, content });
 					}
 					break;
 				case COMMENT:
-					let commentFormat = `<!--${body_node.text.replace("#", "")}-->`;
-					context += " ".repeat(body_node.depth) + commentFormat;
+					if (format === htmlFormat || format === markdownFormat) {
+						context += " ".repeat(body_node.depth) + `<!--${body_node.text.replace("#", "")}-->`;
+					} else if (format === mdxFormat) {
+						context += " ".repeat(body_node.depth) + `{/*${body_node.text.replace("#", "")} */}`;
+					}
 					break;
 				case BLOCK:
 					target = matchedValue(file.outputs, body_node.id);
@@ -99,7 +103,7 @@ function generateOutput(ast, i, format, file) {
 					break;
 			}
 		}
-		if (format === html || format === mdx) {
+		if (format === htmlFormat || format === mdxFormat) {
 			result = result.replace("<%smark>", context);
 		} else {
 			result += context;
@@ -113,17 +117,28 @@ function generateOutput(ast, i, format, file) {
 	return result;
 }
 
-function transpiler({ast, format, mapperFile, includeDocument = true }) {
+function transpiler({ ast, format, mapperFile, includeDocument = true }) {
 	let output = "";
 	for (let i = 0; i < ast.length; i++) {
 		if (ast[i].type === BLOCK) {
 			output += generateOutput(ast, i, format, mapperFile);
 		} else if (ast[i].type === COMMENT) {
-			let commentFormat = `<!--${ast[i].text.replace("#", "")}-->`;
-			output += commentFormat + "\n";
+			if (format === htmlFormat || format === markdownFormat) {
+				output += `<!--${ast[i].text.replace("#", "")}-->\n`;
+			} else if (format === mdxFormat) {
+				output += `{/*${ast[i].text.replace("#", "")} */}\n`;
+			}
+		}
+	}
+	if (format === htmlFormat && (output.includes("<code>") || output.includes("<pre>"))) {
+		if (mapperFile.enableLoadStyle) {
+			mapperFile.setHeader([mapperFile.loadStyle(mapperFile.env, mapperFile.selectedTheme)]);
+		}
+		if (mapperFile.enableLinkStyle) {
+			mapperFile.setHeader([mapperFile.cssTheme(mapperFile.selectedTheme)]);
 		}
 	}
-	if (includeDocument && format === html) {
+	if (includeDocument && format === htmlFormat) {
 		const document = "<!DOCTYPE html>\n" + "<html>\n" + mapperFile.header + "<body>\n" + output + "</body>\n" + "</html>\n";
 		return document;
 	}

package/formatter/tag.js

@@ -1,3 +1,4 @@
+import escapeHTML from "../helpers/escapeHTML.js";
 class TagBuilder {
 	#children;
 	#attr;
@@ -11,7 +12,7 @@ class TagBuilder {
 	attributes(obj, ...arr) {
 		if (obj && obj instanceof Object) {
 			Object.entries(obj).forEach(([key, value]) => {
-				this.#attr.push(`${key}="${ value ?? ""}"`);
+				this.#attr.push(`${key}="${escapeHTML(value ?? "")}"`);
 			});
 		}
 		if (arr && Array.isArray(arr)) {
@@ -32,10 +33,10 @@ class TagBuilder {
 				if (prop && type) {
 					switch (type) {
 						case "string":
-							this.#attr.push(`${key2}="${value}"`);
+							this.#attr.push(`${key2}="${escapeHTML(value)}"`);
 							break;
 						case "other":
-							this.#attr.push(`${key2}={${value}}`);
+							this.#attr.push(`${key2}={${value}}`); // React/MDX props might need different handling, but usually raw JS expression?
 							break;
 					}
 				}

package/helpers/loadStyle.js

@@ -0,0 +1,25 @@
+export async function loadStyle(env = "node", theme = 'atom-one-dark.min', targetPath = "./node_modules/highlight.js/styles/") {
+    try {
+        if (env === "node" || env === "browser") {
+            if (env === "node") {
+                const fs = await import("fs/promises");
+                const path = await import("path");
+                return await fs.readFile(path.join(process.cwd(), targetPath, theme + ".css"), "utf-8");
+            } else if (env === "browser") {
+                const url = new URL("../" + targetPath + theme + ".css", import.meta.url);
+                if (typeof process !== "undefined" && process.versions && process.versions.node) {
+                    const fs = await import("fs/promises");
+                    return await fs.readFile(url, "utf-8");
+                }
+                const response = await fetch(url);
+                return await response.text();
+            }
+        } else {
+            throw new Error("Invalid environment");
+        }
+    } catch (error) {
+        console.error("Error loading style:", error);
+        return "";
+    }
+}
+export default loadStyle;

package/index.js

@@ -8,6 +8,7 @@ import mdx from "./mappers/default_mode/smark.mdx.js";
 import TagBuilder from "./formatter/tag.js";
 import MarkdownBuilder from "./formatter/mark.js";
 import { runtimeError } from "./core/validator.js";
+import { loadStyle } from "./helpers/loadStyle.js";
 
 class SomMark {
 	constructor({ src, format, mapperFile = null, mode = "default", includeDocument = true }) {
@@ -57,7 +58,7 @@ class SomMark {
 const lex = src => lexer(src);
 
 function parse(src) {
-	if(!src) {
+	if (!src) {
 		runtimeError([
 			`{line}<$red:Missing Source:$> <$yellow:The 'src' argument is required for parsing.$>{line}`
 		]);
@@ -100,5 +101,5 @@ function transpile(options = {}) {
 	return transpiler({ ast, format, mapperFile, includeDocument });
 }
 
-export { html, markdown, mdx, Mapper, TagBuilder, MarkdownBuilder, lex, parse, transpile };
+export { html, markdown, mdx, Mapper, TagBuilder, MarkdownBuilder, lex, parse, transpile, loadStyle };
 export default SomMark;

package/lib/highlight.js

@@ -1,12 +1,183 @@
 import hljs from "highlight.js";
 
-export function highlightCode(code, language = "plaintext") {
+function highlightCode(code, language = "plaintext") {
 	if (!hljs.getLanguage(language)) {
 		language = "plaintext";
 	}
 	return hljs.highlight(code, { language }).value;
 }
+const themes = [
+    "gradient-dark",
+    "qtcreator-light",
+    "sunburst",
+    "intellij-light",
+    "rose-pine-moon.min",
+    "default.min",
+    "stackoverflow-light",
+    "rose-pine-moon",
+    "stackoverflow-light.min",
+    "magula.min",
+    "qtcreator-light.min",
+    "srcery.min",
+    "nord",
+    "purebasic",
+    "atom-one-dark-reasonable.min",
+    "a11y-light",
+    "monokai-sublime.min",
+    "cybertopia-dimmer.min",
+    "arduino-light.min",
+    "routeros",
+    "shades-of-purple.min",
+    "lioshi",
+    "isbl-editor-dark",
+    "monokai-sublime",
+    "docco",
+    "xcode",
+    "lioshi.min",
+    "foundation",
+    "github-dark-dimmed",
+    "far.min",
+    "night-owl.min",
+    "routeros.min",
+    "atom-one-light",
+    "1c-light.min",
+    "kimbie-light",
+    "ascetic.min",
+    "tokyo-night-dark.min",
+    "nnfx-dark",
+    "school-book.min",
+    "agate",
+    "lightfair.min",
+    "mono-blue.min",
+    "an-old-hope.min",
+    "a11y-dark.min",
+    "panda-syntax-dark",
+    "mono-blue",
+    "obsidian.min",
+    "gradient-light",
+    "tomorrow-night-bright",
+    "qtcreator-dark",
+    "gml.min",
+    "grayscale.min",
+    "panda-syntax-light",
+    "atom-one-dark-reasonable",
+    "xt256", "monokai", 
+    "sunburst.min", 
+    "gradient-light.min", 
+    "arta", 
+    "felipec.min", 
+    "srcery", 
+    "stackoverflow-dark.min", 
+    "codepen-embed.min", 
+    "docco.min", 
+    "shades-of-purple", 
+    "github.min", 
+    "cybertopia-icecap", 
+    "felipec", 
+    "paraiso-dark.min", 
+    "arta.min", 
+    "gml", 
+    "vs2015.min", 
+    "a11y-dark", 
+    "github-dark-dimmed.min", 
+    "tokyo-night-dark", 
+    "vs2015", 
+    "rose-pine-dawn", 
+    "ir-black.min", 
+    "googlecode.min", 
+    "cybertopia-saturated.min", 
+    "color-brewer.min", 
+    "night-owl", 
+    "rose-pine", 
+    "tomorrow-night-bright.min", 
+    "a11y-light.min", 
+    "brown-paper.min", 
+    "panda-syntax-dark.min", 
+    "dark.min", 
+    "school-book", 
+    "obsidian", 
+    "stackoverflow-dark",
+    "1c-light", 
+    "nord.min", 
+    "kimbie-dark", 
+    "brown-paper", 
+    "nnfx-light.min", 
+    "rainbow", 
+    "cybertopia-icecap.min", 
+    "gradient-dark.min", 
+    "isbl-editor-light", 
+    "paraiso-light.min", 
+    "cybertopia-cherry", 
+    "foundation.min", 
+    "purebasic.min", 
+    "xt256.min", 
+    "pojoaque.min", 
+    "lightfair", 
+    "nnfx-dark.min", 
+    "isbl-editor-light.min", 
+    "tomorrow-night-blue", 
+    "rainbow.min", 
+    "ir-black", 
+    "androidstudio", 
+    "github", 
+    "googlecode", 
+    "paraiso-dark", 
+    "codepen-embed", 
+    "vs", 
+    "cybertopia-dimmer", 
+    "devibeans", 
+    "tokyo-night-light", 
+    "isbl-editor-dark.min", 
+    "idea", 
+    "github-dark", 
+    "hybrid.min", 
+    "idea.min", 
+    "dark", 
+    "atom-one-light.min", 
+    "an-old-hope", 
+    "atom-one-dark.min", 
+    "agate.min", 
+    "github-dark.min", 
+    "qtcreator-dark.min", 
+    "devibeans.min", 
+    "magula", 
+    "rose-pine-dawn.min", 
+    "ascetic", 
+    "vs.min", 
+    "far", 
+    "rose-pine.min", 
+    "hybrid", 
+    "nnfx-light", 
+    "atom-one-dark", 
+    "paraiso-light", 
+    "intellij-light.min", 
+    "grayscale", 
+    "xcode.min", 
+    "arduino-light", 
+    "panda-syntax-light.min", 
+    "tomorrow-night-blue.min", 
+    "tokyo-night-light.min", 
+    "kimbie-light.min", 
+    "cybertopia-cherry.min", 
+    "androidstudio.min", 
+    "default", 
+    "color-brewer", 
+    "monokai.min", 
+    "pojoaque", 
+    "kimbie-dark.min", 
+    "cybertopia-saturated"];
 
-export function cssTheme(theme = "atom-one-dark") {
+ let selectedTheme = "atom-one-dark.min";
+ function cssTheme(theme = selectedTheme) {
+	if (!themes.includes(theme)) {
+		theme = "atom-one-dark.min";
+	}
 	return `<link rel="stylesheet" href="node_modules/highlight.js/styles/${theme}.css">`;
 }
+
+export {
+	highlightCode,
+	cssTheme,
+	selectedTheme,
+	themes,
+};

package/mappers/default_mode/smark.html.js

@@ -1,6 +1,9 @@
 import Mapper from "../mapper.js";
 const html = new Mapper();
-const { tag, setHeader, code, cssTheme, list } = html;
+const { tag, code, list } = html;
+
+html.selectedTheme = "paraiso-dark";
+html.env = "browser";
 
 // Block
 html.create("Block", ({ content }) => {
@@ -58,18 +61,18 @@ html.create("image", ({ args, content }) => {
 // Code
 html.create("code", ({ args, content }) => {
 	return code(args, content);
-});
+}, { escape: false });
 // List
 html.create(["list", "List"], ({ content }) => {
 	return list(content);
-});
+}, { escape: false });
 // Table
 html.create("table", ({ content, args }) => {
 	return html.htmlTable(content.split(/\n/), args);
-});
+}, { escape: false });
 // Horizontal Rule
 html.create("hr", () => {
 	return tag("hr").selfClose();
 });
-setHeader([cssTheme()]);
+
 export default html;

package/mappers/default_mode/smark.md.js

@@ -7,8 +7,7 @@ markdown.create("Block", ({ content }) => {
 });
 // Headings
 markdown.create("Heading", ({ args, content }) => {
-	console.log(args, content);
-	return md.heading(args[1], args[0]);
+	return md.heading(args[1], args[0]) + content;
 });
 // Inline Headings
 markdown.create("h1", ({ content }) => {
@@ -44,7 +43,7 @@ markdown.create(["emphasis", "e"], ({ content }) => {
 // Code Blocks
 markdown.create(["code", "Code", "codeBlock", "CodeBlock"], ({ args, content }) => {
 	return md.codeBlock(content, args[0]);
-});
+}, { escape: false });
 // Link
 markdown.create("link", ({ args, content }) => {
 	return md.url("link", content, args[0], args[1]);
@@ -64,10 +63,10 @@ markdown.create(["escape", "s"], ({ content }) => {
 // Table
 markdown.create("table", ({ args, content }) => {
 	return md.table(args, content.split("\n"));
-});
+}, { escape: false });
 // List
 markdown.create(["list", "List"], ({ content }) => {
 	return content;
-});
+}, { escape: false });
 export default markdown;
 

package/mappers/mapper.js

@@ -1,7 +1,8 @@
 import TagBuilder from "../formatter/tag.js";
 import MarkdownBuilder from "../formatter/mark.js";
-import { highlightCode, cssTheme } from "../lib/highlight.js";
+import { highlightCode, cssTheme, selectedTheme, themes } from "../lib/highlight.js";
 import escapeHTML from "../helpers/escapeHTML.js";
+import loadStyle from "../helpers/loadStyle.js";
 class Mapper {
 	#predefinedHeaderData;
 	#customElements;
@@ -22,9 +23,15 @@ class Mapper {
 		this.#customElements = "";
 		this.highlightCode = highlightCode;
 		this.cssTheme = cssTheme;
+		this.selectedTheme = selectedTheme;
+		this.codeThemes = themes;
 		this.escapeHTML = escapeHTML;
+		this.enableLoadStyle = false;
+		this.enableLinkStyle = true;
+		this.loadStyle = loadStyle;
+		this.env = "node";
 	}
-	create(id, renderOutput) {
+	create(id, renderOutput, options = { escape: true }) {
 		if (!id || !renderOutput) {
 			throw new Error("Expected arguments are not defined");
 		}
@@ -48,7 +55,7 @@ class Mapper {
 			return renderOutput(data);
 		};
 
-		this.outputs.push({ id, render });
+		this.outputs.push({ id, render, options });
 	}
 	removeOutput(id) {
 		this.outputs = this.outputs.filter(output => {
@@ -188,5 +195,15 @@ class Mapper {
 
 		return renderItems(nodes);
 	};
+	includesId = id => {
+		if (Array.isArray(id)) {
+			return this.outputs.some(output => {
+				return id.some(singleId => singleId === output.id);
+			});
+		}
+		return this.outputs.some(output => {
+			return output.id === id;
+		});
+	}
 }
 export default Mapper;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sommark",
-	"version": "1.0.0",
+	"version": "1.1.0",
 	"description": "SomMark is a structural markup language for writing structured documents and converting them into HTML or Markdown or MDX(only ready components).",
 	"main": "index.js",
 	"directories": {
@@ -23,19 +23,19 @@
 		"url": "git+https://github.com/Adam-Elmi/SomMark.git"
 	},
 	"keywords": [
-	  "language",
-    "markup",
-    "markup-lanuage",
-    "documentation",
-    "parser",
-    "transpiler",
-    "html",
-    "markdown",
-    "mdx",
-    "dsl",
-    "mapper",
-    "mapping"
-  ],
+		"language",
+		"markup",
+		"markup-lanuage",
+		"documentation",
+		"parser",
+		"transpiler",
+		"html",
+		"markdown",
+		"mdx",
+		"dsl",
+		"mapper",
+		"mapping"
+	],
 	"author": "Adam Elmi",
 	"license": "MIT",
 	"bugs": {
@@ -48,4 +48,4 @@
 	"devDependencies": {
 		"vitest": "^4.0.16"
 	}
-}
+}